Search results

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
Copied to clipboard
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'));
Copied to clipboard
<!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>
Copied to clipboard
#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);
}
Copied to clipboard
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]

Source
Preview
index.jsx
index.html
styles.css
index.tsx
Copied to clipboard
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'));
Copied to clipboard
<!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>
Copied to clipboard
#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);
}
Copied to clipboard
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'));