Developer What component has
- If the dropdown with the calendar grid opens, then a current date gets the focus.
- If a date is selected, the accessible name of the "Date field" input is updated to include the selected date.
Keyboard support
| Key | Function |
|---|---|
Tab | Moves focus to next element in the dropdown Tab sequence. If focus is on the last button (specifically "OK"), moves focus to the first button (specifically Previous Year). |
Shift + Tab | Moves focus to previous element in the dialog Tab sequence. If focus is on the first button (specifically Previous Year), moves focus to the last button (specifically "OK"). |
Enter , Space | Open the date picker dropdown. Move focus to selected date, specifically the date displayed in the date input text field. If no date has been selected, places focus on the current date. |
ESC | Closes the dialog and returns focus to the Choose Date button. |
Up Arrow | Moves focus to the same day of the previous week. |
Down Arrow | Moves focus to the same day of the next week. |
Right Arrow | Moves focus to the next day. |
Left Arrow | Moves focus to the previous day. |
Resources
- W3 date picker example has detailed information about the accordion accessible behavior.
- Find live examples of accessible inputs with different types in DigitalA11y project.
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 Date field group".
3. Screen reader goes into the active element.
4. Screen reader says "06/29/2020 Insertion at end of text. Date MM/DD/YYYY edit text".
5. Screen reader presses the "Backspace" button.
6. Screen reader says "0".
7. Screen reader presses the "Backspace" button.
8. Screen reader says "2".
9. Screen reader presses the "Backspace" button.
10. Screen reader says "0".
11. Screen reader presses the "Backspace" button.
12. Screen reader says "06/29".
13. Screen reader presses the "Backspace" button.
14. Screen reader says "9".
15. Screen reader presses the "Backspace" button.
16. Screen reader says "06".
17. Screen reader presses the "Backspace" button.
18. Screen reader says "6".
19. Screen reader presses the "Backspace" button.
20. Screen reader says "0".
21. Screen reader types "05".
22. Screen reader types "29".
23. Screen reader says "2".
24. Screen reader goes out of active element.
25. Screen reader says "Date field group".
26. Screen reader goes into the active element.
27. Screen reader says "05/29 Insertion at end of text. Date MM/DD/YYYY edit text".
28. Screen reader types "2000".
29. Screen reader says "05/29/2000 Insertion at end of text. Date MM/DD/YYYY edit text".
30. Screen reader goes out of active element.
31. Screen reader says "Date field group".
32. Screen reader goes to the next element.
33. Screen reader goes into the active element.
34. Screen reader says "from date MM/DD/YYYY edit text".
35. Screen reader types "05".
36. Screen reader says "05".
37. Screen reader types "29".
38. Screen reader says "29".
39. Screen reader types "2000".
40. Screen reader says "05/29/2000 Insertion at end of text. from date MM/DD/YYYY edit text".
41. Screen reader types "05".
42. Screen reader says "to date MM/DD/YYYY edit text".
43. Screen reader types "29".
44. Screen reader says "29".
45. Screen reader types "2000".
46. Screen reader says "05/29/2000 Insertion at end of text. to date MM/DD/YYYY edit text".
47. Screen reader goes out of active element.
48. Screen reader says "Date field group".1. Screen reader goes into the active element.
2. Screen reader says "In web content Date field group".
3. Screen reader goes into the active element.
4. Screen reader says "06/29/2020 Insertion at end of text. Date MM/DD/YYYY edit text".
5. Screen reader presses the "Backspace" button.
6. Screen reader says "0".
7. Screen reader presses the "Backspace" button.
8. Screen reader says "2".
9. Screen reader presses the "Backspace" button.
10. Screen reader says "0".
11. Screen reader presses the "Backspace" button.
12. Screen reader says "06/29".
13. Screen reader presses the "Backspace" button.
14. Screen reader says "9".
15. Screen reader presses the "Backspace" button.
16. Screen reader says "06".
17. Screen reader presses the "Backspace" button.
18. Screen reader says "6".
19. Screen reader presses the "Backspace" button.
20. Screen reader says "0".
21. Screen reader types "05".
22. Screen reader types "29".
23. Screen reader says "2".
24. Screen reader goes out of active element.
25. Screen reader says "Date field group".
26. Screen reader goes into the active element.
27. Screen reader says "05/29 Insertion at end of text. Date MM/DD/YYYY edit text".
28. Screen reader types "2000".
29. Screen reader says "05/29/2000 Insertion at end of text. Date MM/DD/YYYY edit text".
30. Screen reader goes out of active element.
31. Screen reader says "Date field group".
32. Screen reader goes to the next element.
33. Screen reader goes into the active element.
34. Screen reader says "from date MM/DD/YYYY edit text".
35. Screen reader types "05".
36. Screen reader says "05".
37. Screen reader types "29".
38. Screen reader says "29".
39. Screen reader types "2000".
40. Screen reader says "05/29/2000 Insertion at end of text. from date MM/DD/YYYY edit text".
41. Screen reader types "05".
42. Screen reader says "to date MM/DD/YYYY edit text".
43. Screen reader types "29".
44. Screen reader says "29".
45. Screen reader types "2000".
46. Screen reader says "05/29/2000 Insertion at end of text. to date MM/DD/YYYY edit text".
47. Screen reader goes out of active element.
48. Screen reader says "Date field group".