aria-describedby passthrough for hint and error text — the same shape of gap as the name.
Accessible name for the control, for when no visible label exists. Prefer
AriaLabelledBy when one does — an aria-label duplicates that label's text and drifts
from it on rename. aria-labelledby beats aria-label where both are present.
The id of a VISIBLE label element that names this control — the preferred wiring whenever a label already exists on screen. It is also the only path that can name a control's SECONDARY pieces (a filter box, a toggle, a calendar) from that same label: see SecondaryLabelledBy.
Readonlyhostid for the control's focusable element, so other markup can REFERENCE it — aria-controls,
hint text, test hooks.
Whether it doubles as a <label for> target depends on the control, because label[for]
associates only with LABELABLE elements: it works on the input-backed controls (mj-combobox,
mj-numeric-input, mj-datepicker, mj-page-search) and on mj-switch, whose <button> is
labelable too. It does NOT work on mj-dropdown, whose trigger is a div[role=combobox] —
wiring label[for] there produces markup that looks correct, passes review, and leaves the
control named only in the browsers that guess. Each control's own docs say which it is.
The gate on Toggle() — true when EITHER source says so. Assign only via syncDisabled().
ReadonlyNamedThis instance's id suffix, shared by every id the control generates.
Host-driven disable. Composed with Angular Forms' setDisabledState() into IsDisabled
(the actual gate) — see syncDisabled. A setter, not a bare field, because this input is
routinely bound to an expression that changes over the control's lifetime, and the gate has
to follow it every time.
A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.
The callback function to register
Registers a callback function that is called when the control's value changes in the UI.
This method is called by the forms API on initialization to update the form model when values propagate from the view to the model.
When implementing the registerOnChange method in your own value accessor,
save the given function so your class calls it at the appropriate time.
The following example stores the provided function as an internal method.
registerOnChange(fn: (_: any) => void): void {
this._onChange = fn;
}
When the value changes in the UI, call the registered function to allow the forms API to update itself:
host: {
'(change)': '_onChange($event.target.value)'
}
The callback function to register
Registers a callback function that is called by the forms API on initialization to update the form model on blur.
When implementing registerOnTouched in your own value accessor, save the given
function so your class calls it when the control should be considered
blurred or "touched".
The following example stores the provided function as an internal method.
registerOnTouched(fn: any): void {
this._onTouched = fn;
}
On blur (or equivalent), your class should call the registered function to allow the forms API to update itself:
host: {
'(blur)': '_onTouched()'
}
aria-label for a secondary control in the no-visible-label case: word followed by the
host's own name, or fallback when the host has no name either.
The already-starts-with-word guard is not cosmetic: this repo's house habit is
AriaLabel="Filter roles", and an unconditional prefix announces that box as
"Filter Filter roles".
The match ends on a WORD BOUNDARY, not on a space: AriaLabel="Filter: roles" already begins
with the word and must not be prefixed either, while "Filters" is a different word and must
be. A space-only test gets the punctuated case wrong in the doubling direction.
aria-labelledby for a secondary control when a VISIBLE label names the host: the hidden word
plus that label's own text, composed by the accessibility tree from an id LIST. Empty when
there is no such label, in which case SecondaryLabel supplies a string instead.
An id list is the only mechanism that can work here — the component never sees the label's text, only its id. Without it, every filterable dropdown on a form named this way announces an identical "Filter options", and a form with six of them has six indistinguishable filter boxes.
Id of a hidden span holding one fixed WORD of a secondary control's name — "Filter", "Clear", "Open calendar for". Composed with the host's visible label by SecondaryLabelledBy.
mj-switch — Toggle switch. Replaces
<kendo-switch>.Every switch needs an ACCESSIBLE NAME. Without one it announces as "switch, on" — or, worse, as its own STATE, because
OnLabel/OffLabelrender inside the button and arole=switchtakes its name from its contents when nothing else names it: a toggle labelled "On" that announces "On, switch, on" says nothing about what it toggles (WCAG 2.1 4.1.2). Use MJNamedControlBase.AriaLabelledBy when a visible label exists, MJNamedControlBase.AriaLabel when none does; either one overrides that state text.The switch is a
<button>, which IS a labelable element, so MJNamedControlBase.InputId doubles as a<label for>target: the label names the switch — overriding the On/Off text, since an associated label outranks an element's own contents — and clicking it focuses and toggles the switch, whichAriaLabelledByalone does not give you.Example