feature(storefront): BCTHEME-68 Add tooltips for carousel "Previous" and "Next" buttons

assets/js/test-unit/theme/carousel.spec.js

@@ -30,8 +30,10 @@ describe('carousel', () => {
 	    var slickSpy = spyOn(multipleSlidesElement, 'slick');
 	    carousel();
 	    expect(slickSpy).toHaveBeenCalledWith({
-			dots: true,
-			customPaging: expect.any(Function)
+            accessibility: false,
+            arrows: true,
+            customPaging: expect.any(Function),
+            dots: true,
 		});
     });
 
@@ -54,7 +56,11 @@ describe('carousel', () => {
 	    spyOn(jQuery.fn, 'find').and.returnValue(multipleSlidesElement);
 	    var slickSpy = spyOn(multipleSlidesElement, 'slick');
 	    carousel();
-	    expect(slickSpy).toHaveBeenCalledWith({ dots: false });   
+	    expect(slickSpy).toHaveBeenCalledWith({
+            accessibility: false,
+            arrows: false,
+            customPaging: expect.any(Function),
+            dots: false,			
+		});   
     });
 });
-

assets/js/theme/common/carousel.js

@@ -1,5 +1,7 @@
 import 'slick-carousel';
 
+const integerRegExp = /[0-9]+/;
+
 const setSlideTabindexes = ($slides) => {
     $slides.each((index, element) => {
         const $element = $(element);
@@ -14,38 +16,68 @@ const showCarouselIfSlidesAnalizedSetup = ($carousel) => {
         analizedSlides.push($slide);
         if ($slides.length === analizedSlides.length) {
             $carousel.addClass('is-visible');
-            setSlideTabindexes($('.slick-slide'));
         }
     };
 };
 
+const arrowAriaLabling = ($arrowLeft, $arrowRight, currentSlide, lastSlide) => {
+    if (lastSlide < 2) return;
+    if ($arrowLeft.length === 0 || $arrowRight.length === 0) return;
+
+    const arrowAriaLabelBaseText = $arrowLeft.attr('aria-label');
+
+    const isInit = arrowAriaLabelBaseText.includes(['NUMBER']);
+    const valueToReplace = isInit ? '[NUMBER]' : integerRegExp;
+
+    const leftGoToNumber = currentSlide === 1 ? lastSlide : currentSlide - 1;
+    const arrowLeftText = arrowAriaLabelBaseText.replace(valueToReplace, leftGoToNumber);
+    $arrowLeft.attr('aria-label', arrowLeftText);
+
+    const rightGoToNumber = currentSlide === lastSlide ? 1 : currentSlide + 1;
+    const arrowRightText = arrowAriaLabelBaseText.replace(valueToReplace, `${rightGoToNumber}`);
+    $arrowRight.attr('aria-label', arrowRightText);
+};
+
+const onCarouselChange = (event, carousel) => {
+    const { options: { prevArrow, nextArrow }, currentSlide, slideCount } = carousel;
+
+    setSlideTabindexes($(event.target).find('.slick-slide'));
+
+    arrowAriaLabling($(prevArrow), $(nextArrow), currentSlide + 1, slideCount);
+};
+
 export default function () {
-    const $carousel = $('[data-slick]');
+    const $carouselCollection = $('[data-slick]');
+
+    if ($carouselCollection.length === 0) return;
 
-    if ($carousel.length === 0) return;
+    $carouselCollection.on('init', onCarouselChange);
+    $carouselCollection.on('afterChange', onCarouselChange);
 
-    const isMultipleSlides = $carousel[0].childElementCount > 1;
+    $carouselCollection.each((index, carousel) => {
+        // getting element using find to pass jest test
+        const $carousel = $(document).find(carousel);
 
-    const slickSettingsObj = isMultipleSlides
-        ? {
-            dots: true,
-            customPaging: () => (
+        const isMultipleSlides = $carousel.children().length > 1;
+        const customPaging = isMultipleSlides
+            ? () => (
                 '<button type="button"></button>'
-            ),
-        }
-        : {
-            dots: false,
+            )
+            : () => {};
+
+        const options = {
+            accessibility: false,
+            arrows: isMultipleSlides,
+            customPaging,
+            dots: isMultipleSlides,
         };
 
-    $carousel.slick(slickSettingsObj);
-
-    $carousel.on('afterChange', () => {
-        setSlideTabindexes($('.slick-slide'));
+        $carousel.slick(options);
     });
 
-    const $slidesNodes = $('.heroCarousel-slide');
-
-    const showCarouselIfSlidesAnalized = showCarouselIfSlidesAnalizedSetup($carousel)($slidesNodes);
+    const $heroCarousel = $carouselCollection.filter('.heroCarousel');
+    const $slidesNodes = $heroCarousel.find('.heroCarousel-slide');
+    const showCarouselIfSlidesAnalized = showCarouselIfSlidesAnalizedSetup($heroCarousel)($slidesNodes);
 
     $slidesNodes.each((index, element) => {
         const $element = $(element);

lang/en.json

@@ -880,5 +880,8 @@
         "maintenance_showstore_link": "Click here to see what your visitors will see.",
         "prelaunch_header": "Your storefront is private. Share your site with preview code:",
         "page_builder_link": "Design this page in Page Builder"
+    },
+    "carousel": {
+        "arrowAriaLabel": "Go to slide [NUMBER] of"
     }
 }

templates/components/carousel.html

@@ -1,16 +1,22 @@
 <section class="heroCarousel"
     data-slick='{
-        "arrows": {{arrows}},
         "mobileFirst": true,
         "slidesToShow": 1,
         "slidesToScroll": 1,
         "autoplay": true,
         "autoplaySpeed": {{carousel.swap_frequency}},
         "lazyLoad": "anticipated",
-        "accessibility": false
+        "slide": ".hero-slide",
+        "prevArrow": ".js-hero-prev-arrow",
+        "nextArrow": ".js-hero-next-arrow"
     }'>
+    {{#if arrows}}
+    {{#if carousel.slides.length '>' 1}}
+    <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{carousel.slides.length}}" class="js-hero-prev-arrow slick-prev slick-arrow">hero-prev-arrow</button>
+    {{/if}}
+    {{/if}}
     {{#each carousel.slides}}
-    <a href="{{url}}">
+    <a class="hero-slide" href="{{url}}">
         <div class="heroCarousel-slide {{#if ../theme_settings.homepage_stretch_carousel_images}}stretch{{/if}} {{#if @first}}heroCarousel-slide--first{{/if}}">
             <div class="heroCarousel-image-wrapper">
             {{#if @first}}
@@ -43,4 +49,9 @@
         </div>
     </a>
     {{/each}}
+    {{#if arrows}}
+    {{#if carousel.slides.length '>' 1}}
+    <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{carousel.slides.length}}" class="js-hero-next-arrow slick-next slick-arrow">hero-next-arrow</button>
+    {{/if}}
+    {{/if}}
 </section>

templates/components/products/carousel.html

@@ -2,31 +2,38 @@
     data-list-name="{{list}}"
     data-slick='{
         "dots": true,
-        "infinite": false,
         "mobileFirst": true,
         "slidesToShow": 2,
-        "slidesToScroll": 2,
+        "slidesToScroll": 1,
+        "slide": ".product-slide",
+        "prevArrow": ".js-product-prev-arrow",
+        "nextArrow": ".js-product-next-arrow",
         "responsive": [
             {
                 "breakpoint": 800,
                 "settings": {
                     "slidesToShow": {{ columns }},
-                    "slidesToScroll": 3
+                    "slidesToScroll": 1
                 }
             },
             {
                 "breakpoint": 550,
                 "settings": {
                     "slidesToShow": 3,
-                    "slidesToScroll": 3
+                    "slidesToScroll": 1
                 }
             }
         ]
-    }'
->
+    }'>
+    {{#if products.length '>' 1}}
+    <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{products.length}}" class="js-product-prev-arrow slick-prev slick-arrow"></button>
+    {{/if}}
     {{#each products}}
-    <div class="productCarousel-slide">
+    <div class="productCarousel-slide product-slide">
         {{> components/products/card settings=../settings theme_settings=../theme_settings customer=../customer event="list" position=(add @index 1)}}
     </div>
     {{/each}}
+    {{#if products.length '>' 1}}
+    <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{products.length}}" class="js-product-next-arrow slick-next slick-arrow"></button>
+    {{/if}}
 </section>