Role and semantics
Section titled “Role and semantics”The two segment groups have role="group" and are named by the label plus “Start date” or “End date”. Each segment is a spinbutton such as “Start date, day”. The popup is a dialog named by the label; the presets are a radiogroup named “Preset ranges”. The calendar is the Calendar grid; the range ends have aria-selected.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Start segments, end segments, calendar button. In the popup: presets, month buttons, grid, footer. |
| Digits | Fill a segment; when the start year is full, focus moves to the end day. |
| Up and down arrow | Change a segment; in the presets, select the next one. |
| Grid keys | The focused day previews the range; Enter or Space picks an end. |
| Escape | Closes the popup; focus returns to the calendar button. |
When the popup opens, focus moves to the range start (or today). Picking a preset does not close the popup, so moving with the arrows does not lose focus.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Start day | “Start date, day, 1, spin button” |
| Preset | “Last 7 days, radio button, 2 of 7” |
| Reversed range | “The end date cannot be before the start” |
Contrast
Section titled “Contrast”End days on the primary fill have 4.5:1; text on the color-surface-selected range has 4.5:1. The range is set apart by square corners, not colour alone.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How DateRangePicker meets it | What product teams must do |
|---|---|---|
| 1.3.1 Info and relationships | Two named groups and a radio group. | — |
| 2.1.1 Keyboard | Typed entry, keyboard preview and picking. | — |
| 3.2.2 On input | A preset does not close the popup; confirm mode offers an explicit step. |
Use confirm for heavy queries. |
| 3.3.1 Error identification | Reversed, long and out-of-range dates get a built-in message. | — |