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

bigcommerce · Jan 21, 2021 · 2a3269e · 2a3269e
1 parent fdf0cff
commit 2a3269e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git 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)
 - Updated Cornerstone theme and respected variants to meet the verticals/industries documented in BCTHEME-387
 - Fixed selecting certain option types which pushes window view to the bottom of the page. [#1959](https://github.com/bigcommerce/cornerstone/pull/1959)
 - Fixed case when default option is out of stock add to cart button does not populate for in stock options. [#1955](https://github.com/bigcommerce/cornerstone/pull/1955)

diff --git a/assets/js/theme/category.js b/assets/js/theme/category.js
@@ -8,16 +8,33 @@ export default class Category extends CatalogPage {
     constructor(context) {
         super(context);
         this.validationDictionary = createTranslationDictionary(context);
+        this.isSortBySelected = window.localStorage.getItem('sortByStatus');
+    }
+
+    keepActiveElementOnStorage($element) {
+        $element.on('change', () => window.localStorage.setItem('sortByStatus', 'selected'));
+    }
+
+    arrangeFocusOnElement($element) {
+        if (this.isSortBySelected) {
+            $element.focus();
+            window.localStorage.removeItem('sortByStatus');
+        }
     }
 
     onReady() {
+        const sortBySelector = $('[data-sort-by="product"] #sort');
+
         $('[data-button-type="add-cart"]').on('click', (e) => {
             $(e.currentTarget).next().attr({
                 role: 'status',
                 'aria-live': 'polite',
             });
         });
 
+        this.keepActiveElementOnStorage(sortBySelector);
+        this.arrangeFocusOnElement(sortBySelector);
+
         compareProducts(this.context.urls);
 
         if ($('#facetedSearch').length > 0) {