add an aria label for product quantity

Author: katiepeterso

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,8 +173,12 @@
                     -%}
                     {% # 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
                           >(
@@ -289,7 +293,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,8 +240,12 @@
                   -%}
                   {% # 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
                         >(
@@ -356,7 +360,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 +1681,7 @@
         {
           "type": "header",
           "content": "t:sections.main-product.blocks.icon_with_text.settings.pairing_2.label"
-        },        
+        },
         {
           "type": "select",
           "id": "icon_2",
@@ -1874,7 +1881,7 @@
         {
           "type": "header",
           "content": "t:sections.main-product.blocks.icon_with_text.settings.pairing_3.label"
-        },        
+        },
         {
           "type": "select",
           "id": "icon_3",
@@ -2176,7 +2183,7 @@
       ],
       "default": "hide",
       "label": "t:sections.main-product.settings.mobile_thumbnails.label"
-    },    
+    },
     {
       "type": "select",
       "id": "media_position",