diff --git a/.changeset/wacky-canyons-scream.md b/.changeset/wacky-canyons-scream.md new file mode 100644 index 0000000000..ada567f6c1 --- /dev/null +++ b/.changeset/wacky-canyons-scream.md @@ -0,0 +1,5 @@ +--- +'@solid-design-system/components': patch +--- + +Fix `sd-carousel` live region behavior for screen readers. diff --git a/packages/components/src/components/carousel/carousel.ts b/packages/components/src/components/carousel/carousel.ts index 80cd2f89df..12cf79b970 100644 --- a/packages/components/src/components/carousel/carousel.ts +++ b/packages/components/src/components/carousel/carousel.ts @@ -300,16 +300,8 @@ export default class SdCarousel extends SolidElement { this.requestUpdate(); }; - private handleFocus() { - if (this.autoplay) { - this.scrollContainer.setAttribute('aria-live', 'polite'); - } - } - - private handleBlur() { - if (this.autoplay) { - this.scrollContainer.setAttribute('aria-live', 'off'); - } + private get isAutoPlaying(): boolean { + return this.autoplay && !this.pausedAutoplay && !this.autoplayController.paused; } private unblockAutoplay = (e: MouseEvent, button: HTMLButtonElement) => { @@ -620,17 +612,16 @@ export default class SdCarousel extends SolidElement { : `grid overflow-auto overscroll-x-contain grid-flow-col auto-rows-[100%] snap-x snap-mandatory overflow-y-hidden` )}" style="--slides-per-page: ${this.slidesPerPage};" + role="group" aria-busy="${scrollController.scrolling ? 'true' : 'false'}" aria-label="${this.localize.term( 'carouselContainer', Array.from(this.slides).filter(el => !el.hasAttribute('data-clone')).length )}" - aria-live=${this.autoplay ? 'off' : 'polite'} + aria-live=${this.isAutoPlaying ? 'off' : 'polite'} tabindex="0" @keydown=${this.handleKeyDown} @scrollend=${this.handleScrollEnd} - @focus=${this.handleFocus} - @blur=${this.handleBlur} > @@ -649,8 +640,6 @@ export default class SdCarousel extends SolidElement { aria-label="${this.localize.term('previousSlide')}" aria-controls="scroll-container" aria-disabled="${prevEnabled ? 'false' : 'true'}" - @focus=${this.handleFocus} - @blur=${this.handleBlur} @click=${prevEnabled ? (e: MouseEvent) => { this.previous(); @@ -754,8 +743,6 @@ export default class SdCarousel extends SolidElement { aria-label="${this.localize.term('nextSlide')}" aria-controls="scroll-container" aria-disabled="${nextEnabled ? 'false' : 'true'}" - @focus=${this.handleFocus} - @blur=${this.handleBlur} @click=${nextEnabled ? (e: MouseEvent) => { this.next();