Accessibility in Blazor DateRangePicker component

The web accessibility makes web content and web applications more accessible for people with disabilities. It especially helps in dynamic content change and development of advanced user interface controls with AJAX, HTML, JavaScript, and related technologies.
DateRangePicker provides built-in compliance with WAI-ARIA specifications. WAI-ARIA
support is achieved through the attributes
like aria-expanded, aria-disabled, and aria-activedescendant
applied as an input element.

To learn about the accessibility of Calendar, refer to the Calendar’s
Accessibility section.

It helps people with disabilities by providing information about the widget for assistive technology in the screen readers. DateRangePicker component contains grid role and grid cell for each day cell.

aria-expanded: Indicates the currently selected date of the DateRangePicker component.

aria-disabled: Indicates the disabled state of the DateRangePicker component.

Keyboard interaction

Use the following keys to interact with the DateRangePicker.
This component implements the keyboard navigation support by following the WAI-ARIA practices.

It supports the following list of shortcut keys:

Input navigation

Before opening the popup, use the following list of keys to
control the popup element.

Keys

Explanation

Alt + Down Arrow

Opens the popup.

Alt + Upper Arrow

Closes the popup.

Esc

Closes the popup.

Calendar navigation

Use the following list of keys to navigate the currently focused Calendar after the popup has opened:

Keys

Explanation

Upper Arrow

Focuses the same day of the previous week.

Down Arrow

Focuses the same day of the next week.

Left Arrow

Focuses the day before.

Right Arrow

Focuses the next day.

Home

Focuses the first day of the month.

End

Focuses the last day of the month.

Page Up

Focuses the same date of the previous month.

Page Down

Focuses the same date of the next month.

Enter

Selects the currently focused date.

Shift + Page Up

Focuses the same date for the previous year.

Shift + Page Down

Focuses the same date for the next year.

Control + Home

Focuses the first date of the current year.

Control + End

Focuses the last date of the current year.

Alt + Right

Focuses through out the pop-up container in forward direction.

Alt + Left

Focuses through out the pop-up container in backward direction.

To focusout the DateRangePicker component use the t keys. For additional information about native event, click here.