fix: a11y warning

RedTurtle · Feb 25, 2025 · 688bea5 · 688bea5
1 parent ecec497
commit 688bea5
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 5 deletions.
diff --git a/src/components/Blocks/Listing/Carousel/CarouselTemplate.jsx b/src/components/Blocks/Listing/Carousel/CarouselTemplate.jsx
@@ -26,6 +26,7 @@ import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import config from '@plone/volto/registry';
 
 import './carouselTemplate.scss';
+import { on } from 'process';
 const messages = defineMessages({
   carouselItemAriaLabel: {
     id: 'carousel-item-aria-label',
@@ -48,7 +49,7 @@ const messages = defineMessages({
 
 const Slide = (props) => {
   const intl = useIntl();
-  const { index, appearance, appearanceProp, onKeyDown } = props;
+  const { index, appearance, appearanceProp, onKeyDown, ...otherProps } = props;
 
   const appearances = config.blocks.blocksConfig.listing.variations.filter(
     (v) => v.id === 'carousel',
@@ -57,14 +58,15 @@ const Slide = (props) => {
 
   return (
     <SingleSlideWrapper
+      {...otherProps}
       index={index}
       onKeyDown={onKeyDown}
       aria-label={
         (props['aria-label'] ? props['aria-label'] + ' - ' : '') +
         intl.formatMessage(messages.carouselItemAriaLabel)
       }
     >
-      <div className={'slide-wrapper'} role="presentation">
+      <div className="slide-wrapper" role="presentation">
         <SlideItemAppearance {...props} {...appearanceProp} intl={intl} />
       </div>
     </SingleSlideWrapper>
@@ -106,6 +108,7 @@ const CarouselTemplate = (props) => {
     SliderNextArrow,
     SliderPrevArrow,
     handleSlideKeydown,
+    HiddenSlideFocus,
   } = useSlider(userAutoplay, setUserAutoplay, block_id);
 
   const toggleAutoplay = () => {
@@ -185,6 +188,9 @@ const CarouselTemplate = (props) => {
     appendDots: renderCustomDots,
     // Custom handling of focus for a11y
     afterChange: focusSlide,
+    onInit: () => {
+      HiddenSlideFocus();
+    },
     responsive: [
       {
         breakpoint: 980,

diff --git a/src/components/Slider/SingleSlideWrapper.jsx b/src/components/Slider/SingleSlideWrapper.jsx
@@ -32,8 +32,6 @@ const SingleSlideWrapper = (props) => {
         //e.preventDefault();
         //e.stopPropagation();
       }}
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      tabIndex={0}
     >
       {children}
     </div>

diff --git a/src/components/Slider/slider.js b/src/components/Slider/slider.js
@@ -27,6 +27,27 @@ export const useSlider = (userAutoplay, setUserAutoplay, block_id) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const HiddenSlideFocus = () => {
+    const slides = document.querySelectorAll(
+      `${sliderElementSelector} .slick-slide`,
+    );
+
+    //set tab index to -1 for hidden slides
+
+    slides?.forEach((slide) => {
+      const focusableElements = slide.querySelectorAll(
+        'button:not([disabled]), [href], [tabindex="0"]',
+      );
+
+      focusableElements.forEach((element) => {
+        const tabIndexValue =
+          element.closest('.slick-active') !== null ? '0' : '-1';
+
+        element.setAttribute('tabIndex', tabIndexValue);
+      });
+    });
+  };
+
   const focusSlide = (slideIndex) => {
     if (!sliderElement) return;
     const sliderIsVisible = sliderContainer?.classList?.contains('visible');
@@ -52,8 +73,10 @@ export const useSlider = (userAutoplay, setUserAutoplay, block_id) => {
     ).some((node) => node.contains(document.activeElement));
 
     if (focusedSliderElement) {
+      slide.setAttribute('tabindex', '0');
       slide.focus();
     }
+    HiddenSlideFocus();
   };
 
   const visibleSlide = (selector) => {
@@ -160,7 +183,8 @@ export const useSlider = (userAutoplay, setUserAutoplay, block_id) => {
 
       if (shiftKey) {
         if (prevIndex != null) {
-          slider.current.slickGoTo(prevIndex);
+          slider.current.slickGoTo(prevIndex) ||
+            focusableSlideElements[focusableSlideElements.length - 1].focus();
         } else {
           document.getElementById('sliderPrevArrow_' + block_id).focus();
         }
@@ -197,5 +221,6 @@ export const useSlider = (userAutoplay, setUserAutoplay, block_id) => {
     SliderNextArrow,
     SliderPrevArrow,
     handleSlideKeydown,
+    HiddenSlideFocus,
   };
 };
diff --git a/src/components/View/commons/Gallery/Gallery.jsx b/src/components/View/commons/Gallery/Gallery.jsx
@@ -72,6 +72,7 @@ const Gallery = ({
       nextArrow: <NextArrow />,
       prevArrow: <PrevArrow />,
       speed: 500,
+      accessibility: true,
       ...getResponsiveSettings(nItems, slidesToShow, slidesToScroll),
       responsive: [
         {