From 6103fb613d68530ef4b305cf46968e4a9ede2c13 Mon Sep 17 00:00:00 2001 From: sacr3dc0w Date: Mon, 10 Jun 2024 03:12:27 -0700 Subject: [PATCH] Address deprecated jQuery methods (#2466) Co-authored-by: sacr3dc0w <5056945+sacr3dc0w@users.noreply.github.com> --- CHANGELOG.md | 1 + assets/js/theme/account.js | 4 ++-- assets/js/theme/auth.js | 2 +- assets/js/theme/cart.js | 17 ++++++++++------- assets/js/theme/catalog.js | 2 +- assets/js/theme/category.js | 4 ++-- assets/js/theme/common/aria/radioOptions.js | 6 +++--- .../theme/common/carousel/utils/refreshFocus.js | 8 ++++---- assets/js/theme/gift-certificate.js | 2 +- assets/js/theme/global/modal.js | 2 +- assets/js/theme/search.js | 4 ++-- 11 files changed, 28 insertions(+), 24 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 566280980e..05b63d43f9 100644 --- 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 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 index fd4a4510cd..1647648b70 100644 --- 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 index 47edf24d50..9fe0788408 100644 --- 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 index 2bf4eb53ad..b3cae98796 100644 --- 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 index 8286054cbf..fba48aa261 100644 --- 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 index 943ac91673..a9104ee8a0 100644 --- 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 index 5a32129994..e9341b4101 100644 --- 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 index dad85f3d56..b281812d27 100644 --- 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 index 5d2ddea492..d80144c935 100644 --- 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 index a57a4b0f3b..3a5ea00e7d 100644 --- 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 index f0ee7de4b3..08add87658 100644 --- 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}

`) .prependTo('body'); - setTimeout(() => $searchResultsMessage.focus(), 100); + setTimeout(() => $searchResultsMessage.trigger('focus'), 100); } loadTreeNodes(node, cb) {