diff --git a/CHANGELOG.md b/CHANGELOG.md index 67eb56db7b..8d43b9b7d5 100644 --- 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 index 2a7bee8a5f..894962d291 100644 --- 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 index 304e17d4da..e37d42f658 100755 --- 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 index 2712e3eaa7..d1122b67f4 100644 --- a/templates/components/category/shop-by-price.html +++ b/templates/components/category/shop-by-price.html @@ -1,6 +1,6 @@ {{#and theme_settings.shop_by_price_visibility shop_by_price}}
-

{{lang 'category.shop_by_price'}}

+

{{lang 'category.shop_by_price'}}