chore: BC master -> HN master

.github/workflow-examples/automatic_deployment_production.yml

@@ -39,6 +39,8 @@ jobs:
 
 #
 # You must configure store credentials as secrets on your GitHub repo for automatic deployment via GitHub Actions
+# This defaults to pushing the theme to channel ID 1, which is the default storefront. If you wish to push to an
+# Alternate storefront, use a different channel ID
 #
 
     - name: Connect to store
@@ -48,4 +50,4 @@ jobs:
       run: stencil init -u $URL -t $TOKEN -p 3000
 
     - name: Push theme live, automatically deleting oldest theme if necessary
-      run: stencil push -a -d
+      run: stencil push -a -d -c 1

.github/workflow-examples/poll_for_changed_configuration.yml

@@ -49,8 +49,8 @@ jobs:
         TOKEN: ${{ secrets.STENCIL_ACCESS_TOKEN_PRODUCTION }}
       run: stencil init -u $URL -t $TOKEN -p 3000
 
-    - name: Check for an updated configuration on the live store
-      run: stencil pull
+    - name: Check for an updated configuration on the live default storefront (channel ID 1)
+      run: stencil pull -c 1
 
     - name: Create Pull Request
       id: cpr

CHANGELOG.md

@@ -1,6 +1,21 @@
 # Changelog
 
 ## Draft
