fix: lets screenreaders know if links are external

fremtind · Dec 9, 2024 · e7b3e83 · e7b3e83
1 parent d5c09e4
commit e7b3e83
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git a/packages/core/src/components/Link.tsx b/packages/core/src/components/Link.tsx
@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React from "react";
+import React, { useId } from "react";
 import { PolymorphicPropsWithRef, PolymorphicRef } from "../polymorphism";
 
 export type LinkProps<ElementType extends React.ElementType> =
@@ -26,15 +26,23 @@ export const Link = React.forwardRef(function Link<
     } = props;
     const Component = as;
 
+    const srId = useId();
+
     return (
         <Component
             ref={ref}
             className={cn("jkl-link", className, {
                 "jkl-link--external": external,
             })}
+            aria-describedby={external ? srId : undefined}
             {...rest}
         >
             {children}
+            {external && (
+                <span hidden={true} id={srId}>
+                    Ekstern lenke
+                </span>
+            )}
         </Component>
     );
 });
diff --git a/packages/jokul/src/components/link/Link.tsx b/packages/jokul/src/components/link/Link.tsx
@@ -1,5 +1,5 @@
 import { clsx } from "clsx";
-import React from "react";
+import React, { useId } from "react";
 import {
     PolymorphicPropsWithRef,
     PolymorphicRef,
@@ -29,15 +29,23 @@ export const Link = React.forwardRef(function Link<
     } = props;
     const Component = as;
 
+    const srId = useId();
+
     return (
         <Component
             ref={ref}
             className={clsx("jkl-link", className, {
                 "jkl-link--external": external,
             })}
+            aria-describedby={external ? srId : undefined}
             {...rest}
         >
             {children}
+            {external && (
+                <span hidden={true} id={srId}>
+                    Ekstern lenke
+                </span>
+            )}
         </Component>
     );
 });
diff --git a/packages/jokul/src/components/link/documentation/LinkExample.tsx b/packages/jokul/src/components/link/documentation/LinkExample.tsx
@@ -2,13 +2,18 @@ import { ExampleComponentProps, ExampleKnobsProps } from "doc-utils/index.js";
 import React, { FC } from "react";
 import { Link } from "../Link.js";
 
-export const knobs: ExampleKnobsProps = {};
+export const knobs: ExampleKnobsProps = {
+    boolProps: ["Ekstern"],
+};
 
-export const LinkExample: FC<ExampleComponentProps> = () => {
+export const LinkExample: FC<ExampleComponentProps> = ({ boolValues }) => {
+    const external = boolValues?.["Ekstern"];
     /* -- EXAMPLE CODE START -- */
     return (
         <div>
-            <Link href="#">Lenke</Link>
+            <Link href="#" external={external}>
+                Lenke
+            </Link>
         </div>
     );
     /* -- EXAMPLE CODE END -- */