fix: firefox accessibility test (#1258)

Closes muxinc/elements#1040

This PR enhances accessibility of the media-chrome components.

## Changes

- Changed `MediaCaptionsButton` from `role="switch"` to `role="button"`
to avoid Firefox's "visible text label" requirement for form elements,
while maintaining toggle semantics via `aria-checked`.
- Added visible (but off-screen) label to `MediaChromeRange` to satisfy
Firefox's requirement for visible labels on form elements (`<input
type="range">`). The label is positioned off-screen with proper contrast
to meet accessibility standards without affecting the visual design.
- Added `aria-hidden="true"` to the segments SVG element in
`MediaChromeRange` to prevent accessibility warnings about unlabeled
graphics.
- Added `aria-label` attribute to `MediaErrorDialog`.
- `MediaTimeDisplay` dynamically manages `role` and `tabindex` based on
interactivity state (`noToggle` and `disabled` attributes). When
interactive, it uses `role="button"` with `tabindex="0"`; when
non-interactive, it removes the role and sets `tabindex="-1"`. Event
listeners are now dynamically added/removed based on interactivity.

When checking the Accessibility tab in Firefox's developer tools, there
should be no warnings related to media-chrome components.

Author: Lucas Pintos

src/js/media-captions-button.ts

@@ -77,7 +77,7 @@ class MediaCaptionsButton extends MediaChromeButton {
 
   connectedCallback(): void {
     super.connectedCallback();
-    this.setAttribute('role', 'switch');
+    this.setAttribute('role', 'button');
     this.setAttribute('aria-label', t('closed captions'));
     updateAriaChecked(this);
   }

src/js/media-chrome-range.ts

@@ -227,6 +227,14 @@ function getTemplateHTML(_attrs: Record<string, string>) {
         transform: var(--media-range-segment-transform, scaleY(1));
         transform-origin: center;
       }
+
+      /* Visible label for accessibility - positioned off-screen but technically visible (Firefox requires visible labels) */
+      #range-label {
+        position: absolute;
+        left: -10000px;
+        background: var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .7)));
+        pointer-events: none;
+      }
     </style>
     <div id="leftgap"></div>
     <div id="container">
@@ -240,9 +248,10 @@ function getTemplateHTML(_attrs: Record<string, string>) {
         <slot name="thumb">
           <div id="thumb" part="thumb"></div>
         </slot>
-        <svg id="segments"><clipPath id="segments-clipping"></clipPath></svg>
+        <svg id="segments" aria-hidden="true"><clipPath id="segments-clipping"></clipPath></svg>
       </div>
-      <input id="range" type="range" min="0" max="1" step="any" value="0">
+        <input id="range" type="range" min="0" max="1" step="any" value="0">
+        <label for="range" id="range-label"></label>
 
       ${this.getContainerTemplateHTML(_attrs)}
     </div>

src/js/media-container.ts

@@ -424,6 +424,22 @@ class MediaContainer extends globalThis.HTMLElement {
       await globalThis.customElements.whenDefined(media.localName);
     }
 
+    const setVideoAccessibility = (videoEl: HTMLVideoElement) => {
+      if (!videoEl.hasAttribute('aria-hidden')) {
+        videoEl.setAttribute('aria-hidden', 'true');
+      }
+    };
+
+    if (media instanceof HTMLVideoElement || media.tagName === 'VIDEO') {
+      setVideoAccessibility(media as HTMLVideoElement);
+    } else if (media.localName?.includes('-')) {
+      // If `media` is a custom media element search in its shadow DOM
+      const videoElement = media.shadowRoot?.querySelector('video') as HTMLVideoElement | null;
+      if (videoElement) {
+        setVideoAccessibility(videoElement);
+      }
+    }
+
     // Even if we are not connected to the DOM after this await still call mediaSetCallback
     // so the media state is already computed once, then when the container is connected
     // to the DOM mediaSetCallback is called again to attach the root node event listeners.

src/js/media-error-dialog.ts

@@ -91,6 +91,11 @@ class MediaErrorDialog extends MediaChromeDialog {
     if (this.open) {
       this.shadowRoot.querySelector('slot').name = `error-${this.mediaErrorCode}`;
       this.shadowRoot.querySelector('#content').innerHTML = this.formatErrorMessage(mediaError);
+      
+      if (!this.hasAttribute('aria-label')) {
+        const { title } = formatError(mediaError);
+        if (title) this.setAttribute('aria-label', title);
+      }
     }
   }
 

src/js/media-live-button.ts

@@ -8,7 +8,7 @@ const { MEDIA_TIME_IS_LIVE, MEDIA_PAUSED } = MediaUIAttributes;
 const { MEDIA_SEEK_TO_LIVE_REQUEST, MEDIA_PLAY_REQUEST } = MediaUIEvents;
 
 const indicatorSVG =
-  '<svg viewBox="0 0 6 12"><circle cx="3" cy="6" r="2"></circle></svg>';
+  '<svg viewBox="0 0 6 12" aria-hidden="true"><circle cx="3" cy="6" r="2"></circle></svg>';
 
 function getSlotTemplateHTML(_attrs: Record<string, string>) {
   return /*html*/ `

src/js/media-time-display.ts

@@ -108,6 +108,7 @@ class MediaTimeDisplay extends MediaTextDisplay {
   static getSlotTemplateHTML = getSlotTemplateHTML;
 
   #slot: HTMLSlotElement;
+  #keyUpHandler: ((evt: KeyboardEvent) => void) | null = null;
 
   static get observedAttributes(): string[] {
     return [...super.observedAttributes, ...CombinedAttributes, 'disabled'];
@@ -131,35 +132,61 @@ class MediaTimeDisplay extends MediaTextDisplay {
       'var(--media-control-hover-background, rgba(50 50 70 / .7))'
     );
 
-    if (!this.hasAttribute('disabled')) {
-      this.enable();
-    }
-
-    this.setAttribute('role', 'progressbar');
     this.setAttribute('aria-label', t('playback time'));
+    this.#makeInteractive();
+
+    super.connectedCallback();
+  }
 
-    const keyUpHandler = (evt) => {
+  #setupEventListeners(): void {
+    if (this.#keyUpHandler) {
+      return;
+    }
+
+    this.#keyUpHandler = (evt: KeyboardEvent) => {
       const { key } = evt;
       if (!ButtonPressedKeys.includes(key)) {
-        this.removeEventListener('keyup', keyUpHandler);
+        this.removeEventListener('keyup', this.#keyUpHandler!);
         return;
       }
 
       this.toggleTimeDisplay();
     };
 
-    this.addEventListener('keydown', (evt) => {
+    this.addEventListener('keydown', (evt: KeyboardEvent) => {
       const { metaKey, altKey, key } = evt;
       if (metaKey || altKey || !ButtonPressedKeys.includes(key)) {
-        this.removeEventListener('keyup', keyUpHandler);
+        this.removeEventListener('keyup', this.#keyUpHandler!);
         return;
       }
-      this.addEventListener('keyup', keyUpHandler);
+      this.addEventListener('keyup', this.#keyUpHandler!);
     });
 
     this.addEventListener('click', this.toggleTimeDisplay);
+  }
 
-    super.connectedCallback();
+  #removeEventListeners(): void {
+    if (this.#keyUpHandler) {
+      this.removeEventListener('keyup', this.#keyUpHandler);
+      this.removeEventListener('click', this.toggleTimeDisplay);
+      this.#keyUpHandler = null;
+    }
+  }
+
+  // Makes element clickable and focusable only when not disabled and noToggle is not present
+  #makeInteractive(): void {
+    if (!this.noToggle && !this.hasAttribute('disabled')) {
+      this.setAttribute('role', 'button');
+      this.enable();
+      this.#setupEventListeners();
+    }
+  }
+
+  // Removes interactivity from the element, making it neither clickable nor focusable
+  #makeNonInteractive(): void {
+    this.removeAttribute('role');
+    this.disable();
+    this.#removeEventListeners();
   }
 
   toggleTimeDisplay(): void {
@@ -188,17 +215,26 @@ class MediaTimeDisplay extends MediaTextDisplay {
       this.update();
     } else if (attrName === 'disabled' && newValue !== oldValue) {
       if (newValue == null) {
-        this.enable();
+        this.#makeInteractive();
       } else {
-        this.disable();
+        this.#makeNonInteractive();
+      }
+    } else if (attrName === Attributes.NO_TOGGLE && newValue !== oldValue) {
+      if (this.noToggle) {
+        this.#makeNonInteractive();
+      } else {
+        this.#makeInteractive();
       }
     }
 
     super.attributeChangedCallback(attrName, oldValue, newValue);
   }
 
   enable(): void {
-    this.tabIndex = 0;
+    
+    if (!this.noToggle) {
+      this.tabIndex = 0;
+    }
   }
 
   disable(): void {