What component has

• If the dropdown with the calendar grid opens, then the 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

Keyboard support

Key	Function
Tab	Moves focus to the next focusable element. If the last element in the dropdown is focused, moves focus to the first element.
Shift + Tab	Moves focus to the previous focusable element. If the first element in the dropdown is focused, moves focus to the last element.
Enter, Space	Opens the dropdown. When the dropdown is open and focus is on the calendar, applies the selected date and closes the dropdown.
Esc	Closes the dropdown and returns focus to the trigger.
Up Arrow, Down Arrow	Moves selection to the same day of the previous or next week, respectively.
Left Arrow, Right Arrow	Moves selection to the previous or next day, respectively.

Roles and attributes

The following list describes roles and attributes that the component already has.

Trigger

Trigger roles and attributes

Component / element	Role / Attribute	Usage
DatePicker.Trigger	aria-label="Date field"	Defines the accessible name.
	aria-controls="IDREF"	Indicates which element this trigger opens.
	role="combobox"	Identifies the element as a combobox—a text input combined with a list of options.
	aria-haspopup="dialog" and inherits aria-controls="IDREF" from its parent.	aria-haspopup indicates that the element triggers a dialog.
	aria-expanded="false/true"	Indicates whether the dialog is open or not.
	aria-describedby="IDREF"	Provides the input with an accessible description by linking to a hint that explains the required data format.

Popper and its content

Roles and attributes of Popper and its content.

Component / element	Role / Attribute	Usage
DatePicker.Popper	role="dialog"	Identifies the element as a dialog, indicating that its content is grouped and separated from the rest of the page content.
DatePicker.Prev	aria-label="Previous period"	Defines the accessible name for the button.
DatePicker.Next	aria-label="Next period"	Defines the accessible name for the button.
DatePicker.Title	aria-live="polite"	Indicates that assistive technologies should automatically announce the displayed month and year when they change.
DateRangePicker.Period	role="listbox"	Identifies an element that creates a list from which a user may select one or more static items.

Calendar and days units

Calendar days units' roles and attributes

Component / element	Role / Attribute	Usage
DatePicker.Calendar, MonthPeaker.Calendar, DatePicker.Calendar > div	role="grid"	Identifies the calendar as a grid widget.
CalendarDays.Unit	role="gridcell"	Identifies a cell in the grid. It's intended to mimic the functionality of the HTML <td> element.
	aria-label is created from gridcell's content and DatePicker.Title	Defines the accessible name for the cell.
	aria-selected="true/false"	Indicates the cell or a number of cells is selected or not.
	aria-disabled="false"	Applies to gridcell with disabled prop. Indicates that the element is perceivable but disabled, so it's not operable.
	aria-colindex="INDEX_VALUE"	Applied when not all columns are present in the DOM. Defines an element's column index or position with respect to the total number of columns within the grid.
	aria-rowindex="INDEX_VALUE"	Applied when not all rows are present in the DOM. Defines an element's position with respect to the total number of rows within the grid.
CalendarWeekDays	role="row"	Identifies a row of cells within a tabular structure. A row contains one or more grid cells or column headers, within a grid.
CalendarWeekDays.Unit	role="columnheader"	Identifies an element as a column header cell, similar to the native <th> element with column scope.

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

For more accessibility recommendations, refer to the common Accessibility guide.