Field

Accessibility

Import Field, FieldMaskType, FieldStack, FieldType from @prepared911/ui/field.

One id set links the Label, control, description and error. description is in aria-describedby; an invalid field with error adds aria-invalid and aria-errormessage.
Screen readers read the formatted value of a masked field. Put the expected format in description; a placeholder is not announced once the field has a value.
A mask never removes text the user is composing: formatting waits until an IME composition ends.
Input purpose (WCAG 1.3.5): autoComplete and name pass through and are never defaulted, so pass the purpose token. Email, URL, telephone and masked fields render spellcheck="false", and a password keeps it whether it is concealed or revealed, whatever mask or spellCheck is passed, so a secret never goes to a spellcheck service.
Decorative icons are aria-hidden. An icon-only action needs label, and Search and Password Buttons need their labels as before.
Tail Buttons use preventFocusOnPress, so pressing one keeps focus in the input.
Keyboard focus on the input changes only the control frame's border, through the shared field-focus recipe: it turns --color-accent-ring (--focus-ring-color-destructive when invalid) at the same width, with no outline or shadow. A focused tail Button keeps its own ring and leaves the frame border alone. This follows ui-core and is an owner decision: the recolored border keeps WCAG 1.4.11 non-text contrast (3:1 against the fill inside it and the page outside it) but a 1px change does not meet WCAG 2.2 focus appearance (2.4.13, a 2px-thick area at 3:1 against the unfocused state).
Under forced-colors: active the frame keeps its border, an invalid field draws a second outline at rest, and keyboard focus turns the frame border Highlight.

Error announcement. An error that appears or changes after the control mounts is announced politely once, unless it comes from a submit attempt that the enclosing Form speaks for with its focus move or summary. A cleared error announces nothing. A Form opts out with announceFieldErrors={false}.

Field / API and Development

Fieldset / Usage

Field

Accessibility

Import Field, FieldMaskType, FieldStack, FieldType from @prepared911/ui/field.

One id set links the Label, control, description and error. description is in aria-describedby; an invalid field with error adds aria-invalid and aria-errormessage.
Screen readers read the formatted value of a masked field. Put the expected format in description; a placeholder is not announced once the field has a value.
A mask never removes text the user is composing: formatting waits until an IME composition ends.
Input purpose (WCAG 1.3.5): autoComplete and name pass through and are never defaulted, so pass the purpose token. Email, URL, telephone and masked fields render spellcheck="false", and a password keeps it whether it is concealed or revealed, whatever mask or spellCheck is passed, so a secret never goes to a spellcheck service.
Decorative icons are aria-hidden. An icon-only action needs label, and Search and Password Buttons need their labels as before.
Tail Buttons use preventFocusOnPress, so pressing one keeps focus in the input.
Keyboard focus on the input changes only the control frame's border, through the shared field-focus recipe: it turns --color-accent-ring (--focus-ring-color-destructive when invalid) at the same width, with no outline or shadow. A focused tail Button keeps its own ring and leaves the frame border alone. This follows ui-core and is an owner decision: the recolored border keeps WCAG 1.4.11 non-text contrast (3:1 against the fill inside it and the page outside it) but a 1px change does not meet WCAG 2.2 focus appearance (2.4.13, a 2px-thick area at 3:1 against the unfocused state).
Under forced-colors: active the frame keeps its border, an invalid field draws a second outline at rest, and keyboard focus turns the frame border Highlight.

Field / API and Development

Fieldset / Usage