Accessibility in React Mention component
24 Jan 202414 minutes to read
Web accessibility makes web content and web applications more accessible for people with disabilities. Mention component provides built-in compliance with WAI-ARIA specifications. The WAI-ARIA support is achieved using the attributes such as aria-selected and aria-activedescendent.
The Mention 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 Mention 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 Mention component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Mention component:
| Properties | Functionalities |
|---|---|
| aria-selected | Indicates the selected option. |
| 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 Mention without interruptions.
| Keyboard shortcuts | Actions |
|---|---|
| Arrow Down | Selects the first item in the Mention list. Otherwise, selects the item next to the currently selected item. |
| Arrow Up | Selects the item previous to the currently selected one. |
| Esc(Escape) | Closes the popup list when it is in an open state. |
| Enter | Selects the focused item, and when it is in an open state the popup list closes. |
| Tab | Focuses on the next TabIndex element on the page when the popup is closed. Otherwise, inserts the selected popup list item and closes the popup list. |
[Class-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
export default class App extends React.Component {
mentionTarget = '#mentionElement';
userData = [
{ Name: "Andrew Fuller", ID: "1" },
{ Name: "Anne Dodsworth", ID: "2" },
{ Name: "Janet Leverling", ID: "3" },
{ Name: "Laura Callahan", ID: "4" },
{ Name: "Margaret Peacock", ID: "5" }
];
fields = { text: 'Name' };
render() {
return (<div id='mention_default'>
<table>
<tr>
<td>
<label id="comment">Comments</label>
<div id="mentionElement" placeholder='Type @ and tag user'></div>
</td>
</tr>
</table>
<MentionComponent target={this.mentionTarget} dataSource={this.userData} fields={this.fields}></MentionComponent>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
export default class App extends React.Component<{}, {}> {
private mentionTarget: string = '#mentionElement';
private userData: { [key: string]: Object }[] = [
{ Name : "Andrew Fuller", ID : "1" },
{ Name : "Anne Dodsworth" , ID : "2" },
{ Name : "Janet Leverling" , ID : "3" },
{ Name : "Laura Callahan" , ID : "4" },
{ Name : "Margaret Peacock" , ID : "5" }
];
private fields: Object = { text: 'Name'}
public render() {
return (
<div id='mention_default'>
<table>
<tr>
<td>
<label id="comment">Comments</label>
<div id="mentionElement" placeholder='Type @ and tag user' ></div>
</td>
</tr>
</table>
<MentionComponent target={this.mentionTarget} dataSource={this.userData} fields={this.fields }></MentionComponent>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));[Functional-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
function App() {
let mentionTarget = '#mentionElement';
let userData = [
{ Name: "Andrew Fuller", ID: "1" },
{ Name: "Anne Dodsworth", ID: "2" },
{ Name: "Janet Leverling", ID: "3" },
{ Name: "Laura Callahan", ID: "4" },
{ Name: "Margaret Peacock", ID: "5" }
];
let fields = { text: 'Name' };
return (<div id='mention_default'>
<table>
<tr>
<td>
<label id="comment">Comments</label>
<div id="mentionElement" placeholder='Type @ and tag user'></div>
</td>
</tr>
</table>
<MentionComponent target={mentionTarget} dataSource={userData} fields={fields}></MentionComponent>
</div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
function App (){
let mentionTarget: string = '#mentionElement';
let userData: { [key: string]: Object }[] = [
{ Name : "Andrew Fuller", ID : "1" },
{ Name : "Anne Dodsworth" , ID : "2" },
{ Name : "Janet Leverling" , ID : "3" },
{ Name : "Laura Callahan" , ID : "4" },
{ Name : "Margaret Peacock" , ID : "5" }
];
let fields: Object = { text: 'Name'}
return (
<div id='mention_default'>
<table>
<tr>
<td>
<label id="comment">Comments</label>
<div id="mentionElement" placeholder='Type @ and tag user' ></div>
</td>
</tr>
</table>
<MentionComponent target={mentionTarget} dataSource={userData} fields={fields }></MentionComponent>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('sample'));Ensuring accessibility
The Mention component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the Mention component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Mention component with accessibility tools.