Address deprecated jQuery methods (#2466)

Co-authored-by: sacr3dc0w <5056945+sacr3dc0w@users.noreply.github.com>
bigcommerce · Jun 10, 2024 · 6103fb6 · 6103fb6
1 parent d37627d
commit 6103fb6
Show file tree

Hide file tree

Showing 11 changed files with 28 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Remove remote_api_scripts to avoid double firing Meta Pixel analytics [#2467](https://github.com/bigcommerce/cornerstone/pull/2467)
 - Prevent flow outside page container on account pages [#2462](https://github.com/bigcommerce/cornerstone/pull/2462)
 - Account.js - Fixed jquery selector to be template literal [#2464](https://github.com/bigcommerce/cornerstone/pull/2464)
+- Address deprecated jQuery methods [#2466](https://github.com/bigcommerce/cornerstone/pull/2466)
 
 ## 6.14.0 (05-15-2024)
 - Account.php <a href> is inside of a list item [#2457](https://github.com/bigcommerce/cornerstone/pull/2457)

diff --git a/assets/js/theme/account.js b/assets/js/theme/account.js
@@ -492,7 +492,7 @@ export default class Account extends PageManager {
             event.preventDefault();
             setTimeout(() => {
                 const earliestError = $('span.form-inlineMessage:first').prev('input');
-                earliestError.focus();
+                earliestError.trigger('focus');
             }, 900);
         });
     }
@@ -544,7 +544,7 @@ export default class Account extends PageManager {
 
             setTimeout(() => {
                 const earliestError = $('span.form-inlineMessage:first').prev('input');
-                earliestError.focus();
+                earliestError.trigger('focus');
             }, 900);
         });
     }

diff --git a/assets/js/theme/auth.js b/assets/js/theme/auth.js
@@ -184,7 +184,7 @@ export default class Auth extends PageManager {
         event.preventDefault();
         setTimeout(() => {
             const earliestError = $('span.form-inlineMessage:first').prev('input');
-            earliestError.focus();
+            earliestError.trigger('focus');
         }, 900);
     }
 

diff --git a/assets/js/theme/cart.js b/assets/js/theme/cart.js
@@ -250,14 +250,17 @@ export default class Cart extends PageManager {
         });
 
         // cart qty manually updates
-        $('.cart-item-qty-input', this.$cartContent).on('focus', function onQtyFocus() {
-            preVal = this.value;
-        }).change(event => {
-            const $target = $(event.currentTarget);
-            event.preventDefault();
+        $('.cart-item-qty-input', this.$cartContent).on({
+            focus: function onQtyFocus() {
+                preVal = this.value;
+            },
+            change: event => {
+                const $target = $(event.currentTarget);
+                event.preventDefault();
 
-            // update cart quantity
-            cartUpdateQtyTextChange($target, preVal);
+                // update cart quantity
+                cartUpdateQtyTextChange($target, preVal);
+            },
         });
 
         $('.cart-remove', this.$cartContent).on('click', event => {

diff --git a/assets/js/theme/catalog.js b/assets/js/theme/catalog.js
@@ -17,7 +17,7 @@ export default class CatalogPage extends PageManager {
         const $sortBySelector = $('[data-sort-by="product"] #sort');
 
         if (window.localStorage.getItem('sortByStatus')) {
-            $sortBySelector.focus();
+            $sortBySelector.trigger('focus');
             window.localStorage.removeItem('sortByStatus');
         }
     }

diff --git a/assets/js/theme/category.js b/assets/js/theme/category.js
@@ -21,7 +21,7 @@ export default class Category extends CatalogPage {
         if (!$('[data-shop-by-price]').length) return;
 
         if ($('.navList-action').hasClass('is-active')) {
-            $('a.navList-action.is-active').focus();
+            $('a.navList-action.is-active').trigger('focus');
         }
 
         $('a.navList-action').on('click', () => this.setLiveRegionAttributes($('span.price-filter-message'), 'status', 'assertive'));
@@ -61,7 +61,7 @@ export default class Category extends CatalogPage {
     ariaNotifyNoProducts() {
         const $noProductsMessage = $('[data-no-products-notification]');
         if ($noProductsMessage.length) {
-            $noProductsMessage.focus();
+            $noProductsMessage.trigger('focus');
         }
     }
 

diff --git a/assets/js/theme/common/aria/radioOptions.js b/assets/js/theme/common/aria/radioOptions.js
@@ -8,7 +8,7 @@ const setCheckedRadioItem = (itemCollection, itemIdx) => {
             return;
         }
 
-        $item.attr('aria-checked', true).prop('checked', true).focus();
+        $item.attr('aria-checked', true).prop('checked', true).trigger('focus');
         $item.trigger('change');
     });
 };
@@ -35,14 +35,14 @@ const handleItemKeyDown = itemCollection => e => {
     case ariaKeyCodes.LEFT:
     case ariaKeyCodes.UP: {
         const prevItemIdx = calculateTargetItemPosition(lastCollectionItemIdx, itemIdx - 1);
-        itemCollection.get(prevItemIdx).focus();
+        itemCollection.get(prevItemIdx).trigger('focus');
         setCheckedRadioItem(itemCollection, itemIdx - 1);
         break;
     }
     case ariaKeyCodes.RIGHT:
     case ariaKeyCodes.DOWN: {
         const nextItemIdx = calculateTargetItemPosition(lastCollectionItemIdx, itemIdx + 1);
-        itemCollection.get(nextItemIdx).focus();
+        itemCollection.get(nextItemIdx).trigger('focus');
         setCheckedRadioItem(itemCollection, itemIdx + 1);
         break;
     }

diff --git a/assets/js/theme/common/carousel/utils/refreshFocus.js b/assets/js/theme/common/carousel/utils/refreshFocus.js
@@ -4,17 +4,17 @@ export default ($prevArrow, $nextArrow, $dots, $slider, activeSlideIdx, slidesQu
     if (isInfinite || !$prevArrow || !$nextArrow) return;
 
     if (activeSlideIdx === 0 && $prevArrow.is(':focus')) {
-        $nextArrow.focus();
+        $nextArrow.trigger('focus');
     } else if (activeSlideIdx === slidesQuantity - 1 && $nextArrow.is(':focus')) {
         if ($dots) {
-            $dots.children().first().find('[data-carousel-dot]').focus();
+            $dots.children().first().find('[data-carousel-dot]').trigger('focus');
             return;
         }
 
         const $firstActiveSlide = $slider.find('.slick-active').first();
 
         if ($firstActiveSlide.is(FOCUSABLE_ELEMENTS_SELECTOR)) {
-            $firstActiveSlide.focus();
-        } else $firstActiveSlide.find(FOCUSABLE_ELEMENTS_SELECTOR).first().focus();
+            $firstActiveSlide.trigger('focus');
+        } else $firstActiveSlide.find(FOCUSABLE_ELEMENTS_SELECTOR).first().trigger('focus');
     }
 };
diff --git a/assets/js/theme/gift-certificate.js b/assets/js/theme/gift-certificate.js
@@ -191,7 +191,7 @@ export default class GiftCertificate extends PageManager {
             });
         };
 
-        $('#gift-certificate-preview').click(event => {
+        $('#gift-certificate-preview').on('click', event => {
             event.preventDefault();
 
             purchaseValidator.performCheck();

diff --git a/assets/js/theme/global/modal.js b/assets/js/theme/global/modal.js
@@ -230,7 +230,7 @@ export class Modal {
 
         if (this.focusTrap) this.focusTrap.deactivate();
 
-        if (this.$preModalFocusedEl) this.$preModalFocusedEl.focus();
+        if (this.$preModalFocusedEl) this.$preModalFocusedEl.trigger('focus');
 
         this.$preModalFocusedEl = null;
     }

diff --git a/assets/js/theme/search.js b/assets/js/theme/search.js
@@ -130,7 +130,7 @@ export default class Search extends CatalogPage {
         default: break;
         }
 
-        $($tabsCollection.get(nextTabIdx)).focus().trigger('click');
+        $($tabsCollection.get(nextTabIdx)).trigger('focus').trigger('click');
     }
 
     onReady() {
@@ -212,7 +212,7 @@ export default class Search extends CatalogPage {
             >${this.context.searchResultsCount}</p>`)
             .prependTo('body');
 
-        setTimeout(() => $searchResultsMessage.focus(), 100);
+        setTimeout(() => $searchResultsMessage.trigger('focus'), 100);
     }
 
     loadTreeNodes(node, cb) {