Accessibility in React Daterangepicker component

23 Jan 202412 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.

Accessibility Criteria Compatibility
WCAG 2.2 Support Intermediate
Section 508 Support Intermediate
Screen Reader Support Yes
Right-To-Left Support Yes
Color Contrast Yes
Mobile Device Support Yes
Keyboard Navigation Support Yes
Accessibility Checker Validation Yes
Axe-core Accessibility Validation Yes
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.

WAI-ARIA attributes

The web accessibility makes web content and web applications more accessible for disabled people. 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 supports is achieved through the attributes like aria-expanded, aria-disabled, aria-activedescendant applied to the input element.

To know about the accessibility of Calendar refer to the Accessibility section of Calendar.

It helps disabled persons 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

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
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 focus the DateRangePicker component, use the alt+t keys.

[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.

See also