diff --git a/src/modules/esl-carousel/core/esl-carousel.slide.ts b/src/modules/esl-carousel/core/esl-carousel.slide.ts index 6adf2204f..3e0096b2b 100644 --- a/src/modules/esl-carousel/core/esl-carousel.slide.ts +++ b/src/modules/esl-carousel/core/esl-carousel.slide.ts @@ -11,6 +11,8 @@ import type {ESLCarousel} from './esl-carousel'; * ESLCarouselSlide - a component that provides content for ESLCarousel {@link ESLCarousel} */ export class ESLCarouselSlide extends ESLBaseElement { + public static observedAttributes = ['active']; + /** @returns if the slide is active */ @boolAttr() public active: boolean; @boolAttr() public preActive: boolean; @@ -34,6 +36,10 @@ export class ESLCarouselSlide extends ESLBaseElement { super.disconnectedCallback(); } + protected override attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void { + if (attrName === 'active') this.updateActiveStateA11y(); + } + /** @returns index of the slide in the carousel. */ public get index(): number { if (!this.parentNode) return NaN; @@ -58,6 +64,7 @@ export class ESLCarouselSlide extends ESLBaseElement { return findPrevLooped(this, (this.constructor as typeof ESLCarouselSlide).is) as ESLCarouselSlide; } + /** Updates initial A11y attributes */ protected updateA11y(): void { this.setAttribute('role', 'listitem'); if (!this.hasAttribute('aria-roledescription')) { @@ -66,6 +73,11 @@ export class ESLCarouselSlide extends ESLBaseElement { if (!this.hasAttribute('aria-label')) { this.setAttribute('aria-label', `carousel item ${this.index + 1}`); } + this.updateActiveStateA11y(); + } + /** Updates A11y attributes related to active state */ + protected updateActiveStateA11y(): void { + this.setAttribute('aria-hidden', String(!this.active)); } /** Creates slide element, use passed content as slide inner */ diff --git a/src/modules/esl-carousel/core/esl-carousel.ts b/src/modules/esl-carousel/core/esl-carousel.ts index fd3b6a101..108f26f72 100644 --- a/src/modules/esl-carousel/core/esl-carousel.ts +++ b/src/modules/esl-carousel/core/esl-carousel.ts @@ -167,8 +167,14 @@ export class ESLCarousel extends ESLBaseElement { } protected updateA11y(): void { + const $container = this.$container || this; + if (!$container.hasAttribute('role')) { + $container.setAttribute('role', 'region'); + $container.setAttribute('aria-roledescription', 'Carousel'); + } if (!this.$slidesArea.hasAttribute('role')) { this.$slidesArea.setAttribute('role', 'list'); + // this.$slidesArea.setAttribute('aria-live', 'polite'); } }