+- Fixed displaying swatch name for multiple swatch options on page. [#2040](https://github.com/bigcommerce/cornerstone/pull/2040)
+- Added settings for payment banners. [#2021](https://github.com/bigcommerce/cornerstone/pull/2021)
+- Use https:// for schema markup. [#2039](https://github.com/bigcommerce/cornerstone/pull/2039)
+- Update focus tooltip styles contrast to achieve accessibility AA Complaince. [#2047](https://github.com/bigcommerce/cornerstone/pull/2047)
+- Apple pay button displaying needs to be fixed. [#2043](https://github.com/bigcommerce/cornerstone/pull/2043)
+
+## 5.4.0 (04-26-2021)
+- Incorrect focus order for product carousels. [#2034](https://github.com/bigcommerce/cornerstone/pull/2034)
+- Removed duplicates of main tag.[#2032](https://github.com/bigcommerce/cornerstone/pull/2032)
+- Hamburger Menu Icon missing on Google AMP Pages. [#2022](https://github.com/bigcommerce/cornerstone/pull/2022)
+- Wish List drop down is truncated on product page. [#2001](https://github.com/bigcommerce/cornerstone/pull/2001)
+- Improve performance of analyzing homepage carousel images. [#2027](https://github.com/bigcommerce/cornerstone/pull/2027)
+- Added keyboard support on radio buttons. [#2028](https://github.com/bigcommerce/cornerstone/pull/2028)
+- Replace SSL settings in Page builder with global region for SSL certificate. [#2026](https://github.com/bigcommerce/cornerstone/pull/2026)
+- fixed email address validation in forms. [#2029](https://github.com/bigcommerce/cornerstone/pull/2029)
 - Fixed unnecessary horizontal scroll on swatch options on PDP. [#2023](https://github.com/bigcommerce/cornerstone/pull/2023)
 - Always showing product counts for Category facet in the faceted search results page. [#2035](https://github.com/bigcommerce/cornerstone/pull/2035)
 

assets/js/theme/cart.js

@@ -10,6 +10,7 @@ import CartItemDetails from './common/cart-item-details';
 export default class Cart extends PageManager {
     onReady() {
         this.$modal = null;
+        this.$cartPageContent = $('[data-cart]');
         this.$cartContent = $('[data-cart-content]');
         this.$cartMessages = $('[data-cart-status]');
         this.$cartTotals = $('[data-cart-totals]');
@@ -18,9 +19,16 @@ export default class Cart extends PageManager {
         this.$activeCartItemId = null;
         this.$activeCartItemBtnAction = null;
 
+        this.setApplePaySupport();
         this.bindEvents();
     }
 
+    setApplePaySupport() {
+        if (window.ApplePaySession) {
+            this.$cartPageContent.addClass('apple-pay-supported');
+        }
+    }
+
     cartUpdate($target) {
         const itemId = $target.data('cartItemid');
         this.$activeCartItemId = itemId;

assets/js/theme/common/aria/radioOptions.js

@@ -9,6 +9,7 @@ const setCheckedRadioItem = (itemCollection, itemIdx) => {
         }
 
         $item.attr('aria-checked', true).prop('checked', true).focus();
+        $item.trigger('change');
     });
 };
 
@@ -31,21 +32,18 @@ const handleItemKeyDown = itemCollection => e => {
     }
 
     switch (keyCode) {
-    case ariaKeyCodes.RETURN:
-    case ariaKeyCodes.SPACE: {
-        setCheckedRadioItem(itemCollection, itemIdx);
-        break;
-    }
     case ariaKeyCodes.LEFT:
     case ariaKeyCodes.UP: {
         const prevItemIdx = calculateTargetItemPosition(lastCollectionItemIdx, itemIdx - 1);
         itemCollection.get(prevItemIdx).focus();
+        setCheckedRadioItem(itemCollection, itemIdx - 1);
         break;
     }
     case ariaKeyCodes.RIGHT:
     case ariaKeyCodes.DOWN: {
         const nextItemIdx = calculateTargetItemPosition(lastCollectionItemIdx, itemIdx + 1);
         itemCollection.get(nextItemIdx).focus();
+        setCheckedRadioItem(itemCollection, itemIdx + 1);
         break;
     }
 

assets/js/theme/common/carousel/constants.js

@@ -0,0 +1 @@
+export const FOCUSABLE_ELEMENTS_SELECTOR = '[href], button, input, textarea, select, details, [contenteditable="true"], [tabindex]';

assets/js/theme/common/carousel/index.js

@@ -2,70 +2,69 @@ import 'slick-carousel';
 
 import {
     activatePlayPauseButton,
+    analizeSlides,
     arrowAriaLabling,
     dotsSetup,
     getActiveSlideIdxAndSlidesQuantity,
     handleImageAspectRatio,
     handleImageLoad,
-    setTabindexes,
-    tooltipSetup,
+    refreshFocus,
     updateTextWithLiveData,
 } from './utils';
 
-/**
- * returns activeSlideIdx and slidesQuantity
- * based on provided carousel settings
- * @param {Object} $slickSettings
- * @returns {Object}
- */
-const extractSlidesDetails = ({
-    slideCount, $slides, options: { slidesToShow, slidesToScroll },
-}) => getActiveSlideIdxAndSlidesQuantity(
-    slideCount,
-    slidesToShow,
-    slidesToScroll,
-    $slides,
-);
+export const setCarouselState = ({ delegateTarget }, carouselObj) => {
+    const carouselObjCurrent = carouselObj || delegateTarget.slick;
+    const { $slider } = carouselObjCurrent;
+
+    $slider.data('state', getActiveSlideIdxAndSlidesQuantity(carouselObjCurrent));
+};
 
 export const onUserCarouselChange = ({ data }, context, $slider) => {
     const $activeSlider = $slider || data;
-    const $parentContainer = $activeSlider.hasClass('productView-thumbnails') ? $('.productView-images') : $activeSlider;
-    const { activeSlideIdx, slidesQuantity } = extractSlidesDetails($activeSlider[0].slick);
+    const $parentContainer = $activeSlider.hasClass('productView-thumbnails') ? $activeSlider.parent('.productView-images') : $activeSlider;
+    const { activeSlideIdx, slidesQuantity } = $activeSlider.data('state');
     const $carouselContentElement = $('[data-carousel-content-change-message]', $parentContainer);
     const carouselContentAnnounceMessage = updateTextWithLiveData(context.carouselContentAnnounceMessage, (activeSlideIdx + 1), slidesQuantity);
 
     $carouselContentElement.text(carouselContentAnnounceMessage);
 };
 
-export const onSlickCarouselChange = (e, carousel, context) => {
+export const onSlickCarouselChange = (e, carouselObj, context) => {
     const {
         $dots,
         $slider,
         $prevArrow,
         $nextArrow,
-    } = carousel;
+        options: { infinite },
+    } = carouselObj;
 
-    const { activeSlideIdx, slidesQuantity } = extractSlidesDetails(carousel);
+    const { activeSlideIdx, slidesQuantity } = $slider.data('state') || getActiveSlideIdxAndSlidesQuantity(carouselObj);
 
     dotsSetup($dots, activeSlideIdx, slidesQuantity, context);
-    arrowAriaLabling($prevArrow, $nextArrow, activeSlideIdx, slidesQuantity, context.carouselArrowAndDotAriaLabel);
-    setTabindexes($slider.find('.slick-slide'));
-    tooltipSetup($prevArrow, $nextArrow, $dots);
-    activatePlayPauseButton(carousel, slidesQuantity, context);
+    arrowAriaLabling($prevArrow, $nextArrow, activeSlideIdx, slidesQuantity, infinite, context.carouselArrowAndDotAriaLabel);
+    analizeSlides($slider.find('.slick-slide'));
+    refreshFocus($prevArrow, $nextArrow, $dots, $slider, activeSlideIdx, slidesQuantity, infinite);
+
+    $slider.data('state', null);
 };
 
 export default function (context) {
     $('[data-slick]').each((idx, carousel) => {
         // getting element using find to pass jest test
         const $carousel = $(document).find(carousel);
+
+        $carousel.on('init breakpoint swipe', setCarouselState);
+        $carousel.on('click', '.slick-arrow, .slick-dots', setCarouselState);
+
+        $carousel.on('init breakpoint', (e, carouselObj) => activatePlayPauseButton(e, carouselObj, context));
         $carousel.on('init afterChange', (e, carouselObj) => onSlickCarouselChange(e, carouselObj, context));
         $carousel.on('click', '.slick-arrow, .slick-dots', $carousel, e => onUserCarouselChange(e, context));
         $carousel.on('swipe', (e, carouselObj) => onUserCarouselChange(e, context, carouselObj.$slider));
 
         if ($carousel.hasClass('heroCarousel')) {
             $carousel.on('init afterChange', handleImageLoad);
             $carousel.on('swipe', handleImageAspectRatio);
-            $carousel.on('click', '.slick-arrow, .slick-dots', $carousel, handleImageAspectRatio);
+            $carousel.on('click', '.slick-arrow, .slick-dots', handleImageAspectRatio);
 
             // Alternative image styling for IE, which doesn't support objectfit
             if (typeof document.documentElement.style.objectFit === 'undefined') {

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

@@ -2,49 +2,51 @@ import { throttle } from 'lodash';
 
 const PLAY_ACTION = 'slickPlay';
 const PAUSE_ACTION = 'slickPause';
-const IS_ACTIVATED_DATA_ATTR = 'is-activated';
-
-export default (carousel, slidesQuantity, context) => {
-    const { $slider, $dots, speed } = carousel;
-    const $playPauseButton = $slider.find('[data-play-pause-button]');
-
-    if ($playPauseButton.length === 0) return;
-
-    $playPauseButton.css('display', slidesQuantity < 2 ? 'none' : 'block');
-
-    if ($playPauseButton.data(IS_ACTIVATED_DATA_ATTR)) return;
-
+const updateButtonLabels = (context) => {
     const {
         carouselPlayPauseButtonPlay,
         carouselPlayPauseButtonPause,
         carouselPlayPauseButtonAriaPlay,
         carouselPlayPauseButtonAriaPause,
     } = context;
 
-    const updateLabels = action => {
-        $playPauseButton
+    return ($button, action) => {
+        $button
             .text(action === PLAY_ACTION
                 ? carouselPlayPauseButtonPause : carouselPlayPauseButtonPlay)
             .attr('aria-label', action === PLAY_ACTION
                 ? carouselPlayPauseButtonAriaPause : carouselPlayPauseButtonAriaPlay);
     };
+};
+let updateButtonLabelsWithContext;
 
-    const onPlayPauseClick = () => {
-        const action = carousel.paused ? PLAY_ACTION : PAUSE_ACTION;
+export default (e, carouselObj, context) => {
+    const { $slider, $dots, options: { speed } } = carouselObj;
+    const $playPauseButton = $slider.find('[data-play-pause-button]');
 
-        $slider.slick(action);
-        updateLabels(action);
-    };
+    if ($playPauseButton.length === 0) return;
 
     // for correct carousel controls focus order
     if ($dots) {
         $playPauseButton.insertBefore($dots);
     } else $slider.append($playPauseButton);
 
-    $playPauseButton.on('click', throttle(onPlayPauseClick, speed, { trailing: false }));
-    $playPauseButton.data(IS_ACTIVATED_DATA_ATTR, true);
+    const { slidesQuantity } = $slider.data('state');
+    $playPauseButton.css('display', slidesQuantity > 1 ? 'block' : 'none');
 
-    if (carousel.breakpoints.length) {
-        $slider.on('breakpoint', () => updateLabels(PLAY_ACTION));
+    if (e.type === 'init') updateButtonLabelsWithContext = updateButtonLabels(context);
+
+    if (e.type === 'breakpoint') {
+        updateButtonLabelsWithContext($playPauseButton, PLAY_ACTION);
+        return;
     }
+
+    const onPlayPauseClick = () => {
+        const action = carouselObj.paused ? PLAY_ACTION : PAUSE_ACTION;
+
+        $slider.slick(action);
+        updateButtonLabelsWithContext($playPauseButton, action);
+    };
+
+    $playPauseButton.on('click', throttle(onPlayPauseClick, speed, { trailing: false }));
 };

assets/js/theme/common/carousel/utils/setTabindexes.js → assets/js/theme/common/carousel/utils/analizeSlides.js

@@ -1,4 +1,4 @@
-const FOCUSABLE_ELEMENTS_SELECTOR = '[href], button, input, textarea, select, details, [contenteditable="true"], [tabindex]';
+import { FOCUSABLE_ELEMENTS_SELECTOR } from '../constants';
 
 export default ($slides) => {
     $slides.each((idx, slide) => {

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

@@ -1,17 +1,26 @@
 import updateTextWithLiveData from './updateTextWithLiveData';
+import tooltipSetup from './tooltipSetup';
 
-export default ($prevArrow, $nextArrow, activeSlideIdx, slidesQuantity, ariaLabel) => {
+export default ($prevArrow, $nextArrow, activeSlideIdx, slidesQuantity, isInfinite, ariaLabel) => {
     if (slidesQuantity < 2 || !$prevArrow || !$nextArrow) return;
 
     const activeSlideNumber = activeSlideIdx + 1;
 
     const prevSlideNumber = activeSlideIdx === 0 ? slidesQuantity : activeSlideNumber - 1;
     const arrowLeftText = updateTextWithLiveData(ariaLabel, prevSlideNumber, slidesQuantity);
 
-    $prevArrow.attr('aria-label', arrowLeftText);
+    $prevArrow.attr({
+        'aria-label': arrowLeftText,
+        tabindex: !isInfinite && activeSlideIdx === 0 ? -1 : 0,
+    });
+    tooltipSetup($prevArrow);
 
     const nextSlideNumber = activeSlideIdx === slidesQuantity - 1 ? 1 : activeSlideNumber + 1;
     const arrowRightText = updateTextWithLiveData(ariaLabel, nextSlideNumber, slidesQuantity);
 
-    $nextArrow.attr('aria-label', arrowRightText);
+    $nextArrow.attr({
+        'aria-label': arrowRightText,
+        tabindex: !isInfinite && activeSlideIdx === slidesQuantity - 1 ? -1 : 0,
+    });
+    tooltipSetup($nextArrow);
 };

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

@@ -1,4 +1,5 @@
 import updateTextWithLiveData from './updateTextWithLiveData';
+import tooltipSetup from './tooltipSetup';
 
 export default ($dots, activeSlideIdx, slidesQuantity, { carouselArrowAndDotAriaLabel, carouselActiveDotAriaLabel }) => {
     if (!$dots) return;
@@ -14,7 +15,8 @@ export default ($dots, activeSlideIdx, slidesQuantity, { carouselArrowAndDotAria
         const dotLabelText = updateTextWithLiveData(carouselArrowAndDotAriaLabel, idx + 1, slidesQuantity);
         const dotSlideStatusText = idx === activeSlideIdx ? `, ${carouselActiveDotAriaLabel}` : '';
         const dotAriaLabel = `${dotLabelText}${dotSlideStatusText}`;
+        const $dotButton = $(dot).find('[data-carousel-dot]');
 
-        $(dot).find('[data-carousel-dot]').attr('aria-label', dotAriaLabel);
+        tooltipSetup($dotButton.attr('aria-label', dotAriaLabel));
     });
 };

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

@@ -1,4 +1,4 @@
-export default (slideCount, slidesToShow, slidesToScroll, $slides) => {
+export default ({ slideCount, $slides, options: { slidesToShow, slidesToScroll } }) => {
     const lastVisibleIdx = $slides.get().reduce((acc, curr, idx) => {
         if ($(curr).hasClass('slick-active')) return idx;
         return acc;

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

@@ -5,16 +5,12 @@ export default ({ $slider }, isAnalyzedDataAttr) => {
     if (isAnalyzedSlide) return { isAnalyzedSlide };
 
     const $activeSlideImg = $activeSlide.find('.heroCarousel-image');
-
-    const attrsObj = {
-        src: $activeSlideImg.attr('src'),
-        srcset: $activeSlideImg.attr('srcset'),
-        sizes: $activeSlideImg.attr('sizes'),
-    };
+    const activeSlideImgNode = $activeSlideImg[0];
 
     return {
-        attrsObj,
         $slider,
         $activeSlide,
+        $activeSlideImg,
+        activeSlideImgNode,
     };
 };