feat(storefront): BCTHEME-390 Integrate accessibility scripts to product images slider on PDP

CHANGELOG.md

@@ -4,6 +4,7 @@
 - Moved phrase from compare.html to en.json for increasing localization. [#1972](https://github.com/bigcommerce/cornerstone/pull/1972)
 - Fixed focus for sort by dropdown on reloading page. [#1964](https://github.com/bigcommerce/cornerstone/pull/1964)
 - Fixed filtered selection not announced by screen reader. [#1966](https://github.com/bigcommerce/cornerstone/pull/1966)
+- Integrate accessibility scripts to product images slider on PDP. [#1965](https://github.com/bigcommerce/cornerstone/pull/1965)
 
 ## 5.1.0 (01-26-2021)
 - Updated Cornerstone theme and respected variants to meet the verticals/industries documented in BCTHEME-387

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

@@ -9,11 +9,13 @@ import {
     getRealSlidesQuantityAndCurrentSlide,
 } from './utils';
 
-const onCarouselChange = (event, carousel) => {
+export const onCarouselChange = (event, carousel) => {
     const {
         options: { prevArrow, nextArrow },
         currentSlide,
         slideCount,
+        $prevArrow,
+        $nextArrow,
         $dots,
         $slider,
         breakpointSettings,
@@ -28,13 +30,20 @@ const onCarouselChange = (event, carousel) => {
         $slider.data('slick').slidesToScroll,
     );
 
-    const $prevArrow = $slider.find(prevArrow);
-    const $nextArrow = $slider.find(nextArrow);
+    const $prevArrowNode = $prevArrow || $slider.find(prevArrow);
+    const $nextArrowNode = $nextArrow || $slider.find(nextArrow);
+
+    const dataArrowLabel = $slider.data('arrow-label');
+    if (dataArrowLabel) {
+        $prevArrowNode.attr('aria-label', dataArrowLabel);
+        $nextArrowNode.attr('aria-label', dataArrowLabel);
+        $slider.data('arrow-label', false);
+    }
 
     dotsSetup($dots, actualSlide, actualSlideCount, $slider.data('dots-labels'));
-    setTabindexes($slider.find('.slick-slide'), $prevArrow, $nextArrow, actualSlide, actualSlideCount);
-    arrowAriaLabling($prevArrow, $nextArrow, actualSlide, actualSlideCount);
-    tooltipSetup($prevArrow, $nextArrow, $dots);
+    setTabindexes($slider.find('.slick-slide'), $prevArrowNode, $nextArrowNode, actualSlide, actualSlideCount);
+    arrowAriaLabling($prevArrowNode, $nextArrowNode, actualSlide, actualSlideCount);
+    tooltipSetup($prevArrowNode, $nextArrowNode, $dots);
 };
 
 export default function () {
@@ -46,11 +55,6 @@ export default function () {
         // getting element using find to pass jest test
         const $carousel = $(document).find(carousel);
 
-        if ($carousel.hasClass('productView-thumbnails')) {
-            $carousel.slick();
-            return;
-        }
-
         $carousel.on('init', onCarouselChange);
         $carousel.on('afterChange', onCarouselChange);
 

assets/js/theme/global/quick-view.js

@@ -4,6 +4,7 @@ import utils from '@bigcommerce/stencil-utils';
 import ProductDetails from '../common/product-details';
 import { defaultModal, modalTypes } from './modal';
 import 'slick-carousel';
+import { onCarouselChange } from '../common/carousel';
 
 export default function (context) {
     const modal = defaultModal();
@@ -20,7 +21,14 @@ export default function (context) {
 
             modal.$content.find('.productView').addClass('productView--quickView');
 
-            modal.$content.find('[data-slick]').slick();
+            const $carousel = modal.$content.find('[data-slick]');
+
+            if ($carousel.length) {
+                $carousel.on('init', onCarouselChange);
+                $carousel.on('afterChange', onCarouselChange);
+
+                $carousel.slick();
+            }
 
             modal.setupFocusableElements(modalTypes.QUICK_VIEW);
 

assets/scss/components/stencil/heroCarousel/_heroCarousel.scss

@@ -229,8 +229,8 @@
     left: 15px;
     bottom: spacing("third");
     height: 32px;
-    min-width: 80px;
-    max-width: 90px;
+    min-width: 60px;
+    max-width: 60px;
     font-size: 14px;
     line-height: 1.25;
     font-weight: 700;
@@ -243,6 +243,11 @@
     border: 1px solid $slick-play-pause-button-borderColor;
     @include carouselOpaqueBackgrounds($slick-play-pause-button-bgColor);
 
+    @media (min-width: 375px) {
+        min-width: 80px;
+        max-width: 90px;
+    }
+
     @include breakpoint("small") {
         max-width: 150px;
         font-size: 18px;

assets/scss/components/stencil/productCarousel/_productCarousel.scss

@@ -11,6 +11,7 @@
 .productCarousel { // 1
     width: 1px;
     min-width: 100%;
+    position: relative;
     @include grid-row(
         $behavior: nest
     );

templates/components/products/product-view.html

@@ -42,9 +42,13 @@
         <ul class="productView-thumbnails"{{#gt product.images.length 5}} data-slick='{
                 "infinite": false,
                 "mobileFirst": true,
+                "dots": false,
+                "accessibility": false,
                 "slidesToShow": 5,
-                "slidesToScroll": 1
-            }'{{/gt}}>
+                "slidesToScroll": 5
+            }'
+            data-arrow-label="{{lang 'carousel.arrowAriaLabel'}} {{product.images.length}}"
+            {{/gt}}>
             {{#each product.images}}
                 <li class="productView-thumbnail">
                     <a