Merge pull request #1329 from prezly/feature/dev-20838-address-remaining-reported-issues

kudlajz · web-flow · commit eb785bbc1a21 · 2025-06-24T18:18:53.000+02:00
[DEV-20838] Fix - Another round of accessibility fixes
diff --git a/src/components/ContactCard/ContactCard.tsx b/src/components/ContactCard/ContactCard.tsx
@@ -48,25 +48,25 @@ export function ContactCard({
                 <div className={styles.primaryContacts}>
                     {email && (
                         <a href={`mailto:${email}`} className={styles.link}>
-                            <IconEmail aria-hidden="true" className={styles.icon} />
+                            <IconEmail aria-hidden className={styles.icon} />
                             <span className={styles.linkText}>{email}</span>
                         </a>
                     )}
                     {phone && (
                         <a href={`tel:${phone}`} className={styles.link}>
-                            <IconPhone aria-hidden="true" className={styles.icon} />
+                            <IconPhone aria-hidden className={styles.icon} />
                             <span className={styles.linkText}>{phone}</span>
                         </a>
                     )}
                     {mobile && (
                         <a href={`tel:${mobile}`} className={styles.link}>
-                            <IconMobile aria-hidden="true" className={styles.icon} />
+                            <IconMobile aria-hidden className={styles.icon} />
                             <span className={styles.linkText}>{mobile}</span>
                         </a>
                     )}
                     {website && (
                         <a href={website} className={styles.link}>
-                            <IconGlobe aria-hidden="true" className={styles.icon} />
+                            <IconGlobe aria-hidden className={styles.icon} />
                             <span className={styles.linkText}>
                                 {website.replace(/(^\w+:|^)\/\//, '')}
                             </span>
@@ -76,13 +76,13 @@ export function ContactCard({
                 <div className={styles.socials}>
                     {facebook && (
                         <a href={`https://facebook.com/${facebook}`} className={styles.link}>
-                            <IconFacebook aria-hidden="true" className={styles.icon} />
+                            <IconFacebook aria-hidden className={styles.icon} />
                             <span className={styles.linkText}>{facebook}</span>
                         </a>
                     )}
                     {twitter && (
                         <a href={`https://twitter.com/${twitter}`} className={styles.link}>
-                            <IconTwitter aria-hidden="true" className={styles.icon} />
+                            <IconTwitter aria-hidden className={styles.icon} />
                             <span className={styles.linkText}>{`@${twitter}`}</span>
                         </a>
                     )}
diff --git a/src/components/ContentRenderer/components/Attachment/DownloadLink.tsx b/src/components/ContentRenderer/components/Attachment/DownloadLink.tsx
@@ -16,7 +16,7 @@ export function DownloadLink({ className }: Props) {
     return (
         <div className={classNames(styles.link, className)}>
             <FormattedMessage locale={locale} for={translations.actions.download} />
-            <IconDownload width={16} height={16} className={styles.icon} />
+            <IconDownload aria-hidden width={16} height={16} className={styles.icon} />
         </div>
     );
 }
diff --git a/src/components/ContentRenderer/components/Attachment/FileTypeIcon.tsx b/src/components/ContentRenderer/components/Attachment/FileTypeIcon.tsx
@@ -75,5 +75,5 @@ function getIconComponentFromExtension(extension?: string) {
 
 export function FileTypeIcon({ extension, className }: Props) {
     const IconComponent = getIconComponentFromExtension(extension);
-    return <IconComponent className={className} />;
+    return <IconComponent aria-hidden className={className} />;
 }
diff --git a/src/components/ContentRenderer/components/NoConsentFallback.tsx b/src/components/ContentRenderer/components/NoConsentFallback.tsx
@@ -20,19 +20,21 @@ export function NoConsentFallback({ id, entity, oembed }: Props) {
 
     if (oembed.screenshot_url) {
         return (
-            <NextLink id={id} className={styles.imageFallback} href={oembed.url} target="__blank">
-                <img
-                    className={styles.image}
-                    src={oembed.screenshot_url}
-                    alt={oembed.title || oembed.description || ''}
-                />
+            <NextLink
+                aria-label={oembed.title || oembed.description || ''}
+                id={id}
+                className={styles.imageFallback}
+                href={oembed.url}
+                target="__blank"
+            >
+                <img alt="" className={styles.image} src={oembed.screenshot_url} />
             </NextLink>
         );
     }
 
     return (
         <div className={styles.container} id={id}>
-            <IconBan className={styles.icon} />
+            <IconBan aria-hidden className={styles.icon} />
             <div className={styles.title}>Content unavailable</div>
             <p className={styles.description}>
                 <span>
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -15,6 +15,7 @@ export function Dropdown({
     icon,
     label,
     className,
+    menuAs = 'ul',
     menuClassName,
     buttonClassName,
     buttonContentClassName,
@@ -39,6 +40,7 @@ export function Dropdown({
                             {label}
                             {!forceOpen && (
                                 <IconCaret
+                                    aria-hidden
                                     width={12}
                                     height={12}
                                     className={classNames(styles.caret, {
@@ -51,7 +53,7 @@ export function Dropdown({
                     {forceOpen && (
                         <MenuItems
                             static
-                            as="ul"
+                            as={menuAs}
                             className={classNames(styles.menu, menuClassName, {
                                 [styles.withMobileDisplay]: withMobileDisplay,
                             })}
@@ -70,7 +72,7 @@ export function Dropdown({
                             leaveTo={styles.transitionOpenStart}
                         >
                             <MenuItems
-                                as="ul"
+                                as={menuAs}
                                 className={classNames(styles.menu, menuClassName, {
                                     [styles.withMobileDisplay]: withMobileDisplay,
                                 })}
@@ -91,6 +93,7 @@ export namespace Dropdown {
         label: ReactNode;
         children?: ReactNode;
         className?: string;
+        menuAs?: 'div' | 'ul';
         menuClassName?: string;
         buttonClassName?: string;
         withMobileDisplay?: boolean;
diff --git a/src/components/ScrollToTopButton/ScrollToTopButton.tsx b/src/components/ScrollToTopButton/ScrollToTopButton.tsx
@@ -63,6 +63,7 @@ export function ScrollToTopButton({
             onClick={scrollToTop}
         >
             <IconComponent
+                aria-hidden
                 width={16}
                 height={16}
                 className={classNames(styles.icon, iconClassName)}
diff --git a/src/components/StoryCards/HighlightedStoryCard.module.scss b/src/components/StoryCards/HighlightedStoryCard.module.scss
@@ -31,7 +31,7 @@
 .overlay {
     position: absolute;
     inset: 0;
-    background: linear-gradient(270deg, rgb(3 7 18 / 0%) 50%, rgb(3 7 18 / 40%) 100%), linear-gradient(180deg, rgb(3 7 18 / 0%) 40%, rgb(3 7 18 / 20%) 62%, rgb(3 7 18 / 40%) 100%);
+    background: linear-gradient(270deg, rgb(3 7 18 / 0%) 50%, rgb(3 7 18 / 40%) 100%), linear-gradient(180deg, rgb(3 7 18 / 0%) 40%, rgb(3 7 18 / 20%) 62%, rgb(3 7 18 / 70%) 100%);
 }
 
 .image,
diff --git a/src/modules/Boilerplate/ui/Boilerplate.tsx b/src/modules/Boilerplate/ui/Boilerplate.tsx
@@ -68,13 +68,23 @@ export function Boilerplate({ localeCode, newsroom, companyInformation }: Props)
                             </h2>
                             {hasAddress && (
                                 <p className={styles.contact}>
-                                    <IconBuilding width={16} height={16} className={styles.icon} />
+                                    <IconBuilding
+                                        aria-hidden
+                                        width={16}
+                                        height={16}
+                                        className={styles.icon}
+                                    />
                                     {companyInformation.address}
                                 </p>
                             )}
                             {hasPhone && (
                                 <p className={styles.contact}>
-                                    <IconPhone width={16} height={16} className={styles.icon} />
+                                    <IconPhone
+                                        aria-hidden
+                                        width={16}
+                                        height={16}
+                                        className={styles.icon}
+                                    />
                                     <a
                                         className={styles.link}
                                         href={`tel:${companyInformation.phone}`}
@@ -85,7 +95,12 @@ export function Boilerplate({ localeCode, newsroom, companyInformation }: Props)
                             )}
                             {hasEmail && (
                                 <p className={styles.contact}>
-                                    <IconEmail width={16} height={16} className={styles.icon} />
+                                    <IconEmail
+                                        aria-hidden
+                                        width={16}
+                                        height={16}
+                                        className={styles.icon}
+                                    />
                                     <a
                                         className={styles.link}
                                         href={`mailto:${companyInformation.email}`}
@@ -96,7 +111,12 @@ export function Boilerplate({ localeCode, newsroom, companyInformation }: Props)
                             )}
                             {companyInformation.website && (
                                 <p className={styles.contact}>
-                                    <IconGlobe width={16} height={16} className={styles.icon} />
+                                    <IconGlobe
+                                        aria-hidden
+                                        width={16}
+                                        height={16}
+                                        className={styles.icon}
+                                    />
                                     <a
                                         href={companyInformation.website}
                                         className={styles.link}
diff --git a/src/modules/FeaturedCategories/ui/FeaturedCategory.tsx b/src/modules/FeaturedCategories/ui/FeaturedCategory.tsx
@@ -37,7 +37,7 @@ export function FeaturedCategory({
             <div className={styles.label}>
                 <div className={styles.categoryName}>
                     {name}
-                    <IconArrowRight className={styles.icon} />
+                    <IconArrowRight aria-hidden className={styles.icon} />
                 </div>
             </div>
         </Link>
diff --git a/src/modules/Gallery/DownloadLink.tsx b/src/modules/Gallery/DownloadLink.tsx
@@ -32,7 +32,7 @@ export function DownloadLink({ localeCode, href }: Props) {
             rel="nofollow"
         >
             <FormattedMessage locale={localeCode} for={translations.actions.download} />
-            <IconDownload width={16} height={16} className={styles.icon} />
+            <IconDownload aria-hidden width={16} height={16} className={styles.icon} />
         </ButtonLink>
     );
 }
diff --git a/src/modules/Header/ui/CategoriesNav/CategoriesNavMobile.tsx b/src/modules/Header/ui/CategoriesNav/CategoriesNavMobile.tsx
@@ -37,6 +37,7 @@ export function CategoriesNavMobile({
                     label={
                         <FormattedMessage locale={localeCode} for={translations.categories.title} />
                     }
+                    menuAs="div"
                     menuClassName={styles.dropdown}
                     buttonClassName={navigationItemButtonClassName}
                     withMobileDisplay
@@ -57,11 +58,11 @@ export function CategoriesNavMobile({
                         <hr className={styles.divider} />
                     )}
                     {regularCategories.length > 0 && (
-                        <div className={styles.regularContainer}>
+                        <ul className={styles.regularContainer}>
                             {regularCategories.map((category) => (
                                 <CategoryItem key={category.id} category={category} />
                             ))}
-                        </div>
+                        </ul>
                     )}
                 </Dropdown>
             </li>
diff --git a/src/modules/Header/ui/Header.tsx b/src/modules/Header/ui/Header.tsx
@@ -203,7 +203,6 @@ export function Header({
                                     icon={isSearchOpen && isMobile ? IconClose : IconSearch}
                                     onClick={toggleSearchWidget}
                                     aria-expanded={isSearchOpen}
-                                    aria-controls="search-widget"
                                     title={formatMessage(translations.search.title)}
                                     aria-label={formatMessage(translations.search.title)}
                                 />
diff --git a/src/modules/Header/ui/SearchWidget/SearchWidget.tsx b/src/modules/Header/ui/SearchWidget/SearchWidget.tsx
@@ -43,7 +43,6 @@ export function SearchWidget({
 
     return (
         <Modal
-            id="search-widget"
             isOpen={isOpen}
             onClose={onClose}
             className={classNames(styles.modal, className)}
diff --git a/src/modules/Story/Share/ButtonWithSuccessTooltip.tsx b/src/modules/Story/Share/ButtonWithSuccessTooltip.tsx
@@ -46,7 +46,7 @@ export function ButtonWithSuccessTooltip({
                 leaveTo={styles.transitionStart}
             >
                 <div className={styles.tooltip}>
-                    <IconCheck width={16} height={16} />
+                    <IconCheck aria-hidden width={16} height={16} />
                     {successMessage}
                 </div>
             </Transition>

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ export function DownloadLink({ className }: Props) {`
`16`	`16`	`return (`
`17`	`17`	`<div className={classNames(styles.link, className)}>`
`18`	`18`	`<FormattedMessage locale={locale} for={translations.actions.download} />`
`19`		`- <IconDownload width={16} height={16} className={styles.icon} />`
	`19`	`+ <IconDownload aria-hidden width={16} height={16} className={styles.icon} />`
`20`	`20`	`</div>`
`21`	`21`	`);`
`22`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -75,5 +75,5 @@ function getIconComponentFromExtension(extension?: string) {`
`75`	`75`
`76`	`76`	`export function FileTypeIcon({ extension, className }: Props) {`
`77`	`77`	`const IconComponent = getIconComponentFromExtension(extension);`
`78`		`- return <IconComponent className={className} />;`
	`78`	`+ return <IconComponent aria-hidden className={className} />;`
`79`	`79`	`}`
Original file line number	Diff line number	Diff line change
`@@ -63,6 +63,7 @@ export function ScrollToTopButton({`
`63`	`63`	`onClick={scrollToTop}`
`64`	`64`	`>`
`65`	`65`	`<IconComponent`
	`66`	`+ aria-hidden`
`66`	`67`	`width={16}`
`67`	`68`	`height={16}`
`68`	`69`	`className={classNames(styles.icon, iconClassName)}`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@`
`31`	`31`	`.overlay {`
`32`	`32`	`position: absolute;`
`33`	`33`	`inset: 0;`
`34`		`- background: linear-gradient(270deg, rgb(3 7 18 / 0%) 50%, rgb(3 7 18 / 40%) 100%), linear-gradient(180deg, rgb(3 7 18 / 0%) 40%, rgb(3 7 18 / 20%) 62%, rgb(3 7 18 / 40%) 100%);`
	`34`	`+ background: linear-gradient(270deg, rgb(3 7 18 / 0%) 50%, rgb(3 7 18 / 40%) 100%), linear-gradient(180deg, rgb(3 7 18 / 0%) 40%, rgb(3 7 18 / 20%) 62%, rgb(3 7 18 / 70%) 100%);`
`35`	`35`	`}`
`36`	`36`
`37`	`37`	`.image,`
Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ export function DownloadLink({ localeCode, href }: Props) {`
`32`	`32`	`rel="nofollow"`
`33`	`33`	`>`
`34`	`34`	`<FormattedMessage locale={localeCode} for={translations.actions.download} />`
`35`		`- <IconDownload width={16} height={16} className={styles.icon} />`
	`35`	`+ <IconDownload aria-hidden width={16} height={16} className={styles.icon} />`
`36`	`36`	`</ButtonLink>`
`37`	`37`	`);`
`38`	`38`	`}`