From 2007c88f5bc3a1e0a1ef3b806a36c3ec3c911d74 Mon Sep 17 00:00:00 2001 From: yurytut1993 <66325265+yurytut1993@users.noreply.github.com> Date: Tue, 2 Feb 2021 11:34:26 +0200 Subject: [PATCH] feat(storefront): BCTHEME-390 Integrate accessibility scripts to product images slider on PDP (#1965) --- CHANGELOG.md | 1 + assets/js/theme/common/carousel/index.js | 26 +++++++++++-------- assets/js/theme/global/quick-view.js | 10 ++++++- .../stencil/heroCarousel/_heroCarousel.scss | 9 +++++-- .../productCarousel/_productCarousel.scss | 1 + .../components/products/product-view.html | 8 ++++-- 6 files changed, 39 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3a406f0483..885b740881 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/assets/js/theme/common/carousel/index.js b/assets/js/theme/common/carousel/index.js index 2a6abe3c05..3b975e65db 100644 --- a/assets/js/theme/common/carousel/index.js +++ b/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); diff --git a/assets/js/theme/global/quick-view.js b/assets/js/theme/global/quick-view.js index 35bb20f689..dc671bc087 100644 --- a/assets/js/theme/global/quick-view.js +++ b/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); diff --git a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss index 61f0826e08..69bbd67094 100644 --- a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss +++ b/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; diff --git a/assets/scss/components/stencil/productCarousel/_productCarousel.scss b/assets/scss/components/stencil/productCarousel/_productCarousel.scss index b34989f4c5..9b40a59938 100644 --- a/assets/scss/components/stencil/productCarousel/_productCarousel.scss +++ b/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 ); diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html index cfe9ba6118..3ca160c02c 100644 --- a/templates/components/products/product-view.html +++ b/templates/components/products/product-view.html @@ -42,9 +42,13 @@