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 aninput
-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:
- 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. - Set an
aria-label
attribute on the component host. This will be used as the component's label. - Add a
<label>
element to the same DOM tree as the component, give the component an ID, and set the label'sfor
attribute to the component's ID. That label will be used as the component's label. - 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.
API
Used by classes AutoCompleteComboBox, AutoCompleteInput, Button, CalendarDayButton, ComboBox, DateComboBox, DateInput, DropdownList, FilterComboBox, Input, ListComboBox, ListWithSearch, NumberSpinBox, PlainArrowDirectionButton, PlainAutoCompleteComboBox, PlainAutoCompleteInput, PlainBorderButton, PlainButton, PlainCalendarDayButton, PlainComboBox, PlainDateComboBox, PlainDateInput, PlainDropdownList, PlainFilterComboBox, PlainInput, PlainListComboBox, PlainListWithSearch, PlainNumberSpinBox, PlainPageDot, PlainRepeatButton, PlainSelectableButton, PlainSpinBox, RepeatButton, SelectableButton, and SpinBox.