Role and semantics
Section titled “Role and semantics”The segments sit in a role="group" named by the label. Each segment is a spinbutton: named “Date, day”, its value read from aria-valuenow, or “empty”. Segments open the numeric keypad on touch devices. The calendar button is named “Open calendar”; the popup is named by the label. The description and error are linked to the group with aria-describedby.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Day, month, year and the calendar button in turn. |
| Digits | Fill the segment and move on when full. |
| Up and down arrow | Change the segment, wrapping at the ends. |
| Left and right arrow | Previous or next segment. |
| Backspace, Delete | Clear the segment. |
| Escape | Closes the open calendar; focus returns to the button. |
See Calendar for keys inside the open calendar.
The focused segment shows the primary fill; the whole box gets the focus ring. When the calendar opens, focus moves to the selected day (or today); when it closes, focus returns to the calendar button.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Day segment | “Date, day, 28, spin button” |
| Empty segment | “Date, month, empty” |
| Calendar button | “Open calendar, button” |
| Out of range | “Choose a date on or after 1 February 2026” |
Contrast
Section titled “Contrast”Segment text has 4.5:1; the color-text-placeholder placeholder has 4.5:1; the focused segment on the primary fill has 4.5:1.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How DatePicker meets it | What product teams must do |
|---|---|---|
| 1.3.1 Info and relationships | A named group and named segments. | — |
| 2.1.1 Keyboard | Typed entry; the calendar is optional. | — |
| 3.3.1 Error identification | Out-of-range dates get a built-in message. | Write other rules with error. |
| 3.3.2 Labels or instructions | Placeholders show the format. | — |