refactor(esl-carousel): improve carousel a11ty

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 */

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');
     }
   }