add an aria label for product quantity

Author: Katie Peterson

locales/en.default.json

@@ -140,6 +140,7 @@
         "min_of": "Min {{ quantity }}",
         "max_of": "Max {{ quantity }}",
         "in_cart_html": "<span class=\"quantity-cart\">{{ quantity }}</span> in cart",
+        "in_cart_aria_label": "Quantity ({{ quantity }} in cart)",
         "note": "View quantity rules"
       },
       "volume_pricing": {
@@ -526,4 +527,4 @@
       "send_on_label": "Send on (optional)"
     }
   }
-}
+}

sections/featured-product.liquid

@@ -173,14 +173,14 @@
                     -%}
                     {% # theme-check-enable %}
                     <label class="quantity__label form__label" for="Quantity-{{ section.id }}">
-                      {{ 'products.product.quantity.label' | t }}
-                      <span class="quantity__rules-cart{% if cart_qty == 0 %} hidden{% endif %}">
+                      {% if cart_qty > 0 %}
+                        {{ 'products.product.quantity.in_cart_aria_label' | t: quantity: cart_qty }}
+                      {% else %}
+                        {{ 'products.product.quantity.label' | t }}
+                      {% endif %}
+                      <span class="quantity__rules-cart hidden" aria-hidden="true">
                         {%- render 'loading-spinner' -%}
-                        <span
-                          >(
-                          {{- 'products.product.quantity.in_cart_html' | t: quantity: cart_qty -}}
-                          )</span
-                        >
+                        <span> ({{ cart_qty }} in cart)</span>
                       </span>
                     </label>
                     <div class="price-per-item__container">
@@ -198,6 +198,7 @@
                           type="number"
                           name="quantity"
                           id="Quantity-{{ section.id }}"
+                          aria-label="{% if cart_qty > 0 %}{{ 'products.product.quantity.in_cart_aria_label' | t: quantity: cart_qty }}{% else %}{{ 'products.product.quantity.label' | t }}{% endif %}"
                           data-cart-quantity="{{ cart_qty }}"
                           data-min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
                           min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
@@ -289,7 +290,10 @@
                                   </dt>
                                   <dd>
                                     <span class="price-per-item--current">
-                                      {{- 'products.product.volume_pricing.price_at_each_html' | t: price: variant_price -}}
+                                      {{-
+                                        'products.product.volume_pricing.price_at_each_html'
+                                        | t: price: variant_price
+                                      -}}
                                     </span>
                                   </dd>
                                 </dl>

sections/main-product.liquid

@@ -240,14 +240,14 @@
                   -%}
                   {% # theme-check-enable %}
                   <label class="quantity__label form__label" for="Quantity-{{ section.id }}">
-                    {{ 'products.product.quantity.label' | t }}
-                    <span class="quantity__rules-cart{% if cart_qty == 0 %} hidden{% endif %}">
+                    {% if cart_qty > 0 %}
+                      {{ 'products.product.quantity.in_cart_aria_label' | t: quantity: cart_qty }}
+                    {% else %}
+                      {{ 'products.product.quantity.label' | t }}
+                    {% endif %}
+                    <span class="quantity__rules-cart hidden" aria-hidden="true">
                       {%- render 'loading-spinner' -%}
-                      <span
-                        >(
-                        {{- 'products.product.quantity.in_cart_html' | t: quantity: cart_qty -}}
-                        )</span
-                      >
+                      <span> ({{ cart_qty }} in cart)</span>
                     </span>
                   </label>
                   <div class="price-per-item__container">
@@ -356,7 +356,10 @@
                                 </dt>
                                 <dd>
                                   <span class="price-per-item--current">
-                                    {{- 'products.product.volume_pricing.price_at_each_html' | t: price: variant_price -}}
+                                    {{-
+                                      'products.product.volume_pricing.price_at_each_html'
+                                      | t: price: variant_price
+                                    -}}
                                   </span>
                                 </dd>
                               </dl>
@@ -1674,7 +1677,7 @@
         {
           "type": "header",
           "content": "t:sections.main-product.blocks.icon_with_text.settings.pairing_2.label"
-        },        
+        },
         {
           "type": "select",
           "id": "icon_2",
@@ -1874,7 +1877,7 @@
         {
           "type": "header",
           "content": "t:sections.main-product.blocks.icon_with_text.settings.pairing_3.label"
-        },        
+        },
         {
           "type": "select",
           "id": "icon_3",
@@ -2176,7 +2179,7 @@
       ],
       "default": "hide",
       "label": "t:sections.main-product.settings.mobile_thumbnails.label"
-    },    
+    },
     {
       "type": "select",
       "id": "media_position",
@@ -2252,3 +2255,4 @@
   ]
 }
 {% endschema %}
+