Improve a11y

victory-a · Apr 28, 2021 · 9d4f68c · 9d4f68c
1 parent 83e13bd
commit 9d4f68c
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 21 deletions.
diff --git a/src/components/CartButton/index.tsx b/src/components/CartButton/index.tsx
@@ -21,15 +21,10 @@ const CartButton = ({
 
   return (
     <Button
-      icon={
-        isInCart(id) ? (
-          <RemoveShoppingCart aria-label="Remove from cart" />
-        ) : (
-          <AddShoppingCart aria-label="Add to cart" />
-        )
-      }
+      icon={isInCart(id) ? <RemoveShoppingCart /> : <AddShoppingCart />}
       size={size}
       onClick={() => (isInCart(id) ? removeFromCart(id) : addToCart(id))}
+      aria-label={ButtonText}
     >
       {hasText && ButtonText}
     </Button>

diff --git a/src/components/Footer/__snapshots__/test.tsx.snap b/src/components/Footer/__snapshots__/test.tsx.snap
@@ -41,11 +41,11 @@ exports[`<Footer /> should render 4 column topics 1`] = `
 .c3 a,
 .c3 span {
   display: block;
-  color: #8F8F8F;
+  color: #5c5c5c;
   -webkit-text-decoration: none;
   text-decoration: none;
   margin-bottom: 0.8rem;
-  font-size: 1.4rem;
+  font-size: 1.6rem;
 }
 
 .c3 a {
@@ -180,6 +180,7 @@ exports[`<Footer /> should render 4 column topics 1`] = `
       </a>
     </div>
     <div
+      aria-labelledby="social-media"
       class="c3"
     >
       <h2
@@ -189,7 +190,7 @@ exports[`<Footer /> should render 4 column topics 1`] = `
         Follow us
       </h2>
       <nav
-        aria-labelledby="social media"
+        id="social-media"
       >
         <a
           href="https://www.instagram.com/won-games"
@@ -222,6 +223,7 @@ exports[`<Footer /> should render 4 column topics 1`] = `
       </nav>
     </div>
     <div
+      aria-labelledby="resources"
       class="c3"
     >
       <h2
@@ -231,7 +233,7 @@ exports[`<Footer /> should render 4 column topics 1`] = `
         Links
       </h2>
       <nav
-        aria-labelledby="footer resources"
+        id="resources"
       >
         <a
           href="/"
@@ -251,7 +253,7 @@ exports[`<Footer /> should render 4 column topics 1`] = `
       </nav>
     </div>
     <div
-      aria-labelledby="footer-contact"
+      aria-label="contact"
       class="c3"
     >
       <h2

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -18,12 +18,12 @@ const Footer = () => (
         <a href="mailto:sac@wongames.com">sac@wongames.com</a>
       </S.Column>
 
-      <S.Column>
+      <S.Column aria-labelledby="social-media">
         <Heading color="black" lineColor="secondary" lineBottom size="small">
           Follow us
         </Heading>
 
-        <nav aria-labelledby="social media">
+        <nav id="social-media">
           <a
             href="https://www.instagram.com/won-games"
             target="_blank"
@@ -55,12 +55,12 @@ const Footer = () => (
         </nav>
       </S.Column>
 
-      <S.Column>
+      <S.Column aria-labelledby="resources">
         <Heading color="black" lineColor="secondary" lineBottom size="small">
           Links
         </Heading>
 
-        <nav aria-labelledby="footer resources">
+        <nav id="resources">
           <Link href="/">
             <a>Home</a>
           </Link>
@@ -73,7 +73,7 @@ const Footer = () => (
         </nav>
       </S.Column>
 
-      <S.Column aria-labelledby="footer-contact">
+      <S.Column aria-label="contact">
         <Heading color="black" lineColor="secondary" lineBottom size="small">
           Location
         </Heading>

diff --git a/src/components/Footer/styles.ts b/src/components/Footer/styles.ts
@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components'
 import media from 'styled-media-query'
+import { darken } from 'polished'
 
 import * as HeadingStyles from 'components/Heading/styles'
 
@@ -27,10 +28,10 @@ export const Column = styled.div`
     a,
     span {
       display: block;
-      color: ${theme.colors.gray};
+      color: ${darken(0.2, theme.colors.gray)};
       text-decoration: none;
       margin-bottom: ${theme.spacings.xxsmall};
-      font-size: ${theme.font.sizes.small};
+      font-size: ${theme.font.sizes.medium};
     }
     a {
       word-wrap: break-word;

diff --git a/src/components/GameCard/__snapshots__/test.tsx.snap b/src/components/GameCard/__snapshots__/test.tsx.snap
@@ -270,11 +270,11 @@ exports[`<GameCard /> should render correctly 1`] = `
         $235.00
       </div>
       <button
+        aria-label="Add to cart"
         class="c11"
       >
         <svg
           aria-hidden="true"
-          aria-label="Add to cart"
           class="c8"
           fill="currentColor"
           focusable="false"

diff --git a/src/components/GameInfo/__snapshots__/test.tsx.snap b/src/components/GameInfo/__snapshots__/test.tsx.snap
@@ -258,11 +258,11 @@ exports[`<GameInfo /> should render game informations 1`] = `
     class="c5"
   >
     <button
+      aria-label="Add to cart"
       class="c6"
     >
       <svg
         aria-hidden="true"
-        aria-label="Add to cart"
         class="c7"
         fill="currentColor"
         focusable="false"