Developer TimePicker
What component has
Keyboard support
| Key | Function |
|---|---|
Tab, | Moves focus to the next (previous) focusable element. First, the entire time picker is focused. Then, the focus moves to the hours combobox, followed by the minutes combobox, and finally the AM/PM button, if it's present. |
Up Arrow , Down Arrow | Moves selection between dropdown options. If the last (first) option is selected, selection moves to the first (last) option cyclically. |
Enter | Applies the selected option and closes the dropdown. |
Esc | Closes the dropdown without changing the value. |
Roles and attributes
The following list describes roles and attributes that component already has.
| Component | Attribute | Usage |
|---|---|---|
TimePicker | aria-label | Defines the accessible name of the entire TimePicker. Automatically includes the text from the label connected by the for attribute. |
TimePicker | role="group" | Defines a group of elements. |
TimePicker.Hours, TimePicker.Minutes | aria-label="Hours", aria-label="Minutes" | Defines the accessible names for the comboboxes. |
TimePicker.Hours, TimePicker.Minutes | role="combobox" | Identifies the element as a combobox—a text input combined with a list of options. |
TimePicker.Hours, TimePicker.Minutes | aria-expanded="false/true" | Indicates whether the dropdown is open or not. |
TimePicker.Hours, TimePicker.Minutes | aria-autocomplete="list" | Indicates that autocomplete is implemented by displaying a list of options during input. |
TimePicker.Hours, TimePicker.Minutes | aria-controls="#IDREF" | Identifies the element that serves as the dropdown. |
TimePicker.Hours, TimePicker.Minutes | aria-haspopup="listbox" | Indicates that the connected dropdown is a listbox. |
TimePicker.Separator | aria-hidden | Hides the separator from assistive technology. |
TimePicker.Format | aria-describedby | Provides the button's description for assistive technology. |
span | aria-live="polite", role="status" | Announces the status message when the time period (AM/PM) is changed. |
Resources
TimePicker consists of several components that have their own accessibility guidelines:
Other recommendations
See more accessibility recommendations in the common Accessibility guide.
Automated screen reader testing
Intergalactic v15.29.0, React v18.2.0, Playwright v1.25.1, Guidepup v0.13.1, MacOS Monterey 12.
Running screen reader against this file.
1. Screen reader goes into the active element.
2. Screen reader says "In web content Your time Your time".
3. Screen reader goes to the next element.
4. Screen reader says "Your time group".
5. Screen reader goes into the active element.
6. Screen reader says "Time input, no time entered group".
7. Screen reader goes into the active element.
8. Screen reader says "Hours input field 00 list box pop up Menu pop-up combo box".
9. Screen reader goes into the active element.
10. Screen reader says "In Menu pop-up combo box".
11. Screen reader types "04".
12. Screen reader says "You are currently on a Menu pop-up combo box. Type text or, to display a list of choices, press Control-Option-Space.".
13. Screen reader goes to the next element.
14. Screen reader says "end of Time input, entered time is 4: AM group".
15. Screen reader types "20".
16. Screen reader says "20".
17. Screen reader presses the "Enter" button.
18. Screen reader goes out of active element.
19. Screen reader says "Your time group".
20. Screen reader goes into the active element.
21. Screen reader says "Time input, entered time is 4:20 AM group".