From 8e694a221f69d6ca82cecbe0b192e67aa671bc75 Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Wed, 6 Mar 2024 13:38:49 +0100 Subject: [PATCH] chore: moved handleSlideKeydown inside slider utils2 --- .../Blocks/Listing/Commons/utils.js | 47 ++++++++++++ .../Blocks/Listing/SliderTemplate.jsx | 73 +++---------------- 2 files changed, 59 insertions(+), 61 deletions(-) diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js b/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js index 18468d9bd..bdeb6905f 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js +++ b/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js @@ -137,11 +137,58 @@ export const useSlider = (userAutoplay, block_id) => { ); }; + const handleSlideKeydown = (index, prevIndex, nextIndex) => (e) => { + const { key, shiftKey } = e; + + if (key === 'Tab') { + const slide_selector = `#slider_${block_id} .slick-slide[data-index="${index}"]`; + + const focusableSlideElements = document.querySelectorAll( + `${slide_selector} a, ${slide_selector} button, ${slide_selector} [tabindex="0"]`, + ); + const isFirstSlideFocusableElement = + e.target === focusableSlideElements[0]; + const isLastSlideFocusableElement = + e.target === focusableSlideElements[focusableSlideElements.length - 1]; + + if ( + (isFirstSlideFocusableElement && shiftKey) || + (isLastSlideFocusableElement && !shiftKey) + ) { + e.preventDefault(); + e.stopPropagation(); + //shift+tab ed è il primo elemento focusabile nella slide, oppure tab ed è l'ultimo elemento focusabile nella slide + //go to next/prev slide or to next/prev button. + } else { + return; //continue doing default bhv of Tab key, to focus next focusable element inside slide. + } + + // Keeping auto pause off for now + // if (userAutoplay) setUserAutoplay(false); + // slider.current.slickPause(); + + if (shiftKey) { + if (prevIndex != null) { + slider.current.slickGoTo(prevIndex); + } else { + document.getElementById('sliderPrevArrow_' + block_id).focus(); + } + } else { + if (nextIndex != null) { + slider.current.slickGoTo(nextIndex); + } else { + document.getElementById('sliderNextArrow_' + block_id).focus(); + } + } + } + }; + return { slider, focusSlide, visibleSlide, SliderNextArrow, SliderPrevArrow, + handleSlideKeydown, }; }; diff --git a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx index 414821f41..869d56378 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx @@ -36,62 +36,7 @@ const messages = defineMessages({ }); const Slide = (props) => { - const { - item, - index, - nextIndex, - prevIndex, - appearance, - appearanceProp, - block_id, - slider, - } = props; - - const handleKeyboardUsers = (e) => { - const { key, shiftKey } = e; - - if (key === 'Tab') { - const slide_selector = `#slider_${block_id} .slick-slide[data-index="${index}"]`; - - const focusableSlideElements = document.querySelectorAll( - `${slide_selector} a, ${slide_selector} button, ${slide_selector} [tabindex="0"]`, - ); - const isFirstSlideFocusableElement = - e.target === focusableSlideElements[0]; - const isLastSlideFocusableElement = - e.target === focusableSlideElements[focusableSlideElements.length - 1]; - - if ( - (isFirstSlideFocusableElement && shiftKey) || - (isLastSlideFocusableElement && !shiftKey) - ) { - e.preventDefault(); - e.stopPropagation(); - //shift+tab ed è il primo elemento focusabile nella slide, oppure tab ed è l'ultimo elemento focusabile nella slide - //go to next/prev slide or to next/prev button. - } else { - return; //continue doing default bhv of Tab key, to focus next focusable element inside slide. - } - - // Keeping auto pause off for now - // if (userAutoplay) setUserAutoplay(false); - // slider.current.slickPause(); - console.log(index, prevIndex, nextIndex); - if (shiftKey) { - if (prevIndex != null) { - slider.current.slickGoTo(prevIndex); - } else { - document.getElementById('sliderPrevArrow_' + block_id).focus(); - } - } else { - if (nextIndex != null) { - slider.current.slickGoTo(nextIndex); - } else { - document.getElementById('sliderNextArrow_' + block_id).focus(); - } - } - } - }; + const { item, index, appearance, appearanceProp, onKeyDown } = props; const appearances = config.blocks.blocksConfig.listing.variations.filter( (v) => v.id === 'slider', @@ -102,7 +47,7 @@ const Slide = (props) => {
{ if (!slider?.current) return; @@ -271,6 +219,8 @@ const SliderTemplate = ({ sizes: `max-width(991px) 620px, ${1300 / nSlidesToShow}px`, critical: true, }); + const nextIndex = index < items.length ? index + 1 : null; + const prevIndex = index > 0 ? index - 1 : null; return ( ); })}