Accessibility in React Dropdown List
4 Sep 202618 minutes to read
The React Dropdown List component is built according to WAI-ARIA specifications, incorporating the appropriate roles, states, properties, and comprehensive keyboard support. It provides complete keyboard navigation and ARIA accessibility, enabling users of assistive technologies and keyboard-only users to interact effectively.
The React Dropdown List component adheres to established accessibility standards and guidelines, including ADA, Section 508, and WCAG 2.2. See the WAI-ARIA roles section below for details on the specific pattern used.
The accessibility compliance for the React Dropdown List 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
The React Dropdown List component follows the WAI-ARIA patterns to meet the accessibility requirements. The following ARIA attributes are used in the React Dropdown List component:
| Properties | Functionalities |
|---|---|
| aria-haspopup | Indicates whether the React Dropdown List input element has the popup or not. |
| aria-expanded | Indicates whether the popup has expanded or not. |
| aria-selected | Indicates the selected option. |
| aria-readonly | Indicates the readonly state of the React Dropdown List element. |
| aria-disabled | Indicates whether the React Dropdown List component is in a disabled state or not. |
| aria-activedescendant | This attribute holds the ID of the active list item to focus that element’s descendant child element. |
| aria-owns | This attribute contains the ID of the popup to indicate the popup as a child element. |
Keyboard interaction
You can use the following key shortcuts to access the React Dropdown List without interruptions.
| Keyboard shortcuts | Actions |
|---|---|
| Arrow Down | Selects the first item in the React Dropdown List when no item is selected. Otherwise, selects the item next to the currently selected item. |
| Arrow Up | Selects the item previous to the currently selected one. |
| Page Down | Scrolls down to the next page and selects the first item of the new page when the popup opens. |
| Page Up | Scrolls up to the previous page and selects the first item of the new page when the popup opens. |
| Enter | Selects the focused item, and when it is in an open state the popup closes. Otherwise, toggles the popup. |
| Tab | Focuses on the next TabIndex element on the page when the popup is closed. Otherwise, closes the popup and moves focus to the next focusable element. |
| Shift + Tab | Focuses on the previous TabIndex element on the page when the popup is closed. Otherwise, closes the popup and moves focus to the previous focusable element. |
| Alt + Down | Opens the popup. |
| Alt + Up | Closes the popup. |
| Escape | Closes the popup when it is in an open state and the currently selected item remains the same. |
| Home | Selects the first item. |
| End | Selects the last item. |
In the following sample, press Alt + t to focus the React Dropdown List component.
[Class-component]
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
// defined the array of data
gameList = [
{ Id: 'Game1', Game: 'Badminton' },
{ Id: 'Game2', Game: 'Basketball' },
{ Id: 'Game3', Game: 'Cricket' },
{ Id: 'Game4', Game: 'Football' },
{ Id: 'Game5', Game: 'Golf' },
{ Id: 'Game6', Game: 'Hockey' },
{ Id: 'Game7', Game: 'Rugby' },
{ Id: 'Game8', Game: 'Snooker' },
{ Id: 'Game9', Game: 'Tennis' }
];
// maps the appropriate column to fields property
fields = { text: 'Game', value: 'Id' };
// instance of DropDownList component
dropDownListObj;
componentDidMount() {
const proxy = this;
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
proxy.dropDownListObj.inputElement.focus();
}
};
}
render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" ref={(scope) => { this.dropDownListObj = scope; }} popupHeight='200px' fields={this.fields} dataSource={this.gameList} placeholder="Select a game"/>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// defined the array of data
private gameList: { [key: string]: Object }[] = [
{ Id: 'Game1', Game: 'Badminton' },
{ Id: 'Game2', Game: 'Basketball' },
{ Id: 'Game3', Game: 'Cricket' },
{ Id: 'Game4', Game: 'Football' },
{ Id: 'Game5', Game: 'Golf' },
{ Id: 'Game6', Game: 'Hockey' },
{ Id: 'Game7', Game: 'Rugby' },
{ Id: 'Game8', Game: 'Snooker' },
{ Id: 'Game9', Game: 'Tennis' }
];
// maps the appropriate column to fields property
private fields: object = { text: 'Game', value: 'Id' };
// instance of DropDownList component
private dropDownListObj: any;
public componentDidMount() {
const proxy = this;
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
proxy.dropDownListObj.inputElement.focus();
}
};
}
public render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" ref={(scope) => { this.dropDownListObj = scope; }} popupHeight='200px' fields={this.fields} dataSource={this.gameList} placeholder="Select a game" />
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));[Functional-component]
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// defined the array of data
const gameList = [
{ Id: 'Game1', Game: 'Badminton' },
{ Id: 'Game2', Game: 'Basketball' },
{ Id: 'Game3', Game: 'Cricket' },
{ Id: 'Game4', Game: 'Football' },
{ Id: 'Game5', Game: 'Golf' },
{ Id: 'Game6', Game: 'Hockey' },
{ Id: 'Game7', Game: 'Rugby' },
{ Id: 'Game8', Game: 'Snooker' },
{ Id: 'Game9', Game: 'Tennis' }
];
// maps the appropriate column to fields property
const fields = { text: 'Game', value: 'Id' };
// instance of DropDownList component
let dropDownListObj;
React.useEffect(() => {
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
dropDownListObj.inputElement.focus();
}
};
}, []);
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" ref={(scope) => { dropDownListObj = scope; }} popupHeight='200px' fields={fields} dataSource={gameList} placeholder="Select a game"/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// defined the array of data
const gameList: { [key: string]: Object }[] = [
{ Id: 'Game1', Game: 'Badminton' },
{ Id: 'Game2', Game: 'Basketball' },
{ Id: 'Game3', Game: 'Cricket' },
{ Id: 'Game4', Game: 'Football' },
{ Id: 'Game5', Game: 'Golf' },
{ Id: 'Game6', Game: 'Hockey' },
{ Id: 'Game7', Game: 'Rugby' },
{ Id: 'Game8', Game: 'Snooker' },
{ Id: 'Game9', Game: 'Tennis' }
];
// maps the appropriate column to fields property
const fields: object = { text: 'Game', value: 'Id' };
// instance of DropDownList component
let dropDownListObj: any;
React.useEffect(() => {
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
dropDownListObj.inputElement.focus();
}
};
}, []);
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" ref={(scope) => { dropDownListObj = scope; }} popupHeight='200px' fields={fields} dataSource={gameList} placeholder="Select a game" />
);
}
ReactDOM.render(<App />, document.getElementById('sample'));Ensuring accessibility
The React Dropdown List component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the React Dropdown List component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the React Dropdown List component with accessibility tools.