DelegateInputLabelMixin

Delegates its ARIA label property to an inner input-type element

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 → setStaterender 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 (and aria-label 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" />
    `;
  }
}