UI Components

Field message

A message below a field, nol-field-message, text that wraps anywhere rather than widen its row: by default a validation error, error-colored and an alert that is announced when it appears, or with its kind a note or hint, muted and never announced. The field names it in aria-describedby, and takes aria-invalid="true" while an error shows.

Examples

Loading…

States

Loading…

API

Selector nol-field-message

Import from @noldova/ui.components.angular

Inputs

NameTypeDefaultDescription
kindFieldMessageKindFieldMessageKind.Error

What the message says, its kind input: an error unless bound. A note that is always on screen takes FieldMessageKind.Note, so a screen reader doesn't interrupt with it each time it renders.

Accessibility

KeyAction
TabPasses the message by: it takes no focus, and is read with the field that names it.

An error, the default kind, has the alert role, so it is announced when it appears; its owner marks the field aria-invalid while it shows.

A note, FieldMessageKind.Note, has no role and is never announced, however often it renders; it is read with its field.

The field names the message in aria-describedby, by the id its owner gives the message.

Specification

Loading…