feat(storefront): BCTHEME-391 Move focus on filter items Modal after …

…show more button was clicked and accessibility refactoring (#1977)
bigcommerce · Feb 5, 2021 · 462a286 · 462a286
1 parent e12f95d
commit 462a286
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
 - 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)
 - Integrate accessibility scripts to product images slider on PDP. [#1965](https://github.com/bigcommerce/cornerstone/pull/1965)
+- Move focus on filter items Modal after show more button was clicked and accessibility refactoring. [#1977](https://github.com/bigcommerce/cornerstone/pull/1977)
 
 ## 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/common/faceted-search.js b/assets/js/theme/common/faceted-search.js
@@ -2,11 +2,14 @@ import { hooks, api } from '@bigcommerce/stencil-utils';
 import _ from 'lodash';
 import Url from 'url';
 import urlUtils from './utils/url-utils';
-import modalFactory from '../global/modal';
+import modalFactory, { modalTypes, ModalEvents } from '../global/modal';
 import collapsibleFactory from './collapsible';
 import { Validators } from './utils/form-utils';
 import nod from './nod';
 
+const { SHOW_MORE_OPTIONS } = modalTypes;
+const { opened } = ModalEvents;
+
 const defaultOptions = {
     accordionToggleSelector: '#facetedSearch .accordion-navigation, #facetedSearch .facetedSearch-toggle',
     blockerSelector: '#facetedSearch .blocker',
@@ -56,6 +59,15 @@ class FacetedSearch {
         this.collapsedFacets = [];
         this.collapsedFacetItems = [];
 
+        if (this.options.modal) {
+            this.options.modal.$modal.on(opened, event => {
+                const $filterItems = $(event.target).find('#facetedSearch-filterItems');
+                if ($filterItems.length) {
+                    this.options.modal.setupFocusableElements(SHOW_MORE_OPTIONS);
+                }
+            });
+        }
+
         // Init collapsibles
         collapsibleFactory();
 

diff --git a/assets/js/theme/global/modal.js b/assets/js/theme/global/modal.js
@@ -22,24 +22,26 @@ export const modalTypes = {
     PRODUCT_DETAILS: 'forProductDetails',
     CART_CHANGE_PRODUCT: 'forCartChangeProduct',
     WRITE_REVIEW: 'forWriteReview',
+    SHOW_MORE_OPTIONS: 'forShowMore',
 };
 
+const findRootModalTabbableElements = () => (
+    $('#modal.open')
+        .find(allTabbableElementsSelector)
+        .not('#modal-review-form *')
+        .not('#previewModal *')
+);
+
 const focusableElements = {
-    [modalTypes.QUICK_VIEW]: () => (
-        $('#modal')
-            .find(allTabbableElementsSelector)
-            .not('#modal-review-form *')
-            .not('#previewModal *')
-    ),
+    [modalTypes.QUICK_VIEW]: findRootModalTabbableElements,
     [modalTypes.PRODUCT_DETAILS]: () => (
-        $('#previewModal').find(allTabbableElementsSelector)
-    ),
-    [modalTypes.CART_CHANGE_PRODUCT]: () => (
-        $('#modal').find(allTabbableElementsSelector)
+        $('#previewModal.open').find(allTabbableElementsSelector)
     ),
+    [modalTypes.CART_CHANGE_PRODUCT]: findRootModalTabbableElements,
     [modalTypes.WRITE_REVIEW]: () => (
-        $('#modal-review-form').find(allTabbableElementsSelector)
+        $('#modal-review-form.open').find(allTabbableElementsSelector)
     ),
+    [modalTypes.SHOW_MORE_OPTIONS]: findRootModalTabbableElements,
 };
 
 export const ModalEvents = {
@@ -78,7 +80,12 @@ function wrapModalBody(content) {
 }
 
 function restrainContentHeight($content) {
+    if ($content.length === 0) return;
+
     const $body = $(`.${modalBodyClass}`, $content);
+
+    if ($body.length === 0) return;
+
     const bodyHeight = $body.outerHeight();
     const contentHeight = $content.outerHeight();
     const viewportHeight = getViewportHeight(0.9);
@@ -181,13 +188,6 @@ export class Modal {
         this.$modal.on(ModalEvents.opened, this.onModalOpened);
     }
 
-    unbindEvents() {
-        this.$modal.off(ModalEvents.close, this.onModalClose);
-        this.$modal.off(ModalEvents.closed, this.onModalClosed);
-        this.$modal.off(ModalEvents.open, this.onModalOpen);
-        this.$modal.off(ModalEvents.opened, this.onModalOpened);
-    }
-
     open({
         size,
         pending = true,
@@ -265,7 +265,7 @@ export class Modal {
             } else if ($element.is($lastTabbable)) {
                 $element.addClass(lastTabbableClass).removeClass(firstTabbableClass);
             } else {
-                $element.removeClass(firstTabbableClass, lastTabbableClass);
+                $element.removeClass(firstTabbableClass).removeClass(lastTabbableClass);
             }
         });
 
@@ -276,13 +276,13 @@ export class Modal {
         if (direction === 'forwards') {
             const isLastActive = $activeElement.hasClass(lastTabbableClass);
             if (isLastActive) {
-                $modalTabbableCollection.get(0).focus();
+                $firstTabbable.focus();
                 event.preventDefault();
             }
         } else if (direction === 'backwards') {
             const isFirstActive = $activeElement.hasClass(firstTabbableClass);
             if (isFirstActive) {
-                $modalTabbableCollection.get(lastCollectionIdx).focus();
+                $lastTabbable.focus();
                 event.preventDefault();
             }
         }
@@ -295,8 +295,8 @@ export class Modal {
     onModalClosed() {
         this.size = this.defaultSize;
         if (this.$preModalFocusedEl) this.$preModalFocusedEl.focus();
+        this.$preModalFocusedEl = null;
         this.$modal.off('keydown');
-        this.unbindEvents();
     }
 
     onModalOpen() {

diff --git a/templates/components/carousel.html b/templates/components/carousel.html
@@ -67,7 +67,7 @@
         <button
             type="button"
             class="heroCarousel-play-pause-button js-hero-play-pause-button"
-            aria-label="{{lang 'carousel.playPauseButton.ariaPause'}}"
+            aria-label="{{lang 'carousel.playPauseButtonAriaPause'}}"
             data-play="true"
             data-labels='{
                 "play": "{{lang 'carousel.playPauseButtonPlay'}}",