BCTHEME-184 Options on change modal need focus border

bigcommerce · Sep 14, 2020 · 806b9be · 806b9be
1 parent 797b3da
commit 806b9be
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 # Changelog
 
+- Options on change modal need focus border. [#1839](https://github.com/bigcommerce/cornerstone/pull/1839)
+
 ## Draft
 - Create unified focus styling in Cornerstone. [#1812](https://github.com/bigcommerce/cornerstone/pull/1812)
 - Review link in quick modal focused twice. [#1797](https://github.com/bigcommerce/cornerstone/pull/1797)

diff --git a/assets/js/theme/cart.js b/assets/js/theme/cart.js
@@ -3,7 +3,7 @@ import _ from 'lodash';
 import giftCertCheck from './common/gift-certificate-validator';
 import utils from '@bigcommerce/stencil-utils';
 import ShippingEstimator from './cart/shipping-estimator';
-import { defaultModal } from './global/modal';
+import { defaultModal, modalTypes } from './global/modal';
 import swal from './global/sweet-alert';
 
 export default class Cart extends PageManager {
@@ -137,6 +137,8 @@ export default class Cart extends PageManager {
             modal.updateContent(response.content);
 
             this.bindGiftWrappingForm();
+
+            modal.setupFocusableElements(modalTypes.CART_CHANGE_PRODUCT);
         });
 
         utils.hooks.on('product-option-change', (event, option) => {

diff --git a/assets/js/theme/global/modal.js b/assets/js/theme/global/modal.js
@@ -20,6 +20,7 @@ const SizeClasses = {
 export const modalTypes = {
     QUICK_VIEW: 'forQuickView',
     PRODUCT_DETAILS: 'forProductDetails',
+    CART_CHANGE_PRODUCT: 'forCartChangeProduct',
 };
 
 const focusableElements = {
@@ -32,6 +33,9 @@ const focusableElements = {
     [modalTypes.PRODUCT_DETAILS]: () => (
         $('#previewModal').find(allTabbableElementsSelector)
     ),
+    [modalTypes.CART_CHANGE_PRODUCT]: () => (
+        $('#modal').find(allTabbableElementsSelector)
+    ),
 };
 
 export const ModalEvents = {
@@ -237,14 +241,18 @@ export class Modal {
         if (!isTab) return;
 
         const $modalTabbableCollection = focusableElements[modalType]();
-        const lastCollectionIdx = $modalTabbableCollection.length - 1;
+        const modalTabbableCollectionLength = $modalTabbableCollection.length;
+
+        if (modalTabbableCollectionLength < 1) return;
+
+        const lastCollectionIdx = modalTabbableCollectionLength - 1;
         const $firstTabbable = $modalTabbableCollection.get(0);
         const $lastTabbable = $modalTabbableCollection.get(lastCollectionIdx);
 
         $modalTabbableCollection.each((index, element) => {
             const $element = $(element);
 
-            if ($modalTabbableCollection.length === 1) {
+            if (modalTabbableCollectionLength === 1) {
                 $element.addClass(`${firstTabbableClass} ${lastTabbableClass}`);
                 return false;
             }