feat(storefront): BCTHEME-343 No tooltips provided for carousel butto…

…ns (#1934)
bigcommerce · Jan 4, 2021 · f6ba692 · f6ba692
1 parent babdd27
commit f6ba692
Show file tree

Hide file tree

Showing 12 changed files with 164 additions and 49 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- No tooltips provided for carousel buttons. [#1934](https://github.com/bigcommerce/cornerstone/pull/1934)
 
 ## 5.0.0 (12-14-2020)
 - Parse HTML entities in jsContext. [#1917](https://github.com/bigcommerce/cornerstone/pull/1917)

diff --git a/assets/js/theme/common/carousel/index.js b/assets/js/theme/common/carousel/index.js
@@ -2,6 +2,7 @@ import 'slick-carousel';
 
 import {
     dotsSetup,
+    tooltipSetup,
     setTabindexes,
     arrowAriaLabling,
     heroCarouselSetup,
@@ -33,6 +34,7 @@ const onCarouselChange = (event, carousel) => {
     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);
 };
 
 export default function () {

diff --git a/assets/js/theme/common/carousel/utils/index.js b/assets/js/theme/common/carousel/utils/index.js
@@ -3,3 +3,4 @@ export { default as arrowAriaLabling } from './arrowAriaLabling';
 export { default as dotsSetup } from './dotsSetup';
 export { default as getRealSlidesQuantityAndCurrentSlide } from './getRealSlidesQuantityAndCurrentSlide';
 export { default as setTabindexes } from './setTabindexes';
+export { default as tooltipSetup } from './tooltipSetup';
diff --git a/assets/js/theme/common/carousel/utils/tooltipSetup.js b/assets/js/theme/common/carousel/utils/tooltipSetup.js
@@ -0,0 +1,30 @@
+const carouselTooltipClass = 'carousel-tooltip';
+const carouselTooltip = `<span class="${carouselTooltipClass}"></span>`;
+
+const setupTooltipAriaLabel = ($node) => {
+    const $existedTooltip = $node.find(`.${carouselTooltipClass}`);
+
+    if ($existedTooltip.length) {
+        $existedTooltip.attr('aria-label', $node.attr('aria-label'));
+    } else {
+        const $tooltip = $(carouselTooltip).attr('aria-label', $node.attr('aria-label'));
+        $node.append($tooltip);
+    }
+};
+
+const setupArrowTooltips = (...arrowNodes) => {
+    arrowNodes.forEach($arrow => setupTooltipAriaLabel($arrow));
+};
+
+const setupDotTooltips = ($dots) => {
+    $dots.children().each((idx, dot) => setupTooltipAriaLabel($(dot).find('button')));
+};
+
+export default ($prevArrow, $nextArrow, $dots) => {
+    if ($prevArrow.length && $nextArrow.length) {
+        setupArrowTooltips($prevArrow, $nextArrow);
+    }
+    if ($dots) {
+        setupDotTooltips($dots);
+    }
+};
diff --git a/assets/scss/common/_focus-tooltip.scss b/assets/scss/common/_focus-tooltip.scss
@@ -0,0 +1,37 @@
+@mixin addFocusTooltip ($attr: title) {
+        &:before {
+            content: " ";
+            position: absolute;
+            right: 0;
+            top: 50%;
+            border-width: remCalc(10px);
+            border-style: solid;
+            border-color: transparent transparent $adminBar-tooltip-bg-backgroundColor transparent;
+        }
+
+        &:after {
+            content: attr($attr);
+            padding: remCalc(4px) remCalc(6px);
+            background-color: $adminBar-tooltip-bg-backgroundColor;
+            color: white;
+            position: absolute;
+            font-size: 1rem;
+            white-space: nowrap;
+            right: 0;
+            top: 100%;
+            cursor: default;
+            border-radius: remCalc(8px);
+        }
+
+        &:before,
+        &:after {
+            display: none;
+        }
+
+        &:focus {
+            &:before,
+            &:after {
+                display: block;
+            }
+        }
+}
diff --git a/assets/scss/common/index.scss b/assets/scss/common/index.scss
@@ -1 +1,2 @@
 @import 'aria';
+@import 'focus-tooltip';
diff --git a/assets/scss/components/foundation/modal/_modal.scss b/assets/scss/components/foundation/modal/_modal.scss
@@ -4,34 +4,6 @@
 // // 1. Fix for content shifted to top in modal window when bottom variant option selected
 // =============================================================================
 
-@mixin addFocusTooltip () {
-    &:focus {
-        &:before {
-            content: " ";
-            position: absolute;
-            right: 0;
-            top: 50%;
-            border-width: remCalc(10px);
-            border-style: solid;
-            border-color: transparent transparent $adminBar-tooltip-bg-backgroundColor transparent;
-        }
-
-        &:after {
-            content: attr(title);
-            padding: remCalc(4px) remCalc(6px);
-            background-color: $adminBar-tooltip-bg-backgroundColor;
-            color: white;
-            position: absolute;
-            font-size: 1rem;
-            white-space: nowrap;
-            right: 0;
-            top: 100%;
-            cursor: default;
-            border-radius: remCalc(8px);
-        }
-    }
-}
-
 .modal {
     margin: 0;
     max-height: 90%;

diff --git a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss
@@ -18,7 +18,6 @@
     min-width: 100%;
     margin-bottom: (spacing("double") + spacing("single"));
     margin-top: -(spacing("single")); // 3
-    overflow: hidden;
     opacity: 0;
 
     &.is-visible {
@@ -30,8 +29,6 @@
     }
 
     &.slick-initialized {
-        max-height: 100vh;
-
         @include breakpoint("small") {
             max-height: remCalc(400px);            
         }
@@ -126,11 +123,11 @@
     }
 
     .heroCarousel-image-wrapper {
-        height: remCalc(250px);
         display: flex;
         justify-content: center;
         align-items: flex-start;
         height: 56.25vw;
+        max-height: 100vh;
 
         @include breakpoint("small") {
             max-height: remCalc(400px);
@@ -142,24 +139,30 @@
     }
 
     &.is-square-image-type {
-
         .heroCarousel-image-wrapper {
             height: 100vw;
-
-            @include breakpoint("small") {
-                height: 56.25vw;
-            }    
         }
     }
 
     &.is-vertical-image-type {
-
         .heroCarousel-image-wrapper {
             height: 110vw;
-
+        }
+    }
+
+    &.is-square-image-type,
+    &.is-vertical-image-type {
+        .heroCarousel-image-wrapper {
+            max-height: 100vh;
+
             @include breakpoint("small") {
                 height: 56.25vw;
-            }    
+                max-height: remCalc(400px);
+            }
+
+            @include breakpoint("medium") {
+                max-height: remCalc(600px);
+            }
         }
     }
 }
@@ -182,6 +185,8 @@
         right: 0;
         top: 50%;
         transform: translateY(-50%);
+        max-height: 80%;
+        overflow: auto;
 
         &.heroCarousel-content--empty {
             background-color: transparent;

diff --git a/assets/scss/components/vendor/slick/_slick.scss b/assets/scss/components/vendor/slick/_slick.scss
@@ -45,7 +45,7 @@
 }
 
 .slick-next {
-    right: -10px;
+    right: $slick-arrows-offset;
 
     @include breakpoint("large") {
         right: -(spacing("double") + spacing("quarter"));
@@ -64,7 +64,7 @@
 }
 
 .slick-prev {
-    left: -15px;
+    left: $slick-arrows-offset;
 
     @include breakpoint("large") {
         left: -(spacing("double") + spacing("quarter"));
@@ -180,3 +180,67 @@ div.slick-slider {
     *width: 100%;
 }
 
+
+//
+// Carousel tooltips for buttons and bullets
+// -----------------------------------------------------------------------------
+
+.carousel-tooltip {
+    height: 1px;
+    display: block;
+    position: relative;
+    margin-top: 10px;
+    @include addFocusTooltip($attr: aria-label);
+
+    &:after {
+        padding: 15px 10px;
+        top: 10px;
+    }
+
+    .slick-prev:focus &,
+    .slick-next:focus &,
+    .slick-dots button:focus & {
+        &:before,
+        &:after {
+            display: block;
+        }
+    }
+
+    .slick-prev &,
+    .slick-next & {
+        &:before {
+            top: -7px;
+        }
+    }
+
+    .slick-prev & {
+        &:before {
+            right: -2px;
+        }
+
+        &:after {
+            right: auto;
+            left: -5px;
+        }
+    }
+
+    .slick-next & {
+        &:after {
+            right: -5px;
+        }
+    }
+
+    .slick-dots button & {
+        margin-top: 25px;
+
+        &:before,
+        &:after {
+            right: 50%;
+            transform: translateX(50%);        
+        }
+
+        &:before {
+            top: -7px;
+        }
+    }
+}
diff --git a/assets/scss/settings/vendor/slick/_settings.scss b/assets/scss/settings/vendor/slick/_settings.scss
@@ -22,6 +22,7 @@ $slick-dot-size:                60px;
 $slick-opacity-default:         1;
 $slick-opacity-on-hover:        0.8;
 $slick-opacity-not-active:      0.6;
+$slick-arrows-offset:           -5px;
 
 
 // Stencil Additional Settings

diff --git a/assets/scss/theme.scss b/assets/scss/theme.scss
@@ -18,11 +18,12 @@
 //
 // 1. Stencil global settings get imported first.
 // 2. Import all Citadel and Foundation settings.
-// 3. Import Citadel's version of foundation.
-//      - This enables the ability to "null" variables in the Stencil settings.
+// 3. Common aria helpers.
 // 4. Import Stencil's component settings overrides.
 // 5. Import tools which set/reset Citadel's global settings, to be consumed by
 //    the rest of Stencil.
+// 6. Import Citadel's version of foundation.
+//      - This enables the ability to "null" variables in the Stencil settings.
 //
 // -----------------------------------------------------------------------------
 
@@ -36,7 +37,7 @@
 @import "../../node_modules/@bigcommerce/citadel/dist/settings/foundation/foundation"; // 2
 @import "../../node_modules/@bigcommerce/citadel/dist/settings/bigcommerce/bigcommerce"; // 2
 
-@import "../../node_modules/@bigcommerce/citadel/dist/vendor/foundation/foundation"; // 3
+@import "../../node_modules/@bigcommerce/citadel/dist/vendor/foundation/foundation"; // 6
 
 @import "settings/normalize/normalize"; // 4
 @import "settings/vendor/vendor"; // 4
@@ -70,8 +71,8 @@
 
 @import "../../node_modules/@bigcommerce/citadel/dist/vendor/normalize/normalize"; // 1
 @import "../../node_modules/@bigcommerce/citadel/dist/components/components"; // 2
-@import "components/components"; // 3
-@import "common/index";
+@import "common/index"; // 3
+@import "components/components"; // 6
 
 
 // Layouts

diff --git a/templates/components/carousel.html b/templates/components/carousel.html
@@ -16,7 +16,7 @@
         "activeDotAriaLabel": "{{lang 'carousel.activeDotAriaLabel'}}"
     }'>
     {{#and 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>
+    <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{carousel.slides.length}}" class="js-hero-prev-arrow slick-prev slick-arrow"></button>
     {{/and}}
     {{#each carousel.slides}}
     <a href="{{url}}" class="js-hero-slide" aria-label="{{#if this.alt_text.length '!=' 0}}{{this.alt_text}}{{else}}{{lang 'common.carousel_slide_number' slide_number=(add @index 1)}}{{/if}}">
@@ -53,6 +53,6 @@
     </a>
     {{/each}}
     {{#and 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>
+    <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{carousel.slides.length}}" class="js-hero-next-arrow slick-next slick-arrow"></button>
     {{/and}}
 </section>