Date field — accessibility

Keyboard

Tab reaches the text input, then the calendar trigger .dp-open; focus does not open the panel.
↓ in the input opens the Picker panel; Enter commits the typed text; Esc closes an open panel and returns focus to the input.
Inside the panel the Calendar grid takes focus (autoFocus), with arrow / Home / End / PageUp / PageDown navigation (see Calendar).
Leaving the field (Tab out) commits valid text, discards unfinished text and always closes the panel.

Input: aria-label (default "Datum"), aria-invalid when .err; autocomplete="off".
Trigger: aria-label="Otevřít kalendář", aria-haspopup="dialog", aria-expanded.
Panel: role="dialog" with aria-label="Vybrat datum" (Picker panel).
The echo line .dp-echo is plain text under the field; it is not linked with aria-describedby.

Field ring: .dp-field:focus-within — border --accent + 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent).
Trigger ring: .dp-open:focus-visible — 2px solid var(--accent), offset 1px.
Closing the panel (Esc, pick, clear) returns focus to the input (closePanel).

Ratios from packages/ui/src/tokens/tokens.css:

Value --ink-900 on --surface-100: 17.59:1 light, 14.53:1 dark.
Placeholder --fg-muted on --surface-100: 2.85:1 light, 3.63:1 dark — below AA for text.
Echo --fg-muted at 11.5px: 2.85:1 light — known limit; .bad --critical: 3.91:1 light, 4.35:1 dark.
Focus ring --accent on --surface-100: 4.44:1 light, 3.83:1 dark (above 3:1 non-text).
Error border --critical on --surface-100: 3.91:1 light.

The echo line is visual only; screen readers hear the committed value but not the live interpretation.
Parser notes are Czech and hard-coded in parse-date-input.ts; locale changes formatting, not the grammar.
Placeholder and echo contrast are below AA 4.5:1 in light mode.
.dp-echo uses a literal 11.5px instead of the --hint token (AD 26 Aug 2026) — drift to fix in the engine.