Reference

Accessibility

The picker follows the WAI-ARIA Authoring Practices date picker dialog pattern, and the release gates test it in Chromium.

Structure

The button next to the input is labelled (Choose date) and announces aria-haspopup="dialog" and aria-expanded.
The panel is a labelled role="dialog" with aria-modal="true". Focus stays inside it while it's open.
Each month is a role="grid" table. Column headers carry full weekday names in abbr.
Each day's accessible name is the full date plus any decorate label, for example Friday, 18 September 2026, 2 rooms left. The day also carries:
- aria-selected
- aria-current="date" for today
- aria-disabled for unavailable days
Roving tabindex: the grid is one Tab stop; arrows move within it.
Announcements: the heading announces month changes, and a polite live region announces selections.

Key	In the grid
← →	Previous / next day (mirrored in right-to-left)
↑ ↓	Same day previous / next week
Home / End	First / last day of the week
Page Up / Page Down	Same day previous / next month (clamped: 31 Jan → 28 Feb)
Shift + Page Up / Page Down	Same day previous / next year
Enter / Space	Choose the day
Escape	Close and return focus to the button (or leave the month/year view)
Tab	Cycle through the header, grid and footer

In the input, ↓ opens the calendar and Enter reads what's typed.

Phones: at 640px and below the calendar is a bottom sheet with thumb-sized days.
Forced colours: Windows High Contrast uses system colours for selection and ranges.
Reduced motion: the sheet's entrance animation is turned off.
Right-to-left: layout and arrow keys are mirrored.
Errors: invalid or unavailable typed dates set aria-invalid and a validation message.
Pointer-only features: there aren't any. Everything, including range selection, works from the keyboard.

Updated 12 Sep 2026