feat: better screen reader text

satellytes · Dec 19, 2023 · bf40197 · bf40197
1 parent 7d27a00
commit bf40197
Showing 1 changed file with 56 additions and 16 deletions.
diff --git a/src/components/pages/landingpage/customers.tsx b/src/components/pages/landingpage/customers.tsx
@@ -66,23 +66,63 @@ const CustomerLogo = ({
   );
 };
 
+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>
-        <CustomerLogo desktopWidth={330} mobileWidth={127} show="allianz" />
-        <CustomerLogo desktopWidth={451} mobileWidth={176} show="rosenbauer" />
-      </LogoLine>
-      <LogoLine>
-        <CustomerLogo desktopWidth={403} mobileWidth={170} show="mediamarkt" />
-        <CustomerLogo desktopWidth={285} mobileWidth={121} show="saturn" />
-        <CustomerLogo desktopWidth={337} mobileWidth={156} show="greencity" />
-      </LogoLine>
-      <LogoLine>
-        <CustomerLogo desktopWidth={112} mobileWidth={48} show="fcbayern" />
-        <CustomerLogo desktopWidth={92} mobileWidth={39} show="zeiss" />
-        <CustomerLogo desktopWidth={324} mobileWidth={138} show="adac" />
-      </LogoLine>
-    </LogosContainer>
+    <>
+      <LogosContainer aria-hidden={true}>
+        <LogoLine>
+          <CustomerLogo desktopWidth={330} mobileWidth={127} show="allianz" />
+          <CustomerLogo
+            desktopWidth={451}
+            mobileWidth={176}
+            show="rosenbauer"
+          />
+        </LogoLine>
+        <LogoLine>
+          <CustomerLogo
+            desktopWidth={403}
+            mobileWidth={170}
+            show="mediamarkt"
+          />
+          <CustomerLogo desktopWidth={285} mobileWidth={121} show="saturn" />
+          <CustomerLogo desktopWidth={337} mobileWidth={156} show="greencity" />
+        </LogoLine>
+        <LogoLine>
+          <CustomerLogo desktopWidth={112} mobileWidth={48} show="fcbayern" />
+          <CustomerLogo desktopWidth={92} mobileWidth={39} show="zeiss" />
+          <CustomerLogo desktopWidth={324} mobileWidth={138} show="adac" />
+        </LogoLine>
+      </LogosContainer>
+      <AriaCustomerLogo />
+    </>
   );
 };