Web accessibility makes web content and web applications more accessible for people with disabilities. Mention control 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 control 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. |
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. |
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Mention</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="styles.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="width:200px;">
<label style="font-size: 15px; font-weight: 600;">Comments</label>
<!--element which is the Mention target to list the suggestions-->
<div id="mentionElement" style="min-height: 100px; border: 1px solid #D7D7D7; border-radius: 4px; padding: 8px; font-size: 14px; width: 600px;"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>