How can I help you?
Accessibility in React Daterangepicker component
21 Feb 202612 minutes to read
The DateRangePicker component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.
The accessibility compliance for the DateRangePicker component is outlined below.
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.WAI-ARIA attributes
Web accessibility standards define practices to make web content and applications more accessible to users with disabilities. WAI-ARIA attributes are particularly valuable for dynamic content and advanced user interface controls built with AJAX, HTML, JavaScript, and related technologies.
The DateRangePicker component provides built-in compliance with WAI-ARIA specifications through attributes applied to the input element: aria-expanded, aria-disabled, and aria-activedescendant. The component also includes grid role and grid cell attributes for each day cell to enhance semantic meaning.
For related information, refer to the Calendar component’s Accessibility section.
These attributes enable users with disabilities to interact effectively with the DateRangePicker through assistive technologies such as screen readers.
-
aria-expanded: Indicates whether the DateRangePicker popup is expanded or collapsed.
-
aria-disabled: Indicates the disabled state of the DateRangePicker component.
Keyboard Interaction
You can 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 below list of keys to control the popup element.
| Press | To do this |
|---|---|
| Alt + Down Arrow | Opens the popup. |
| Alt + Up Arrow | Closes the popup. |
| Esc | closes the popup (If the Component’s input element is in focused state). |
Calendar Navigation
Use the following list of keys to navigate the currently focused Calendar after the popup has opened.
| Press | To do this |
|---|---|
| Up 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 focus the DateRangePicker component, use the
alt+tkeys.
[Class-component]
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
daterangeInstance;
componentDidMount() {
const proxy = this;
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
proxy.daterangeInstance.element.focus();
}
};
}
render() {
return <DateRangePickerComponent placeholder="Select a range" ref={(scope) => { this.daterangeInstance = scope; }}/>;
}
}
;
ReactDOM.render(<App />, document.getElementById('element'));import { DateRangePicker, DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component<{}, {}> {
private daterangeInstance: DateRangePicker;
public componentDidMount() {
const proxy = this;
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
proxy.daterangeInstance.element.focus();
}
};
}
public render() {
return <DateRangePickerComponent placeholder="Select a range" ref={(scope) => { (this.daterangeInstance as DateRangePicker | null)= scope; }}/>
}
};
ReactDOM.render(<App />, document.getElementById('element'));[Functional-component]
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
let daterangeInstance;
React.useEffect(() => {
const proxy = this;
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
proxy.daterangeInstance.element.focus();
}
};
}, []);
return <DateRangePickerComponent placeholder="Select a range" ref={(scope) => { daterangeInstance = scope; }}/>;
}
;
ReactDOM.render(<App />, document.getElementById('element'));import { DateRangePicker, DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
let daterangeInstance: DateRangePicker;
React.useEffect(() => {
const proxy = this;
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
proxy.daterangeInstance.element.focus();
}
};
}, []);
return <DateRangePickerComponent placeholder="Select a range" ref={(scope) => { (daterangeInstance as DateRangePicker | null)= scope; }}/>
};
ReactDOM.render(<App />, document.getElementById('element'));Ensuring accessibility
The DateRangePicker component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the DateRangePicker component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the DateRangePicker component with accessibility tools.