feat: skip non-accessible content

packages/ndla-ui/src/Embed/UuDisclaimerEmbed.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import type { Meta, StoryObj } from "@storybook/react";
-import { ExpandableBox, ExpandableBoxSummary, FramedContent, PageContent } from "@ndla/primitives";
+import { Button, ExpandableBox, ExpandableBoxSummary, FramedContent, PageContent } from "@ndla/primitives";
 import type { UUDisclaimerData, UuDisclaimerEmbedData } from "@ndla/types-embed";
 import H5pEmbed from "./H5pEmbed";
 import IframeEmbed from "./IframeEmbed";
@@ -199,3 +199,31 @@ export const Error: StoryObj<typeof UuDisclaimerEmbed> = {
     ),
   },
 };
+
+export const SkipContent: StoryObj<typeof UuDisclaimerEmbed> = {
+  args: {
+    embed: {
+      resource: "uu-disclaimer",
+      status: "success",
+      embedData: { ...embedData, skipContent: "true" },
+      data,
+    },
+    children: (
+      <div>
+        <h2>Dette er noe ugyldig innhold</h2>
+        <Button>Denne kan hoppes over!</Button>
+        <p>
+          Innholdet kan enkelt hoppes over ved å bruke knappen skip-knappen som dukker opp når du bruker
+          tastaturnavigering inne i popoveren.
+        </p>
+      </div>
+    ),
+  },
+  render: (args) => (
+    <>
+      <UuDisclaimerEmbed {...args} />
+      <h2>Dette er noe gyldig innhold</h2>
+      <Button>Denne vil ikke hoppes over</Button>
+    </>
+  ),
+};

packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx

@@ -6,12 +6,13 @@
  *
  */
 
-import { type ReactNode } from "react";
+import { useRef, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { Portal } from "@ark-ui/react";
 import { AccessibilityFill, ErrorWarningFill } from "@ndla/icons";
-import { IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
+import { Button, IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
+import { visuallyHidden } from "@ndla/styled-system/patterns";
 import type { UuDisclaimerMetaData } from "@ndla/types-embed";
 
 interface Props {
@@ -44,14 +45,35 @@ const StyledErrorWarningFill = styled(ErrorWarningFill, {
 
 const StyledPopoverContent = styled(PopoverContent, {
   base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall",
     width: "surface.xlarge",
     maxHeight: "50vh",
     overflowY: "auto",
   },
 });
 
+const HiddenButton = styled(Button, {
+  base: {
+    "&:not(:focus)": {
+      position: "absolute",
+      width: "1px",
+      height: "1px",
+      padding: "0",
+      margin: "-1px",
+      overflow: "hidden",
+      clip: "rect(0,0,0,0)",
+      whiteSpace: "nowrap",
+      borderWidth: "0",
+    },
+  },
+});
+
 const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Props) => {
   const { t } = useTranslation();
+  const skipRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
   if (embed.status === "error") {
     return (
       <DisclaimerWrapper>
@@ -66,7 +88,7 @@ const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Props) =>
 
   return (
     <DisclaimerWrapper role="region" data-embed-type="uu-disclaimer">
-      <PopoverRoot>
+      <PopoverRoot initialFocusEl={() => contentRef.current}>
         <PopoverTrigger asChild>
           <StyledIconButton
             size="small"
@@ -78,12 +100,18 @@ const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Props) =>
           </StyledIconButton>
         </PopoverTrigger>
         <Portal>
-          <StyledPopoverContent>
+          <StyledPopoverContent ref={contentRef}>
             <div>{transformedDisclaimer}</div>
+            {embed.embedData.skipContent === "true" && (
+              <HiddenButton onClick={() => skipRef.current?.focus()}>{t("uuDisclaimer.skipContent")}</HiddenButton>
+            )}
           </StyledPopoverContent>
         </Portal>
       </PopoverRoot>
       <div data-uu-content="">{children}</div>
+      <div className={visuallyHidden()} tabIndex={-1} ref={skipRef}>
+        {t("uuDisclaimer.contentCompleted")}
+      </div>
     </DisclaimerWrapper>
   );
 };

packages/ndla-ui/src/locale/messages-en.ts

@@ -307,7 +307,11 @@ const messages = {
       disclaimer: "Accessibility warning",
     },
   },
-  uuDisclaimer: { title: "Accessibility" },
+  uuDisclaimer: {
+    title: "Accessibility",
+    skipContent: "Skip non-accessible content",
+    contentCompleted: "End of non-accessible content.",
+  },
   gloss: {
     examples: "Examples",
     showExamples: "Show examples",

packages/ndla-ui/src/locale/messages-nb.ts

@@ -308,7 +308,11 @@ const messages = {
       disclaimer: "UU-advarsel",
     },
   },
-  uuDisclaimer: { title: "Tilgjengelighet" },
+  uuDisclaimer: {
+    title: "Tilgjengelighet",
+    skipContent: "Hopp over ikke-tilgjengelig innhold",
+    contentCompleted: "Slutt på ikke-tilgjengelig innhold.",
+  },
   gloss: {
     examples: "Eksempler",
     showExamples: "Vis eksempler",

packages/ndla-ui/src/locale/messages-nn.ts

@@ -308,7 +308,11 @@ const messages = {
       disclaimer: "UU-advarsel",
     },
   },
-  uuDisclaimer: { title: "Tilgjengelighet" },
+  uuDisclaimer: {
+    title: "Tilgjengelighet",
+    skipContent: "Hopp over ikkje-tilgjengeleg innhald",
+    contentCompleted: "Slutt på ikkje-tilgjengeleg innhald.",
+  },
   gloss: {
     examples: "Eksempler",
     showExamples: "Vis eksempler",

packages/ndla-ui/src/locale/messages-se.ts

@@ -309,7 +309,11 @@ const messages = {
       disclaimer: "UU-advarsel",
     },
   },
-  uuDisclaimer: { title: "Tilgjengelighet" },
+  uuDisclaimer: {
+    title: "Tilgjengelighet",
+    skipContent: "Hopp over ikke-tilgjengelig innhold",
+    contentCompleted: "Slutt på ikke-tilgjengelig innhold.",
+  },
   gloss: {
     examples: "Ovdamearkkat",
     showExamples: "Vis eksempler",

packages/types-embed/src/uuDisclaimerTypes.ts

@@ -10,6 +10,7 @@ import type { MetaData } from "./baseTypes";
 
 export interface UuDisclaimerEmbedData {
   resource: "uu-disclaimer";
+  skipContent?: string;
   disclaimer: string;
 }