feat(storefront): BCTHEME-476 Scale focus trap for all modals

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Scale focus trap for all modals. [#2049](https://github.com/bigcommerce/cornerstone/pull/2049)
 - Fixed displaying swatch name for multiple swatch options on page. [#2040](https://github.com/bigcommerce/cornerstone/pull/2040)
 - Added settings for payment banners. [#2021](https://github.com/bigcommerce/cornerstone/pull/2021)
 - Use https:// for schema markup. [#2039](https://github.com/bigcommerce/cornerstone/pull/2039)

assets/js/test-unit/theme/global/modal.spec.js

@@ -16,6 +16,9 @@ describe('Modal', () => {
     beforeEach(() => {
         $element = attachHtml(`
             <div id="modal" class="modal" data-reveal>
+                <button class="modal-close" type="button">
+                    <span aria-hidden="true">&#215;</span>
+                </button>
                 <div class="modal-content"></div>
                 <div class="loadingOverlay"></div>
             </div>

assets/js/theme/cart.js

@@ -164,8 +164,6 @@ export default class Cart extends PageManager {
             this.productDetails = new CartItemDetails(this.$modal, context);
 
             this.bindGiftWrappingForm();
-
-            modal.setupFocusTrap();
         });
 
         utils.hooks.on('product-option-change', (event, currentTarget) => {

assets/js/theme/common/faceted-search.js

@@ -2,7 +2,7 @@ import { hooks, api } from '@bigcommerce/stencil-utils';
 import _ from 'lodash';
 import Url from 'url';
 import urlUtils from './utils/url-utils';
-import modalFactory, { ModalEvents } from '../global/modal';
+import modalFactory from '../global/modal';
 import collapsibleFactory from './collapsible';
 import { Validators } from './utils/form-utils';
 import nod from './nod';
@@ -57,15 +57,6 @@ class FacetedSearch {
         this.collapsedFacets = [];
         this.collapsedFacetItems = [];
 
-        if (this.options.modal) {
-            this.options.modal.$modal.on(ModalEvents.opened, event => {
-                const $filterItems = $(event.target).find('#facetedSearch-filterItems');
-                if ($filterItems.length) {
-                    this.options.modal.setupFocusTrap();
-                }
-            });
-        }
-
         // Init collapsibles
         collapsibleFactory();
 

assets/js/theme/common/product-details.js

@@ -3,7 +3,7 @@ import ProductDetailsBase, { optionChangeDecorator } from './product-details-bas
 import 'foundation-sites/js/foundation/foundation';
 import 'foundation-sites/js/foundation/foundation.reveal';
 import ImageGallery from '../product/image-gallery';
-import modalFactory, { showAlertModal } from '../global/modal';
+import modalFactory, { alertModal, showAlertModal } from '../global/modal';
 import { isEmpty, isPlainObject } from 'lodash';
 import { normalizeFormData } from './utils/api';
 import { isBrowserIE, convertIntoArray } from './utils/ie-helpers';
@@ -230,6 +230,11 @@ export default class ProductDetails extends ProductDetailsBase {
             this.updateProductAttributes(productAttributesData);
             this.updateView(productAttributesData, productAttributesContent);
             bannerUtils.dispatchProductBannerEvent(productAttributesData);
+
+            if (!this.checkIsQuickViewChild($form)) {
+                const $context = $form.parents('.productView').find('.productView-info');
+                modalFactory('[data-reveal]', { $context });
+            }
         });
     }
 
@@ -254,6 +259,10 @@ export default class ProductDetails extends ProductDetailsBase {
         });
     }
 
+    checkIsQuickViewChild($element) {
+        return !!$element.parents('.quickView').length;
+    }
+
     showProductImage(image) {
         if (isPlainObject(image)) {
             const zoomImageUrl = utils.tools.imageSrcset.getSrcset(
@@ -390,6 +399,10 @@ export default class ProductDetails extends ProductDetailsBase {
                 const tmp = document.createElement('DIV');
                 tmp.innerHTML = errorMessage;
 
+                if (!this.checkIsQuickViewChild($addToCartBtn)) {
+                    alertModal().$preModalFocusedEl = $addToCartBtn;
+                }
+
                 return showAlertModal(tmp.textContent || tmp.innerText);
             }
 
@@ -401,8 +414,11 @@ export default class ProductDetails extends ProductDetailsBase {
                     this.previewModal.$modal.addClass('apple-pay-supported');
                 }
 
-                if ($addToCartBtn.parents('.quickView').length === 0) this.previewModal.$preModalFocusedEl = $addToCartBtn;
-                this.updateCartContent(this.previewModal, response.data.cart_item.id, () => this.previewModal.setupFocusTrap());
+                if (!this.checkIsQuickViewChild($addToCartBtn)) {
+                    this.previewModal.$preModalFocusedEl = $addToCartBtn;
+                }
+
+                this.updateCartContent(this.previewModal, response.data.cart_item.id);
             } else {
                 this.$overlay.show();
                 // if no modal, redirect to the cart page

assets/js/theme/global/modal.js

@@ -17,6 +17,7 @@ export const ModalEvents = {
     closed: 'closed.fndtn.reveal',
     open: 'open.fndtn.reveal',
     opened: 'opened.fndtn.reveal',
+    loaded: 'loaded.data.custom',
 };
 
 function getSizeFromModal($modal) {
@@ -188,6 +189,7 @@ export class Modal {
 
         this.pending = false;
         this.$content.html($content);
+        this.$modal.trigger(ModalEvents.loaded);
 
         restrainContentHeight(this.$content);
         foundation(this.$content);
@@ -204,6 +206,14 @@ export class Modal {
             this.focusTrap = focusTrap.createFocusTrap(this.$modal[0], {
                 escapeDeactivates: false,
                 returnFocusOnDeactivate: false,
+                allowOutsideClick: true,
+                fallbackFocus: () => {
+                    const fallbackNode = this.$preModalFocusedEl && this.$preModalFocusedEl.length
+                        ? this.$preModalFocusedEl[0]
+                        : $('[data-header-logo-link]')[0];
+
+                    return fallbackNode;
+                },
             });
         }
 
@@ -230,6 +240,14 @@ export class Modal {
     }
 
     onModalOpened() {
+        if (this.pending) {
+            this.$modal.one(ModalEvents.loaded, () => {
+                if (this.$modal.hasClass('open')) this.setupFocusTrap();
+            });
+        } else {
+            this.setupFocusTrap();
+        }
+
         restrainContentHeight(this.$content);
     }
 }

assets/js/theme/global/quick-view.js

@@ -34,8 +34,6 @@ export default function (context) {
                 $carousel.slick();
             }
 
-            modal.setupFocusTrap();
-
             return new ProductDetails(modal.$content.find('.quickView'), context);
         });
     });

assets/js/theme/product.js

@@ -7,7 +7,7 @@ import collapsibleFactory from './common/collapsible';
 import ProductDetails from './common/product-details';
 import videoGallery from './product/video-gallery';
 import { classifyForm } from './common/utils/form-utils';
-import modalFactory, { ModalEvents } from './global/modal';
+import modalFactory from './global/modal';
 
 export default class Product extends PageManager {
     constructor(context) {
@@ -44,8 +44,6 @@ export default class Product extends PageManager {
 
         const review = new Review($reviewForm);
 
-        $(document).on(ModalEvents.opened, '#modal-review-form', () => this.reviewModal.setupFocusTrap());
-
         $('body').on('click', '[data-reveal-id="modal-review-form"]', () => {
             validator = review.registerValidation(this.context);
             this.ariaDescribeReviewInputs($reviewForm);

assets/scss/components/vendor/sweetalert2/_sweetalert2.scss

@@ -102,3 +102,7 @@
 .swal2-icon {
 	display: flex;
 }
+
+.swal2-container {
+    z-index: 1000; // should be less then foundation modal
+}

templates/components/common/store-logo.html

@@ -1,4 +1,4 @@
-<a href="{{urls.home}}" class="header-logo__link">
+<a href="{{urls.home}}" class="header-logo__link" data-header-logo-link>
     {{#if settings.store_logo.image}}
         {{#if theme_settings.logo_size '===' 'original'}}
             <img class="header-logo-image-unknown-size" src="{{getImage settings.store_logo.image 'logo_size'}}" alt="{{settings.store_logo.title}}" title="{{settings.store_logo.title}}">