DelegateInputLabelMixin

Overview

Purpose: Help components built around an inner input element provide a proper accessible label for assistive technologies like screen readers.

This mixin works in the middle of the Elix render pipeline:

events → methods → setState ➞ render DOM → post-render

Expects the component to provide:

• [internal.inputDelegate] getter that returns an input-compatible element in the component's shadow tree.

Provides the component with:

• ariaLabel property / aria-label attribute handling.
• ariaLabelledby property / aria-labelledby attribute handling.
• internal.render method that applies any ARIA label to the delegated inner input element.

Usage

import DelegateInputLabelMixin from "elix/src/base/DelegateInputLabelMixin.js";
import html from "elix/src/core/html.js";
import internal from "elix/src/base/internal.js";
import ReactiveElement from "elix/src/core/ReactiveElement.js";

class MyElement extends DelegateInputLabelMixin(ReactiveElement) {
  // Identify the element that should receive the ARIA label.
  get [internal.inputDelegate]() {
    return this[internal.ids].input;
  }

  get [internal.template]() {
    return html`<input id="input" />`;
  }
}

This mixin supports four standard ARIA labeling strategies:

1. Set an aria-labelledby attribute on the component host. The attribute value should be the ID of another element (or a space-separated list of element IDs) in the same DOM tree; the text or value of that element will be used as the component's label.
2. Set an aria-label attribute on the component host. This will be used as the component's label.
3. Add a <label> element to the same DOM tree as the component, give the component an ID, and set the label's for attribute to the component's ID. That label will be used as the component's label.
4. Place the component instance inside a wrapping <label> element. The wrapping label will be used as the component's label.

These strategies will be tried in the order above.

For the strategies that depend on other elements (#1, #3, and #4), whenever the component receives focus, the mixin will refresh the component's label using the current text or value of those other elements. This allows you to update the label text dynamically.