Accessibility in React Mention component
2 Feb 202312 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
.
ARIA attributes
The Mention component uses the Listbox
role where each list item has an option
role. The following ARIA attributes
denote the Mention state.
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'));