diff --git a/CHANGELOG.md b/CHANGELOG.md index 8d43b9b7d5..fe5c5881ba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # Changelog ## Draft +- Fixed focus for sort by dropdown on reloading page. [#1964](https://github.com/bigcommerce/cornerstone/pull/1964) - Fixed filtered selection not announced by screen reader. [#1966](https://github.com/bigcommerce/cornerstone/pull/1966) ## 5.1.0 (01-26-2021) diff --git a/assets/js/theme/catalog.js b/assets/js/theme/catalog.js index be42a30d5e..8286054cbf 100644 --- a/assets/js/theme/catalog.js +++ b/assets/js/theme/catalog.js @@ -3,6 +3,25 @@ import urlUtils from './common/utils/url-utils'; import Url from 'url'; export default class CatalogPage extends PageManager { + constructor(context) { + super(context); + + window.addEventListener('beforeunload', () => { + if (document.activeElement.id === 'sort') { + window.localStorage.setItem('sortByStatus', 'selected'); + } + }); + } + + arrangeFocusOnSortBy() { + const $sortBySelector = $('[data-sort-by="product"] #sort'); + + if (window.localStorage.getItem('sortByStatus')) { + $sortBySelector.focus(); + window.localStorage.removeItem('sortByStatus'); + } + } + onSortBySubmit(event, currentTarget) { const url = Url.parse(window.location.href, true); const queryParams = $(currentTarget).serialize().split('='); diff --git a/assets/js/theme/category.js b/assets/js/theme/category.js index 894962d291..c55104e9c7 100644 --- a/assets/js/theme/category.js +++ b/assets/js/theme/category.js @@ -28,6 +28,8 @@ export default class Category extends CatalogPage { } onReady() { + this.arrangeFocusOnSortBy(); + $('[data-button-type="add-cart"]').on('click', (e) => this.setLiveRegionAttributes($(e.currentTarget).next(), 'status', 'polite')); this.makeShopByPriceFilterAccessible(); diff --git a/assets/js/theme/search.js b/assets/js/theme/search.js index e4b16ca1a5..ca83c064e9 100644 --- a/assets/js/theme/search.js +++ b/assets/js/theme/search.js @@ -134,6 +134,7 @@ export default class Search extends CatalogPage { onReady() { compareProducts(this.context.urls); + this.arrangeFocusOnSortBy(); const $searchForm = $('[data-advanced-search-form]'); const $categoryTreeContainer = $searchForm.find('[data-search-category-tree]');