diff --git a/src/components/atoms/links/Link.tsx b/src/components/atoms/links/Link.tsx index 9227fabd43..74dd196ea0 100644 --- 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 = ({ @@ -22,7 +23,8 @@ const Link: React.FC = ({ trackClick, dataCy, ariaLabelledBy, - stopPropagation = false + stopPropagation = false, + isHiddenFromScreenReaders }) => { const handleClick = getLinkHandler({ type: "click", @@ -51,6 +53,8 @@ const Link: React.FC = ({ onClick={handleClick} onKeyUp={handleKeyUp} aria-labelledby={ariaLabelledBy} + tabIndex={isHiddenFromScreenReaders ? -1 : 0} + aria-hidden={isHiddenFromScreenReaders} > {children} diff --git a/src/components/atoms/links/LinkNoStyle.tsx b/src/components/atoms/links/LinkNoStyle.tsx index 8cddea292b..ad20912e64 100644 --- a/src/components/atoms/links/LinkNoStyle.tsx +++ b/src/components/atoms/links/LinkNoStyle.tsx @@ -9,6 +9,7 @@ export interface LinkNoStyleProps { trackClick?: () => Promise; dataCy?: string; ariaLabelledBy?: string; + isHiddenFromScreenReaders?: boolean; } const LinkNoStyle: React.FC = ({ @@ -18,7 +19,8 @@ const LinkNoStyle: React.FC = ({ className, trackClick, dataCy = "link-no-style", - ariaLabelledBy + ariaLabelledBy, + isHiddenFromScreenReaders }) => { return ( = ({ trackClick={trackClick} dataCy={dataCy} ariaLabelledBy={ariaLabelledBy} + isHiddenFromScreenReaders={isHiddenFromScreenReaders} > {children} diff --git a/src/components/cover/cover.tsx b/src/components/cover/cover.tsx index c27a7247b1..ec69b98a1a 100644 --- 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 && (