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

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('role', 'tabpanel');
+        slide.removeAttribute('aria-label');
+        slide.setAttribute('aria-labelledby', `tab-${index + 1}`);
+        slide.setAttribute('id', `slide-${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,6 +630,8 @@ 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)}"
                       tabindex=${isActive ? '0' : '-1'}