From 144ff2affbb789cc297042ba9ee2ce998a73ec09 Mon Sep 17 00:00:00 2001
From: tyleralsbury <60230011+tyleralsbury@users.noreply.github.com>
Date: Thu, 8 Jul 2021 09:47:06 -0400
Subject: [PATCH] Filtering accessibility fixes (#141)

---
 sections/main-collection-product-grid.liquid | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid
index c1e51bb762a..05f162beda1 100644
--- a/sections/main-collection-product-grid.liquid
+++ b/sections/main-collection-product-grid.liquid
@@ -95,7 +95,7 @@
                         <span class="field__currency">{{ cart.currency.symbol }}</span>
                         <input class="field__input"
                           name="{{ filter.min_value.param_name }}"
-                          id="Filter-{{ filter.label | escape }}-{{ forloop.index }}"
+                          id="Filter-{{ filter.label | escape }}-GTE"
                           {%- if filter.min_value.value -%}
                             {%- if uses_comma_decimals -%}
                               value="{{ filter.min_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
@@ -108,13 +108,13 @@
                           min="0"
                           max="{{ filter.range_max | money_without_currency | replace: ',', '' }}">
                         </input>
-                        <label class="field__label" for="Search-In-Modal">{{ 'sections.collection_template.from' | t }}</label>
+                        <label class="field__label" for="Filter-{{ filter.label | escape }}-GTE">{{ 'sections.collection_template.from' | t }}</label>
                       </div>
                       <div class="field">
                         <span class="field__currency">{{ cart.currency.symbol }}</span>
                         <input class="field__input"
                           name="{{ filter.max_value.param_name }}"
-                          id="Filter-{{ filter.label | escape }}-{{ forloop.index }}"
+                          id="Filter-{{ filter.label | escape }}-LTE"
                           {%- if filter.max_value.value -%}
                             {%- if uses_comma_decimals -%}
                               value="{{ filter.max_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
@@ -127,7 +127,7 @@
                           min="0"
                           max="{{ filter.range_max | money_without_currency | replace: ',', '' }}">
                         </input>
-                        <label class="field__label" for="Search-In-Modal">{{ 'sections.collection_template.to' | t }}</label>
+                        <label class="field__label" for="Filter-{{ filter.label | escape }}-LTE">{{ 'sections.collection_template.to' | t }}</label>
                       </div>
                     </div>
                   </price-range>
@@ -292,7 +292,7 @@
                             <span class="field__currency">{{ cart.currency.symbol }}</span>
                             <input class="field__input"
                               name="{{ filter.min_value.param_name }}"
-                              id="Filter-{{ filter.label | escape }}-{{ forloop.index }}"
+                              id="Mobile-Filter-{{ filter.label | escape }}-GTE"
                               {%- if filter.min_value.value -%}
                                 {%- if uses_comma_decimals -%}
                                   value="{{ filter.min_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
@@ -305,13 +305,13 @@
                               min="0"
                               max="{{ filter.range_max | divided_by: 100 | ceil }}">
                             </input>
-                            <label class="field__label" for="Search-In-Modal">{{ 'sections.collection_template.from' | t }}</label>
+                            <label class="field__label" for="Mobile-Filter-{{ filter.label | escape }}-GTE">{{ 'sections.collection_template.from' | t }}</label>
                           </div>
                           <div class="field">
                             <span class="field__currency">{{ cart.currency.symbol }}</span>
                             <input class="field__input"
                               name="{{ filter.max_value.param_name }}"
-                              id="Filter-{{ filter.label | escape }}-{{ forloop.index }}"
+                              id="Mobile-Filter-{{ filter.label | escape }}-LTE"
                               {%- if filter.max_value.value -%}
                                 {%- if uses_comma_decimals -%}
                                   value="{{ filter.max_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
@@ -324,7 +324,7 @@
                               min="0"
                               max="{{ filter.range_max | divided_by: 100 | ceil }}">
                             </input>
-                            <label class="field__label" for="Search-In-Modal">{{ 'sections.collection_template.to' | t }}</label>
+                            <label class="field__label" for="Mobile-Filter-{{ filter.label | escape }}-LTE">{{ 'sections.collection_template.to' | t }}</label>
                           </div>
                         </price-range>
                       </div>
@@ -411,7 +411,7 @@
           </div>
         </div>
 
-        <p class="collection-product-count light">
+        <p class="collection-product-count light" role="status">
           {{ 'sections.collection_template.product_count' | t: product_count: collection.products_count, count: collection.all_products_count }}
         </p>
 
@@ -432,7 +432,7 @@
           </div>
         </div>
 
-        <p class="collection-product-count light">
+        <p class="collection-product-count light" role="status">
           {{ 'sections.collection_template.product_count' | t: product_count: collection.products_count, count: collection.all_products_count }}
         </p>