fix: improve cart button accessibility (#220)

* fix: add button label to shopping cart icon * fix: reorder components to announce shopping cart earlier
gatsbyjs · Jan 11, 2019 · 622c96b · 622c96b
1 parent 3e1ff1d
commit 622c96b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/src/components/Cart/Cart.js b/src/components/Cart/Cart.js
@@ -349,7 +349,10 @@ class Cart extends Component {
               }`}
             >
               <Heading>
-                <CartToggle onClick={toggle}>
+                <CartToggle
+                  aria-label={`Shopping cart with ${itemsInCart} items`}
+                  onClick={toggle}
+                >
                   {status === 'open' ? (
                     <MdClose />
                   ) : (

diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
@@ -403,6 +403,14 @@ export default class Layout extends React.Component {
                       productImagesBrowserStatus={productImagesBrowserStatus}
                     />
                     <Viewport>
+                      <Cart
+                        isDesktopViewport={isDesktopViewport}
+                        status={cartStatus}
+                        toggle={toggleCart}
+                        contributorAreaStatus={contributorAreaStatus}
+                        productImagesBrowserStatus={productImagesBrowserStatus}
+                      />
+
                       <ContributorArea
                         location={location}
                         status={contributorAreaStatus}
@@ -431,14 +439,6 @@ export default class Layout extends React.Component {
                           isDesktopViewport={isDesktopViewport}
                         />
                       )}
-
-                      <Cart
-                        isDesktopViewport={isDesktopViewport}
-                        status={cartStatus}
-                        toggle={toggleCart}
-                        contributorAreaStatus={contributorAreaStatus}
-                        productImagesBrowserStatus={productImagesBrowserStatus}
-                      />
                     </Viewport>
                   </>
                 )}