fix(storefront): BCTHEME-368 fix announcement for shop by price filte…

…r selection (bigcommerce#1966)
sacr3dc0w · Mar 31, 2021 · efb2147 · efb2147
1 parent 1f7dcd1
commit efb2147
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed filtered selection not announced by screen reader. [#1966](https://github.com/bigcommerce/cornerstone/pull/1966)
 
 ## 5.1.0 (01-26-2021)
 - Updated Cornerstone theme and respected variants to meet the verticals/industries documented in BCTHEME-387

diff --git a/assets/js/theme/category.js b/assets/js/theme/category.js
@@ -10,13 +10,27 @@ export default class Category extends CatalogPage {
         this.validationDictionary = createTranslationDictionary(context);
     }
 
-    onReady() {
-        $('[data-button-type="add-cart"]').on('click', (e) => {
-            $(e.currentTarget).next().attr({
-                role: 'status',
-                'aria-live': 'polite',
-            });
+    setLiveRegionAttributes($element, roleType, ariaLiveStatus) {
+        $element.attr({
+            role: roleType,
+            'aria-live': ariaLiveStatus,
         });
+    }
+
+    makeShopByPriceFilterAccessible() {
+        if (!$('[data-shop-by-price]').length) return;
+
+        if ($('.navList-action').hasClass('is-active')) {
+            $('a.navList-action.is-active').focus();
+        }
+
+        $('a.navList-action').on('click', () => this.setLiveRegionAttributes($('span.price-filter-message'), 'status', 'assertive'));
+    }
+
+    onReady() {
+        $('[data-button-type="add-cart"]').on('click', (e) => this.setLiveRegionAttributes($(e.currentTarget).next(), 'status', 'polite'));
+
+        this.makeShopByPriceFilterAccessible();
 
         compareProducts(this.context.urls);
 
@@ -27,12 +41,7 @@ export default class Category extends CatalogPage {
             hooks.on('sortBy-submitted', this.onSortBySubmit);
         }
 
-        $('a.reset-btn').on('click', () => {
-            $('span.reset-message').attr({
-                role: 'status',
-                'aria-live': 'polite',
-            });
-        });
+        $('a.reset-btn').on('click', () => this.setLiveRegionsAttributes($('span.reset-message'), 'status', 'polite'));
 
         this.ariaNotifyNoProducts();
     }

diff --git a/lang/en.json b/lang/en.json
@@ -220,9 +220,11 @@
         "label": "Categories",
         "shop_by_price": "Shop By Price",
         "shop_by_price_range_aria": "Price range from {from} to {to}",
+        "filter_price_range": "Price range:",
         "add_cart_announcement": "The item has been added",
         "reset": "Reset",
         "filter_reset_announcement": "The filter has been reset",
+        "filter_select_announcement": "The filter has been applied",
         "view_all": {
             "name": "All {category}"
         }

diff --git a/templates/components/category/shop-by-price.html b/templates/components/category/shop-by-price.html
@@ -1,23 +1,22 @@
 {{#and theme_settings.shop_by_price_visibility shop_by_price}}
     <div class="sidebarBlock">
-        <h2 class="sidebarBlock-heading">{{lang 'category.shop_by_price'}}</h2>
+        <h2 class="sidebarBlock-heading" data-shop-by-price>{{lang 'category.shop_by_price'}}</h2>
         <ul class="navList">
             {{#each shop_by_price}}
             <li class="navList-item">
                 <a 
                     {{#if selected }} 
                         class="navList-action is-active"
                         role="status"
-                        aria-live="polite"
+                        aria-live="assertive"
                    {{else}}
                         class="navList-action"
                    {{/if}}
                    href="{{url}}"
-                   title="{{low.formatted}} - {{high.formatted}}"
-                   aria-label="{{{lang 'category.shop_by_price_range_aria' from=low.formatted to=high.formatted}}}"
                 >
-                    {{low.formatted}} - {{high.formatted}}
+                   {{lang 'category.filter_price_range'}} {{low.formatted}} - {{high.formatted}}
                 </a>
+                <span class="price-filter-message aria-description--hidden">{{lang 'category.filter_select_announcement'}}</span>
             </li>
             {{/each}}