diff --git a/assets/js/theme/global/cart-preview.js b/assets/js/theme/global/cart-preview.js index 32d1c9ce91..167a5a7775 100644 --- a/assets/js/theme/global/cart-preview.js +++ b/assets/js/theme/global/cart-preview.js @@ -16,11 +16,14 @@ export default function (secureBaseUrl, cartId) { const $body = $('body'); $body.on('cart-quantity-update', (event, quantity) => { + $cart.attr('aria-label', (_, prevValue) => prevValue.replace(/\d+/, 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/lang/en.json b/lang/en.json index 12d7cf6264..3368f6edad 100755 --- a/lang/en.json +++ b/lang/en.json @@ -36,6 +36,7 @@ "title": "Checkout" }, "cart": { + "nav_aria_label": "Cart with 0 items", "continue_shopping": "Click here to continue shopping", "items": "{NUM, plural, =0{(0 items)} one {(# item)} other {(# items)}}", "checkout": { diff --git a/templates/components/common/navigation.html b/templates/components/common/navigation.html index 8a721e13ea..d82aec049b 100644 --- a/templates/components/common/navigation.html +++ b/templates/components/common/navigation.html @@ -92,7 +92,7 @@ data-dropdown="cart-preview-dropdown" data-options="align:right" href="{{urls.cart}}" - aria-label="{{lang 'common.cart'}}" + aria-label="{{lang 'cart.nav_aria_label'}}" > {{lang 'common.cart'}}