Merge branch 'master' of https://github.com/bigcommerce/cornerstone

CHANGELOG.md

@@ -7,6 +7,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Draft
 
+- High severity security issue [#2477](https://github.com/bigcommerce/cornerstone/pull/2477)
+- Date Field Modifier - February showing 30th and 31st [#2473](https://github.com/bigcommerce/cornerstone/pull/2473)
+- Adding mobile nav dropdown focusTrap [#2465](https://github.com/bigcommerce/cornerstone/pull/2465)
+- 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)
+- Load other font weights and styles for the body-font [#2396](https://github.com/bigcommerce/cornerstone/pull/2396)
+
+## 6.14.0 (05-15-2024)
+
+- Account.php <a href> is inside of a list item [#2457](https://github.com/bigcommerce/cornerstone/pull/2457)
+- Screen Reader only text must be provided [#2454](https://github.com/bigcommerce/cornerstone/pull/2454)
+- Remove "cookie notification" JS and CSS [#2447](https://github.com/bigcommerce/cornerstone/pull/2447)
+- Storefront nav for switching between country-specific websites (step 1) [#2453](https://github.com/bigcommerce/cornerstone/pull/2453)
+- ADA Compliance - Accordion buttons are not read by screen reader correctly [#2441](https://github.com/bigcommerce/cornerstone/pull/2441)
+- ADA Compliance - Region requires additional ARIA markup to assist screen reader users [#2435](https://github.com/bigcommerce/cornerstone/pull/2435)
+- ADA Compliance - Add translations to accessibility attributes for Coupon Code and Gift Certificates [#2440](https://github.com/bigcommerce/cornerstone/pull/2440)
+- ADA Compliance - The Add to Cart modal dialog container is not labeled [#2427](https://github.com/bigcommerce/cornerstone/pull/2427)
+- ADA Compliance - Decorative SVG elements should be hidden from screen reader users [#2432](https://github.com/bigcommerce/cornerstone/pull/2432)
+- ADA Compliance - Content that functions as a list should be indicated as such to screen reader users [#2429](https://github.com/bigcommerce/cornerstone/pull/2429)
+- ADA Compliance - All form fields must be properly labeled [#2433](https://github.com/bigcommerce/cornerstone/pull/2433)
+- ADA Compliance - Errors are not identified to screen reader users within the Refine By accordions [#2424](https://github.com/bigcommerce/cornerstone/pull/2424)
+- ADA Compliance - Expandable items should be read by screen reader [2422](https://github.com/bigcommerce/cornerstone/pull/2422)
+- Page Suggested Items still listed on Cornerstone [#2438](https://github.com/bigcommerce/cornerstone/pull/2438)
+- Remove shop_by_price: true from category.html [#2431](https://github.com/bigcommerce/cornerstone/pull/2431)
+- Added SEPA and ECP stored bank accounts typesto the Payment methods page [#2434](https://github.com/bigcommerce/cornerstone/pull/2434)
+- Added min-height for vaulted payment methods [#2455](https://github.com/bigcommerce/cornerstone/pull/2455)
+
 ## 6.13.0 (02-12-2024)
 
 - Fix HTML markup for product listing and below content region [#2426](https://github.com/bigcommerce/cornerstone/pull/2426)

assets/js/theme/account.js

@@ -527,7 +527,7 @@ export default class Account extends PageManager {
     const validationModel = validation($editAccountForm, this.context);
     const formEditSelector = 'form[data-edit-account-form]';
     const editValidator = nod({
-      submit: '${formEditSelector} input[type="submit"]',
+      submit: `${formEditSelector} input[type="submit"]`,
       delay: 900,
     });
     const emailSelector = `${formEditSelector} [data-field-type="EmailAddress"]`;
@@ -618,7 +618,7 @@ export default class Account extends PageManager {
       event.preventDefault();
       setTimeout(() => {
         const earliestError = $('span.form-inlineMessage:first').prev('input');
-        earliestError.focus();
+        earliestError.trigger('focus');
       }, 900);
     });
   }
@@ -670,7 +670,7 @@ export default class Account extends PageManager {
 
       setTimeout(() => {
         const earliestError = $('span.form-inlineMessage:first').prev('input');
-        earliestError.focus();
+        earliestError.trigger('focus');
       }, 900);
     });
   }

assets/js/theme/auth.js

@@ -206,7 +206,7 @@ export default class Auth extends PageManager {
     event.preventDefault();
     setTimeout(() => {
       const earliestError = $('span.form-inlineMessage:first').prev('input');
-      earliestError.focus();
+      earliestError.trigger('focus');
     }, 900);
   }
 

assets/js/theme/cart.js

@@ -272,17 +272,18 @@ export default class Cart extends PageManager {
     });
 
     // cart qty manually updates
-    $('.cart-item-qty-input', this.$cartContent)
-      .on('focus', function onQtyFocus() {
+    $('.cart-item-qty-input', this.$cartContent).on({
+      focus: function onQtyFocus() {
         preVal = this.value;
-      })
-      .change((event) => {
+      },
+      change: (event) => {
         const $target = $(event.currentTarget);
         event.preventDefault();
 
         // update cart quantity
         cartUpdateQtyTextChange($target, preVal);
-      });
+      },
+    });
 
     $('.cart-remove', this.$cartContent).on('click', (event) => {
       const itemId = $(event.currentTarget).data('cartItemid');

assets/js/theme/catalog.js

@@ -1,6 +1,6 @@
-import Url from 'url';
 import PageManager from './page-manager';
 import urlUtils from './common/utils/url-utils';
+import Url from 'url';
 
 export default class CatalogPage extends PageManager {
   constructor(context) {
@@ -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');
     }
   }

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', () =>
@@ -79,7 +79,7 @@ export default class Category extends CatalogPage {
   ariaNotifyNoProducts() {
     const $noProductsMessage = $('[data-no-products-notification]');
     if ($noProductsMessage.length) {
-      $noProductsMessage.focus();
+      $noProductsMessage.trigger('focus');
     }
   }
 
@@ -97,7 +97,6 @@ export default class Category extends CatalogPage {
     const requestOptions = {
       config: {
         category: {
-          shop_by_price: true,
           products: {
             limit: productsPerPage,
           },

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');
   });
 };
@@ -41,7 +41,7 @@ const handleItemKeyDown = (itemCollection) => (e) => {
         lastCollectionItemIdx,
         itemIdx - 1,
       );
-      itemCollection.get(prevItemIdx).focus();
+      itemCollection.get(prevItemIdx).trigger('focus');
       setCheckedRadioItem(itemCollection, itemIdx - 1);
       break;
     }
@@ -51,7 +51,7 @@ const handleItemKeyDown = (itemCollection) => (e) => {
         lastCollectionItemIdx,
         itemIdx + 1,
       );
-      itemCollection.get(nextItemIdx).focus();
+      itemCollection.get(nextItemIdx).trigger('focus');
       setCheckedRadioItem(itemCollection, itemIdx + 1);
       break;
     }

assets/js/theme/common/carousel/utils/refreshFocus.js

@@ -12,17 +12,21 @@ export default (
   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');
   }
 };

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

@@ -31,6 +31,7 @@ export default class ProductDetails extends ProductDetailsBase {
       $(group).attr('id'),
     );
     this.storeInitMessagesForSwatches();
+    this.updateDateSelector();
 
     const $form = $('form[data-cart-item-add]', $scope);
 
@@ -683,4 +684,47 @@ export default class ProductDetails extends ProductDetailsBase {
       }),
     );
   }
+
+  updateDateSelector() {
+    $(document).ready(() => {
+      const monthSelector = $('#month-selector');
+      const daySelector = $('#day-selector');
+      const yearSelector = $('#year-selector');
+
+      const updateDays = () => {
+        const month = parseInt(monthSelector.val(), 10);
+        const year = parseInt(yearSelector.val(), 10);
+        let daysInMonth;
+
+        if (!Number.isNaN(month) && !Number.isNaN(year)) {
+          switch (month) {
+            case 2:
+              daysInMonth =
+                (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
+                  ? 29
+                  : 28;
+              break;
+            case 4:
+            case 6:
+            case 9:
+            case 11:
+              daysInMonth = 30;
+              break;
+            default:
+              daysInMonth = 31;
+          }
+
+          daySelector.empty();
+
+          for (let i = 1; i <= daysInMonth; i++) {
+            daySelector.append($('<option></option>').val(i).text(i));
+          }
+        }
+      };
+
+      monthSelector.on('change', updateDays);
+      yearSelector.on('change', updateDays);
+      updateDays();
+    });
+  }
 }

assets/js/theme/gift-certificate.js

@@ -208,7 +208,7 @@ export default class GiftCertificate extends PageManager {
       });
     };
 
-    $('#gift-certificate-preview').click((event) => {
+    $('#gift-certificate-preview').on('click', (event) => {
       event.preventDefault();
 
       purchaseValidator.performCheck();

assets/js/theme/global.js

@@ -10,7 +10,6 @@ import menu from './global/menu';
 import foundation from './global/foundation';
 import quickView from './global/quick-view';
 import cartPreview from './global/cart-preview';
-import privacyCookieNotification from './global/cookieNotification';
 import carousel from './common/carousel';
 import svgInjector from './global/svg-injector';
 
@@ -25,7 +24,6 @@ export default class Global extends PageManager {
     carousel(this.context);
     menu();
     mobileMenuToggle();
-    privacyCookieNotification();
     svgInjector();
   }
 }

assets/js/theme/global/mobile-menu-toggle.js

@@ -1,3 +1,4 @@
+import * as focusTrap from 'focus-trap';
 import _ from 'lodash';
 import mediaQueryListFactory from '../common/media-query-list';
 import { CartPreviewEvents } from './cart-preview';
@@ -40,6 +41,8 @@ export class MobileMenuToggle {
     this.$subMenus = this.$navList.find('.navPages-action');
     this.$toggle = $toggle;
     this.mediumMediaQueryList = mediaQueryListFactory('medium');
+    this.$preModalFocusedEl = null;
+    this.focusTrap = null;
 
     // Auto-bind
     this.onToggleClick = this.onToggleClick.bind(this);
@@ -80,6 +83,30 @@ export class MobileMenuToggle {
     }
   }
 
+  setupFocusTrap() {
+    if (!this.$preModalFocusedEl)
+      this.$preModalFocusedEl = $(document.activeElement);
+
+    if (!this.focusTrap) {
+      this.focusTrap = focusTrap.createFocusTrap(this.$header[0], {
+        escapeDeactivates: false,
+        returnFocusOnDeactivate: false,
+        allowOutsideClick: true,
+        fallbackFocus: () => {
+          const fallbackNode =
+            this.$preModalFocusedEl && this.$preModalFocusedEl.length
+              ? this.$preModalFocusedEl[0]
+              : $('[data-mobile-menu-toggle="menu"]')[0];
+
+          return fallbackNode;
+        },
+      });
+    }
+
+    this.focusTrap.deactivate();
+    this.focusTrap.activate();
+  }
+
   toggle() {
     if (this.isOpen) {
       this.hide();
@@ -99,6 +126,8 @@ export class MobileMenuToggle {
     this.$scrollView.scrollTop(0);
 
     this.resetSubMenus();
+
+    this.setupFocusTrap();
   }
 
   hide() {
@@ -111,6 +140,12 @@ export class MobileMenuToggle {
     this.$header.removeClass('is-open');
 
     this.resetSubMenus();
+
+    if (this.focusTrap) this.focusTrap.deactivate();
+
+    if (this.$preModalFocusedEl) this.$preModalFocusedEl.focus();
+
+    this.$preModalFocusedEl = null;
   }
 
   // Private

assets/js/theme/global/modal.js

@@ -222,7 +222,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;
   }