Merge pull request #1313 from danskernesdigitalebibliotek/DDFFORM-719…

…-cover-accessibility Improve `Cover` accessibility by adding `isHiddenFromScreenReaders` attribute to `Link` component - Ddfform 719
danskernesdigitalebibliotek · Jul 9, 2024 · 814e169 · 814e169
2 parents 77f4742 + a86a334
commit 814e169
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/src/components/atoms/links/Link.tsx b/src/components/atoms/links/Link.tsx
@@ -11,6 +11,7 @@ export interface LinkProps {
   dataCy?: string;
   ariaLabelledBy?: string;
   stopPropagation?: boolean;
+  isHiddenFromScreenReaders?: boolean;
 }
 
 const Link: React.FC<LinkProps> = ({
@@ -22,7 +23,8 @@ const Link: React.FC<LinkProps> = ({
   trackClick,
   dataCy,
   ariaLabelledBy,
-  stopPropagation = false
+  stopPropagation = false,
+  isHiddenFromScreenReaders
 }) => {
   const handleClick = getLinkHandler({
     type: "click",
@@ -51,6 +53,8 @@ const Link: React.FC<LinkProps> = ({
       onClick={handleClick}
       onKeyUp={handleKeyUp}
       aria-labelledby={ariaLabelledBy}
+      tabIndex={isHiddenFromScreenReaders ? -1 : 0}
+      aria-hidden={isHiddenFromScreenReaders}
     >
       {children}
     </a>

diff --git a/src/components/atoms/links/LinkNoStyle.tsx b/src/components/atoms/links/LinkNoStyle.tsx
@@ -9,6 +9,7 @@ export interface LinkNoStyleProps {
   trackClick?: () => Promise<unknown>;
   dataCy?: string;
   ariaLabelledBy?: string;
+  isHiddenFromScreenReaders?: boolean;
 }
 
 const LinkNoStyle: React.FC<LinkNoStyleProps> = ({
@@ -18,7 +19,8 @@ const LinkNoStyle: React.FC<LinkNoStyleProps> = ({
   className,
   trackClick,
   dataCy = "link-no-style",
-  ariaLabelledBy
+  ariaLabelledBy,
+  isHiddenFromScreenReaders
 }) => {
   return (
     <Link
@@ -28,6 +30,7 @@ const LinkNoStyle: React.FC<LinkNoStyleProps> = ({
       trackClick={trackClick}
       dataCy={dataCy}
       ariaLabelledBy={ariaLabelledBy}
+      isHiddenFromScreenReaders={isHiddenFromScreenReaders}
     >
       {children}
     </Link>

diff --git a/src/components/cover/cover.tsx b/src/components/cover/cover.tsx
@@ -91,6 +91,7 @@ export const Cover = ({
         className={classes.wrapper}
         url={url}
         ariaLabelledBy={linkAriaLabelledBy}
+        isHiddenFromScreenReaders={!alt}
       >
         {coverSrc && (
           <CoverImage