How can I help you?
Accessibility in React Drop down list component
21 Feb 202618 minutes to read
The DropDownList component is built according to WAI-ARIA specifications, incorporating WAI-ARIA roles, states, properties, and comprehensive keyboard support. The component provides complete keyboard navigation and ARIA accessibility, enabling users of assistive technologies and keyboard-only users to interact effectively.
The DropDownList component adheres to established accessibility standards and guidelines, including ADA, Section 508, WCAG 2.2, and WAI-ARIA roles.
The accessibility compliance for the DropDownList 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 DropDownList component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the DropDownList component:
| Properties | Functionalities |
|---|---|
| aria-haspopup | Indicates whether the DropDownList input element has a popup list or not. |
| aria-expanded | Indicates whether the popup list has expanded or not. |
| aria-selected | Indicates the selected option. |
| aria-readonly | Indicates the readonly state of the DropDownList element. |
| aria-disabled | Indicates whether the DropDownList component is in a disabled state or not. |
| aria-activedescendent | This attribute holds the ID of the active list item to focus its descendant child element. |
| aria-owns | This attribute contains the ID of the popup list to indicate popup as a child element. |
Keyboard interaction
You can use the following key shortcuts to access the DropDownList without interruptions.
| Keyboard shortcuts | Actions |
|---|---|
| Arrow Down | Selects the first item in the DropDownList when no item 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 when popup list opens. |
| Page Up | Scrolls up to the previous page and selects the first item when popup list opens. |
| Enter | Selects the focused item, and when it is in an open state the popup list closes. Otherwise, toggles the popup list. |
| Tab | Focuses on the next TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component. |
| Shift + tab | Focuses on the previous TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component. |
| Alt + Down | Opens the popup list. |
| Alt + Up | Closes the popup list. |
| Esc(Escape) | Closes the popup list 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 below sample, alt+t keys are used to focus the DropDownList 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 DropDownList component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the DropDownList component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the DropDownList component with accessibility tools.