From 806b9be9c1b8b3f27c9bb141a4a512561dfd1f47 Mon Sep 17 00:00:00 2001
From: Yurii Zusik <yurii.zusik@bigcommerce.com>
Date: Mon, 14 Sep 2020 12:21:45 +0300
Subject: [PATCH] BCTHEME-184 Options on change modal need focus border

---
 CHANGELOG.md                    |  2 ++
 assets/js/theme/cart.js         |  4 +++-
 assets/js/theme/global/modal.js | 12 ++++++++++--
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 38f3f391be..b83b2de29b 100644
--- 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
index 6f28ff81bd..6ccef8aa51 100644
--- 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
index 58404ed1db..b24cb8b804 100644
--- 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;
             }