Time field — accessibility

Keyboard

• Tab reaches the input; ↓ opens the list and moves focus to the selected (or first) option, scrolled into view.
• In the list ↑/↓ move between options, Enter or Space picks, Esc closes and returns focus to the input.
• Enter in the input commits the typed text and closes the list; blur commits valid text or reverts.
• If the field unmounts while typing (popover closed by an outside click) the valid text is still flushed to onChange.

ARIA

• Input aria-label (default "Čas", "Od" / "Do" in a range); autocomplete="off".
• List role="listbox" + aria-label; options role="option" with aria-selected.
• Panel role="dialog" from Picker panel.
• The duration column .d is part of the option text, so it is read with the time.

Focus

• Field ring: .dp-field:focus-within — accent border + 3px color-mix(--accent 16%) shadow.
• Option ring: .dp-topt:focus-visible — 0 0 0 1px var(--accent), 0 0 0 4px color-mix(--accent 16%), outline: 0.
• Closing from the list returns focus to the input; closing from the scrim does not (onClose only hides).

Contrast

• Value --fg on --surface-100: 17.59:1 light, 14.53:1 dark.
• Selected option --accent-ink on --surface-100: 5.31:1 light, 6.82:1 dark.
• Duration column --fg-muted (11px overline): 2.85:1 light, 3.63:1 dark — below AA.
• Placeholder "–" --fg-muted: 2.85:1 light.

Known limits

• No visible error state; a wrong entry silently reverts on blur.
• Duration column and placeholder are below AA 4.5:1 in light mode.
• Typing grammar is Czech-only ("půl 10", "čtvrt na 10").
• Long lists (step 15 = 96 rows) rely on scroll; there is no type-ahead inside the listbox, only in the input.