Role and semantics
Section titled “Role and semantics”DateTimePicker is a fieldset; the legend names the group. The help text and error are linked to the group with aria-describedby. The DatePicker and TimeField inside are groups of their own; their segments have the spinbutton role.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | To the date segments, the calendar button, then the time segments. |
| Up, Down | Raise or lower the segment by one. |
| Digits | Type into the segment; a full segment moves to the next. |
| Backspace | Clear the segment. |
Focus moves through the segments and the calendar button; each shows a 2 px color-focus-ring outline drawn 2 px outside it.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Entering the group | “Send time, group” |
| Hour segment | “Time, hour, 9, spin button” |
| Error | Read as the group description. |
Contrast
Section titled “Contrast”Borders have 3:1 contrast; text and the error message 4.5:1.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How DateTimePicker meets it | What the product team does |
|---|---|---|
| 1.3.1 Info and relationships | fieldset, legend, aria-describedby. |
Write a meaningful legend. |
| 3.3.1 Error identification | The error is read with the group. | Say what to do in the error. |
| 3.3.2 Labels or instructions | Every part has a visible label. | Give the time zone in the help text. |