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

…cover-accessibility Add `isHiddenFromScreenReaders` to `Cover`
danskernesdigitalebibliotek · Jul 9, 2024 · 2836266 · 2836266
2 parents b6c2a89 + ea110fa
commit 2836266
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/src/stories/Library/cover/Cover.tsx b/src/stories/Library/cover/Cover.tsx
@@ -14,6 +14,7 @@ const Cover: FC<CoverProps> = ({
   alt,
   shadow,
   ariaLabel = "Link to the material",
+  isHiddenFromScreenReaders,
 }) => {
   const [imageLoaded, setImageLoaded] = useState<boolean | null>(null);
 
@@ -28,7 +29,7 @@ const Cover: FC<CoverProps> = ({
     ),
   };
 
-  if (coverUrl && alt) {
+  if (coverUrl) {
     // Images inside links must have an non-empty alt text to meet accessibility requirements.
     // Only render the cover as a link if we have both an url and a description.
     return (
@@ -38,6 +39,8 @@ const Cover: FC<CoverProps> = ({
         aria-label={ariaLabel}
         aria-labelledby="cover labelled by"
         title="cover title text"
+        tabIndex={isHiddenFromScreenReaders ? -1 : 0}
+        aria-hidden={isHiddenFromScreenReaders}
       >
         <CoverImage
           setImageLoaded={() => setImageLoaded(true)}

diff --git a/src/stories/Library/cover/types.ts b/src/stories/Library/cover/types.ts
@@ -11,4 +11,5 @@ export type CoverProps = {
   alt?: string;
   shadow?: "small" | "medium";
   ariaLabel?: string;
+  isHiddenFromScreenReaders?: boolean;
 };