fix(storefront): BCTHEME-132 Visually hidden cart link read by screen…

… reader
bigcommerce · Aug 6, 2020 · a43f606 · a43f606
1 parent 353c9c8
commit a43f606
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Visually hidden cart link read by screen reader. [#1770](https://github.com/bigcommerce/cornerstone/pull/1770)
 
 ## 4.9.0 (08-05-2020)
 

diff --git a/assets/js/theme/global/cart-preview.js b/assets/js/theme/global/cart-preview.js
@@ -16,6 +16,11 @@ export default function (secureBaseUrl, cartId) {
     const $body = $('body');
 
     $body.on('cart-quantity-update', (event, quantity) => {
+        if (!quantity) {
+            $cart.addClass('navUser-item--cart__hidden-s');
+        } else {
+            $cart.removeClass('navUser-item--cart__hidden-s');
+        }
         $('.cart-quantity')
             .text(quantity)
             .toggleClass('countPill--positive', quantity > 0);

diff --git a/assets/scss/components/stencil/navUser/_navUser.scss b/assets/scss/components/stencil/navUser/_navUser.scss
@@ -162,6 +162,13 @@
 .navUser-item--cart {
     display: block;
 
+    // removing cart link for small screens when quantity is 0
+    &__hidden-s {
+        @media (max-width: $screen-small) {
+            display: none;
+        }
+    }
+
     .navUser-action {
         color: stencilColor("navUser-color");