feat: better screen reader text (#790)

* feat: better screen reader text * fix: netlify build error fix * fix: moved aria-customer-logo inside customer logo container * chore: add comment to AriaCustomerLogo component * chore: ran prettier so test pass * fix: format fix --------- Co-authored-by: noa.santo <[email protected]> Co-authored-by: Georgios Kaleadis <[email protected]>
satellytes · Jan 29, 2024 · d940b46 · d940b46
1 parent d1ad0a1
commit d940b46
Showing 1 changed file with 34 additions and 3 deletions.
diff --git a/src/components/pages/landingpage/customers.tsx b/src/components/pages/landingpage/customers.tsx
@@ -66,19 +66,50 @@ const CustomerLogo = ({
   );
 };
 
+// This is a visually hidden list of customers for screen readers
+const AriaCustomerLogo = () => {
+  return (
+    <ul
+      style={{
+        position: 'absolute',
+        width: '1px',
+        height: '1px',
+        padding: '0',
+        margin: '-1px',
+        overflow: 'hidden',
+        clip: 'rect(0, 0, 0, 0)',
+        whiteSpace: 'nowrap',
+        border: '0',
+        listStyleType: 'none',
+      }}
+      aria-label={'Our Customers:'}
+    >
+      <li>Allianz</li>
+      <li>Rosenbauer</li>
+      <li>Media Markt</li>
+      <li>Saturn</li>
+      <li>Green City</li>
+      <li>FC Bayern</li>
+      <li>Zeiss</li>
+      <li>A.D.A.C</li>
+    </ul>
+  );
+};
+
 export const Customers = () => {
   return (
     <LogosContainer>
-      <LogoLine>
+      <AriaCustomerLogo />
+      <LogoLine aria-hidden={true}>
         <CustomerLogo desktopWidth={330} mobileWidth={127} show="allianz" />
         <CustomerLogo desktopWidth={451} mobileWidth={176} show="rosenbauer" />
       </LogoLine>
-      <LogoLine>
+      <LogoLine aria-hidden={true}>
         <CustomerLogo desktopWidth={403} mobileWidth={170} show="mediamarkt" />
         <CustomerLogo desktopWidth={285} mobileWidth={121} show="saturn" />
         <CustomerLogo desktopWidth={337} mobileWidth={156} show="greencity" />
       </LogoLine>
-      <LogoLine>
+      <LogoLine aria-hidden={true}>
         <CustomerLogo desktopWidth={112} mobileWidth={48} show="fcbayern" />
         <CustomerLogo desktopWidth={92} mobileWidth={39} show="zeiss" />
         <CustomerLogo desktopWidth={324} mobileWidth={138} show="adac" />