fix(storefront): BCTHEME-207 fix focus on sort by (bigcommerce#1964)

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)

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('=');

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();

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]');