fix: slider a11y

RedTurtle · Sep 12, 2023 · 3d5bcc4 · 3d5bcc4
1 parent 018deb7
commit 3d5bcc4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js b/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js
@@ -61,7 +61,7 @@ export const useSlider = (userAutoplay) => {
 
     if ((userAutoplay && !slide) || (userAutoplay && !slide.length > 0)) return;
 
-    // Custom handling of focus as per Arter a11y audit and request
+    // Custom handling of focus for a11y
     const link = visibleSlideTitle(
       `a.slide-link[data-slide="${currentSlide}"]`,
     );
@@ -70,7 +70,14 @@ export const useSlider = (userAutoplay) => {
       return;
     }
     // eslint-disable-next-line no-unused-expressions
-    else link.focus();
+    else if (
+      // if the focus was already on a slide, move it to the current one
+      Array.from(document.querySelectorAll('.slick-slide')).some((el) =>
+        el.contains(document.activeElement),
+      )
+    ) {
+      link.focus();
+    }
   };
 
   return {

diff --git a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx
@@ -50,7 +50,7 @@ const messages = defineMessages({
 });
 
 function NextArrow(props) {
-  // Custom handling of focus as per Arter a11y audit and request
+  // Custom handling of focus for a11y
   const { className, style, onClick, intl, currentSlide } = props;
   const handleClick = (options) => {
     onClick(options, false);
@@ -85,7 +85,7 @@ function NextArrow(props) {
 }
 
 function PrevArrow(props) {
-  // Custom handling of focus as per Arter a11y audit and request
+  // Custom handling of focus for a11y
   const {
     className,
     style,
@@ -225,7 +225,7 @@ const SliderTemplate = ({
   };
 
   const renderCustomDots = (props) => {
-    // Custom handling of focus as per Arter a11y audit and request
+    // Custom handling of focus for a11y
     return (
       <ul
         className="slick-dots"
@@ -281,13 +281,13 @@ const SliderTemplate = ({
     pauseOnDotsHover: true,
     swipe: true,
     swipeToSlide: true,
-    focusOnSelect: true,
+    focusOnSelect: false,
     draggable: true,
     accessibility: true,
     nextArrow: <NextArrow intl={intl} focusNext={focusNext} />,
     prevArrow: <PrevArrow intl={intl} focusNext={focusNext} />,
     appendDots: renderCustomDots,
-    // Custom handling of focus as per Arter a11y audit and request
+    // Custom handling of focus for a11y
     afterChange: focusNext,
     responsive: [
       {