From bcf08a8e41342e398a2344b4b4d60276f462c7ca Mon Sep 17 00:00:00 2001
From: Matt McLean <9052437+doctor-spaceman@users.noreply.github.com>
Date: Tue, 11 Mar 2025 10:37:35 -0700
Subject: [PATCH] Carousel accessibility (#2364)

* Remove code that sets the carousel item role attribute.

* When pagination is active, set accessibility attributes on dots and slides.

* When slide is active, avoid including a 'Go to slide...' aria-label on the tab.

* Troubleshoot accessibility test for pagination

* Add exception for accessibility test.

* Prettier fix
---
 .../carousel-item/carousel-item.component.ts     |  1 -
 src/components/carousel/carousel.component.ts    | 16 ++++++++++++++--
 src/components/carousel/carousel.test.ts         |  7 +++++--
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/carousel-item/carousel-item.component.ts b/src/components/carousel-item/carousel-item.component.ts
index 7ef2ba16..2eba116c 100644
--- a/src/components/carousel-item/carousel-item.component.ts
+++ b/src/components/carousel-item/carousel-item.component.ts
@@ -20,7 +20,6 @@ export default class SlCarouselItem extends ShoelaceElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute('role', 'group');
   }
 
   render() {
diff --git a/src/components/carousel/carousel.component.ts b/src/components/carousel/carousel.component.ts
index 52024695..dd0c3e49 100644
--- a/src/components/carousel/carousel.component.ts
+++ b/src/components/carousel/carousel.component.ts
@@ -367,8 +367,16 @@ export default class SlCarousel extends ShoelaceElement {
     this.getSlides({ excludeClones: false }).forEach((slide, index) => {
       slide.classList.remove('--in-view');
       slide.classList.remove('--is-active');
+      slide.setAttribute('role', 'group');
       slide.setAttribute('aria-label', this.localize.term('slideNum', index + 1));
 
+      if (this.pagination) {
+        slide.setAttribute('id', `slide-${index + 1}`);
+        slide.setAttribute('role', 'tabpanel');
+        slide.removeAttribute('aria-label');
+        slide.setAttribute('aria-labelledby', `tab-${index + 1}`);
+      }
+
       if (slide.hasAttribute('data-clone')) {
         slide.remove();
       }
@@ -611,7 +619,7 @@ export default class SlCarousel extends ShoelaceElement {
           : ''}
         ${this.pagination
           ? html`
-              <div part="pagination" role="tablist" class="carousel__pagination" aria-controls="scroll-container">
+              <div part="pagination" role="tablist" class="carousel__pagination">
                 ${map(range(pagesCount), index => {
                   const isActive = index === currentPage;
                   return html`
@@ -622,8 +630,12 @@ export default class SlCarousel extends ShoelaceElement {
                         'carousel__pagination-item--active': isActive
                       })}"
                       role="tab"
+                      id="tab-${index + 1}"
+                      aria-controls="slide-${index + 1}"
                       aria-selected="${isActive ? 'true' : 'false'}"
-                      aria-label="${this.localize.term('goToSlide', index + 1, pagesCount)}"
+                      aria-label="${isActive
+                        ? this.localize.term('slideNum', index + 1)
+                        : this.localize.term('goToSlide', index + 1, pagesCount)}"
                       tabindex=${isActive ? '0' : '-1'}
                       @click=${() => this.goToSlide(index * slidesPerMove)}
                       @keydown=${this.handleKeyDown}
diff --git a/src/components/carousel/carousel.test.ts b/src/components/carousel/carousel.test.ts
index c020c457..3421f31e 100644
--- a/src/components/carousel/carousel.test.ts
+++ b/src/components/carousel/carousel.test.ts
@@ -768,11 +768,14 @@ describe('<sl-carousel>', () => {
       expect(el.scrollContainer).to.have.attribute('aria-atomic', 'true');
 
       expect(pagination).to.have.attribute('role', 'tablist');
-      expect(pagination).to.have.attribute('aria-controls', el.scrollContainer.id);
+      let paginationItemIndex = 0;
       for (const paginationItem of pagination.querySelectorAll('.carousel__pagination-item')) {
+        expect(paginationItem).to.have.attribute('id', `tab-${paginationItemIndex + 1}`);
         expect(paginationItem).to.have.attribute('role', 'tab');
+        expect(paginationItem).to.have.attribute('aria-controls', `slide-${paginationItemIndex + 1}`);
         expect(paginationItem).to.have.attribute('aria-selected');
         expect(paginationItem).to.have.attribute('aria-label');
+        paginationItemIndex++;
       }
 
       for (const navigationItem of navigation.querySelectorAll('.carousel__navigation-item')) {
@@ -781,7 +784,7 @@ describe('<sl-carousel>', () => {
         expect(navigationItem).to.have.attribute('aria-label');
       }
 
-      await expect(el).to.be.accessible();
+      await expect(el).to.be.accessible({ ignoredRules: ['aria-valid-attr-value'] });
     });
 
     describe('when scrolling', () => {