A date range picker composed of multiple inputs — start and end date fields for keyboard input and a calendar widget for visual selection
WAI-ARIA checklist
grouproleGroups related inputs together; in this case, the day, month and year fields
gridroleSet on the calendar widget
rowroleContains grid cell elements
gridcellroleSet on a cell
buttonroleSet on a child in the gridcell to indicate interactivity
grid
aria-current=dateSet on the element that represents the current date.
aria-activedescendantSet on the current active element
aria-multiselectableSpecifies if more than one item can be selected
gridcell button
aria-selectedSet on selected items
aria-disabled(optional)Specifies if item is disabled
From
//→
To
//SEPTEMBER2023
Mon
Tue
Wed
Thu
Fri
Sat
Sun
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
From
//→
To
//SEPTEMBER2023
Mon
Tue
Wed
Thu
Fri
Sat
Sun
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
From
//→
To
//SEPTEMBER2023
Mon
Tue
Wed
Thu
Fri
Sat
Sun
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8