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` -