Add title/aria-label to uu disclaimer iconbutton. Add PopoverTitle.

NDLANO · Dec 13, 2024 · 7e501a6 · 7e501a6
1 parent de6d692
commit 7e501a6
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 2 deletions.
diff --git a/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx b/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx
@@ -7,9 +7,10 @@
  */
 
 import { type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
 import { Portal } from "@ark-ui/react";
 import { AccessibilityFill } from "@ndla/icons";
-import { Text, IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
+import { Text, IconButton, PopoverContent, PopoverRoot, PopoverTrigger, PopoverTitle } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { UuDisclaimerMetaData } from "@ndla/types-embed";
 
@@ -33,6 +34,7 @@ const StyledIconButton = styled(IconButton, {
 });
 
 const UuDisclaimerEmbed = ({ embed, children }: Props) => {
+  const { t } = useTranslation();
   if (embed.status === "error") {
     return null;
   }
@@ -43,12 +45,18 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
     <DisclaimerWrapper role="region" data-embed-type="uu-disclaimer">
       <PopoverRoot>
         <PopoverTrigger asChild>
-          <StyledIconButton size="small" variant="secondary">
+          <StyledIconButton
+            size="small"
+            variant="secondary"
+            aria-label={t("uuDisclaimer.title")}
+            title={t("uuDisclaimer.title")}
+          >
             <AccessibilityFill />
           </StyledIconButton>
         </PopoverTrigger>
         <Portal>
           <PopoverContent>
+            <PopoverTitle>{t("uuDisclaimer.title")}</PopoverTitle>
             <Text>{embedData.disclaimer}</Text>
           </PopoverContent>
         </Portal>

diff --git a/packages/ndla-ui/src/locale/messages-en.ts b/packages/ndla-ui/src/locale/messages-en.ts
@@ -1441,6 +1441,7 @@ const messages = {
       code: "Code block",
     },
   },
+  uuDisclaimer: { title: "Accessibility" },
   gloss: {
     examples: "Examples",
     showExamples: "Show examples",

diff --git a/packages/ndla-ui/src/locale/messages-nb.ts b/packages/ndla-ui/src/locale/messages-nb.ts
@@ -1442,6 +1442,7 @@ const messages = {
       code: "Kodeblokk",
     },
   },
+  uuDisclaimer: { title: "Tilgjengelighet" },
   gloss: {
     examples: "Eksempler",
     showExamples: "Vis eksempler",

diff --git a/packages/ndla-ui/src/locale/messages-nn.ts b/packages/ndla-ui/src/locale/messages-nn.ts
@@ -1441,6 +1441,7 @@ const messages = {
       code: "Kodeblokk",
     },
   },
+  uuDisclaimer: { title: "Tilgjengelighet" },
   gloss: {
     examples: "Eksempler",
     showExamples: "Vis eksempler",

diff --git a/packages/ndla-ui/src/locale/messages-se.ts b/packages/ndla-ui/src/locale/messages-se.ts
@@ -1443,6 +1443,7 @@ const messages = {
       code: "Kodeblokk",
     },
   },
+  uuDisclaimer: { title: "Tilgjengelighet" },
   gloss: {
     examples: "Ovdamearkkat",
     showExamples: "Vis eksempler",

diff --git a/packages/ndla-ui/src/locale/messages-sma.ts b/packages/ndla-ui/src/locale/messages-sma.ts
@@ -1445,6 +1445,7 @@ const messages = {
       code: "Kodeblokk",
     },
   },
+  uuDisclaimer: { title: "Tilgjengelighet" },
   gloss: {
     examples: "Eksempler",
     showExamples: "Vis eksempler",