Time picker

Keyboard

Press Tab to move between the period, hour and minute columns. Use Up/Down and Home/End within each column, then Enter or Space to select. Press Escape to close the panel.

Semantics

Give TimePickerContent an aria-label or aria-labelledby. When you use TimePanel alone, add role="group" and an accessible name with aria-label or aria-labelledby. If you set time bounds, items outside that range cannot be selected.

Checklist

• Check that column labels and the panel name match your app language and that the selected time is available as text.
• Select values with the keyboard. If you set time bounds, check that out-of-range items cannot be selected.
• Close with Escape or an outside click and check that focus returns to the trigger.

For contrast, zoom and screen reader checks, see the common accessibility checklist.