From d3df13c26ba3a54af8bd68af690fc4e0eed10203 Mon Sep 17 00:00:00 2001
From: Nicolas AMBROISE <nicolas.ambroise@ctie.etat.lu>
Date: Wed, 11 Mar 2026 16:09:34 +0100
Subject: [PATCH] Improve accessibility of carousel

---
 .../components/carousel/v1/carousel/carousel.html  | 14 ++++++++------
 .../components/carousel/v1/carousel/controls.html  |  4 ++++
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/content/src/content/jcr_root/apps/core/wcm/components/carousel/v1/carousel/carousel.html b/content/src/content/jcr_root/apps/core/wcm/components/carousel/v1/carousel/carousel.html
index 368b4fedce..d911739aba 100644
--- a/content/src/content/jcr_root/apps/core/wcm/components/carousel/v1/carousel/carousel.html
+++ b/content/src/content/jcr_root/apps/core/wcm/components/carousel/v1/carousel/carousel.html
@@ -19,9 +19,8 @@
      data-panelcontainer="${wcmmode.edit && 'carousel'}"
      id="${carousel.id}"
      class="cmp-carousel"
-     role="group"
+     role="region"
      aria-label="${carousel.accessibilityLabel}"
-     aria-live="polite"
      aria-roledescription="carousel"
      data-cmp-is="carousel"
      data-cmp-autoplay="${(wcmmode.edit || wcmmode.preview) ? '' : carousel.autoplay}"
@@ -40,11 +39,11 @@
              id="${item.id}-tabpanel"
              class="cmp-carousel__item${item.name == carousel.activeItem ? ' cmp-carousel__item--active' : ''}"
              role="tabpanel"
-             aria-labelledby="${item.id}-tab"
              aria-roledescription="slide"
              aria-label="${(carousel.accessibilityAutoItemTitles && item.title) || 'Slide {0} of {1}' @ format=[itemList.count, carousel.items.size], i18n}"
              data-cmp-data-layer="${item.data.json}"
-             data-cmp-hook-carousel="item"></div>
+             data-cmp-hook-carousel="item"
+             tabindex="-1"></div>
         <sly data-sly-call="${controlsTemplate.controls @ carousel=carousel}" data-sly-test="${!carousel.controlsPrepended}"></sly>
         <ol class="cmp-carousel__indicators"
             role="tablist"
@@ -53,9 +52,12 @@
             <li data-sly-repeat.item="${items}"
                 id="${item.id}-tab"
                 class="cmp-carousel__indicator${item.name == carousel.activeItem ? ' cmp-carousel__indicator--active' : ''}"
-                role="tab"
+                role="tab" 
                 aria-controls="${item.id}-tabpanel"
-                aria-label="${'Slide {0}' @ format=[itemList.count], i18n}"
+                aria-label="${'Slide {0}' @ format=[itemList.count], i18n} ${item.title}"
+                title="${'Slide {0}' @ format=[itemList.count], i18n} ${item.title}"
+                tabindex="${item.name == carousel.activeItem ? '0' : '-1'}"
+                aria-selected="${item.name == carousel.activeItem ? 'true' : 'false'}"
                 data-cmp-hook-carousel="indicator">${item.title}</li>
         </ol>
     </div>
diff --git a/content/src/content/jcr_root/apps/core/wcm/components/carousel/v1/carousel/controls.html b/content/src/content/jcr_root/apps/core/wcm/components/carousel/v1/carousel/controls.html
index 7c17663e5c..49839dc2a2 100644
--- a/content/src/content/jcr_root/apps/core/wcm/components/carousel/v1/carousel/controls.html
+++ b/content/src/content/jcr_root/apps/core/wcm/components/carousel/v1/carousel/controls.html
@@ -19,6 +19,7 @@
         <button class="cmp-carousel__action cmp-carousel__action--previous"
                 type="button"
                 aria-label="${carousel.accessibilityPrevious || 'Previous' @ i18n}"
+				title="${carousel.accessibilityPrevious || 'Previous' @ i18n}"
                 data-cmp-hook-carousel="previous">
             <span class="cmp-carousel__action-icon"></span>
             <span class="cmp-carousel__action-text">${carousel.accessibilityPrevious || 'Previous' @ i18n}</span>
@@ -26,6 +27,7 @@
         <button class="cmp-carousel__action cmp-carousel__action--next"
                 type="button"
                 aria-label="${carousel.accessibilityNext || 'Next' @ i18n}"
+				title="${carousel.accessibilityNext || 'Next' @ i18n}"
                 data-cmp-hook-carousel="next">
             <span class="cmp-carousel__action-icon"></span>
             <span class="cmp-carousel__action-text">${carousel.accessibilityNext || 'Next' @ i18n}</span>
@@ -34,6 +36,7 @@
                 class="cmp-carousel__action cmp-carousel__action--pause"
                 type="button"
                 aria-label="${carousel.accessibilityPause || 'Pause' @ i18n}"
+				title="${carousel.accessibilityPause || 'Pause' @ i18n}"
                 data-cmp-hook-carousel="pause">
             <span class="cmp-carousel__action-icon"></span>
             <span class="cmp-carousel__action-text">${carousel.accessibilityPause || 'Pause' @ i18n}</span>
@@ -42,6 +45,7 @@
                 class="cmp-carousel__action cmp-carousel__action--play cmp-carousel__action--disabled"
                 type="button"
                 aria-label="${carousel.accessibilityPlay || 'Play' @ i18n}"
+				title="${carousel.accessibilityPlay || 'Play' @ i18n}"
                 data-cmp-hook-carousel="play">
             <span class="cmp-carousel__action-icon"></span>
             <span class="cmp-carousel__action-text">${carousel.accessibilityPlay || 'Play' @ i18n}</span>