Accessibility in React Mention component

02 Feb 2023 / 3 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]

Source

Preview

index.jsx

index.html

styles.css

index.tsx

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 {
    constructor() {
        super(...arguments);
        this.mentionTarget = '#mentionElement';
        this.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" }
        ];
        this.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'));

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React AutoComplete</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="./styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #sample {
            position: absolute;
            top: 15%;
            left: 10%;
        }
    </style>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

#mentionElement{
  min-height: 100px;
  border: 1px solid #D7D7D7; 
  border-radius: 4px; 
  padding: 8px; 
  font-size: 14px; 
  width: 600px;
}
#comment{
  font-size: 15px; 
  font-weight: 600;
}
div#mentionElement[placeholder]:empty:before {
  content: attr(placeholder);
}

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]