fix(MWPW-142248): Accessibility for carousels containing focusable el…

…ements. (adobecom#1901) * MWPW-142248 * fixed linting errors * revert package.json * revert package_lock.json * Accessibility for the show-x variants of carousel * test cases for code coverage --------- Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>
yesil · Mar 18, 2024 · 6fdb2f3 · 6fdb2f3
1 parent d4bfc65
commit 6fdb2f3
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/libs/blocks/carousel/carousel.js b/libs/blocks/carousel/carousel.js
@@ -156,6 +156,7 @@ function moveSlides(event, carouselElements, jumpToIndex) {
   referenceSlide.classList.remove('reference-slide');
   referenceSlide.style.order = null;
   activeSlide.classList.remove('active');
+  activeSlide.querySelectorAll('a').forEach((focusableElement) => { focusableElement.setAttribute('tabindex', -1); });
   activeSlideIndicator.classList.remove('active');
   activeSlideIndicator.setAttribute('tabindex', -1);
 
@@ -206,6 +207,22 @@ function moveSlides(event, carouselElements, jumpToIndex) {
 
   // Update active slide and indicator dot attributes
   activeSlide.classList.add('active');
+  const indexOfActive = [...activeSlide.parentElement.children]
+    .findIndex((ele) => activeSlide.isSameNode(ele));
+  const IndexOfShowClass = [...carouselElements.el.classList].findIndex((ele) => ele.includes('show-'));
+  const tempSlides = [...slides.slice(indexOfActive), ...slides.slice(0, indexOfActive)];
+  if (IndexOfShowClass >= 0) {
+    const show = parseInt(carouselElements.el.classList[IndexOfShowClass].split('-')[1], 10);
+    tempSlides.forEach((slide, index) => {
+      let tabIndex = -1;
+      if (index < show) {
+        tabIndex = 0;
+      }
+      slide.querySelectorAll('a').forEach((focusableElement) => { focusableElement.setAttribute('tabindex', tabIndex); });
+    });
+  } else {
+    activeSlide.querySelectorAll('a').forEach((focusableElement) => { focusableElement.setAttribute('tabindex', 0); });
+  }
   activeSlideIndicator.classList.add('active');
   activeSlideIndicator.setAttribute('tabindex', 0);
 
@@ -371,5 +388,11 @@ export default function init(el) {
   parentArea.addEventListener(MILO_EVENTS.DEFERRED, handleDeferredImages, true);
 
   slides[0].classList.add('active');
+  const IndexOfShowClass = [...el.classList].findIndex((ele) => ele.includes('show-'));
+  let NoOfVisibleSlides = 1;
+  if (IndexOfShowClass >= 0) {
+    NoOfVisibleSlides = parseInt(el.classList[IndexOfShowClass].split('-')[1], 10);
+  }
+  slides.slice(NoOfVisibleSlides).forEach((slide) => slide.querySelectorAll('a').forEach((focusableElement) => { focusableElement.setAttribute('tabindex', -1); }));
   handleChangingSlides(carouselElements);
 }
diff --git a/test/blocks/carousel/carousel.test.js b/test/blocks/carousel/carousel.test.js
@@ -51,6 +51,8 @@ describe('Carousel', () => {
   });
 
   it('Keyboard navigation to go to next and previous slide', async () => {
+    const carouselContainer = document.body.querySelector('.carousel');
+    carouselContainer.classList.add('show-2');
     const nextButton = document.body.querySelector('.carousel-next');
     const previousButton = document.body.querySelector('.carousel-next');
     const slides = document.body.querySelectorAll('.carousel-slide');