How can I help you?
Accessibility in React Multi select component
21 Feb 202618 minutes to read
The MultiSelect 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 MultiSelect component adheres to established accessibility standards and guidelines, including ADA, Section 508, WCAG 2.2, and WAI-ARIA roles.
The accessibility compliance for the MultiSelect 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 MultiSelect component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the MultiSelect component:
| Properties | Functionalities |
|---|---|
| aria-haspopup | Indicates whether the MultiSelect 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 MultiSelect element. |
| aria-disabled | Indicates whether the MultiSelect 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 MultiSelect without interruptions.
| Keyboard shortcuts | Actions |
|---|---|
| Arrow Down | Set focus at the first item in the MultiSelect when no item selected. Otherwise, moves focus next to the currently selected item. |
| Arrow Up | Moves focus previous to the currently selected one. |
| Page Down | Scrolls down to the next page and set focus to the first item when popup list opens. |
| Page Up | Scrolls up to the previous page and set focus to the first item when popup list opens. |
| Enter | Selects the focused item, and popup list closes when it is in open state. |
| 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 | set focus to the first item. |
| End | set focus to the last item. |
In the below sample, focus the MultiSelect component using alt+t keys.
[Class-component]
import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
// instance of MultiSelect component
multiSelectObj;
// 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' };
componentDidMount() {
const proxy = this;
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
proxy.multiSelectObj.inputElement.focus();
}
};
}
render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="mtselement" ref={(scope) => { this.multiSelectObj = scope; }} popupHeight='200px' fields={this.fields} dataSource={this.gameList} placeholder="Select a game"/>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// instance of MultiSelect component
public multiSelectObj: MultiSelectComponent | null;
// 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' };
public componentDidMount() {
const proxy = this;
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
(proxy.multiSelectObj as any).inputElement.focus()
}
};
}
public render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="mtselement" ref={(scope) => { this.multiSelectObj = scope; }} popupHeight='200px' fields={this.fields} dataSource={this.gameList} placeholder="Select a game" />
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));[Functional-component]
import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// instance of MultiSelect component
let multiSelectObj;
// 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' };
React.useEffect(() => {
const proxy = this;
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
proxy.multiSelectObj.inputElement.focus();
}
};
}, []);
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="mtselement" ref={(scope) => { multiSelectObj = scope; }} popupHeight='200px' fields={fields} dataSource={gameList} placeholder="Select a game"/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// instance of MultiSelect component
let multiSelectObj: MultiSelectComponent | null;
// 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' };
React.useEffect(() => {
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
(multiSelectObj as any).inputElement.focus()
}
};
}, []);
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="mtselement" ref={(scope) => {multiSelectObj = scope; }} popupHeight='200px' fields={fields} dataSource={gameList} placeholder="Select a game" />
);
}
ReactDOM.render(<App />, document.getElementById('sample'));Ensuring accessibility
The MultiSelect component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the MultiSelect component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the MultiSelect component with accessibility tools.