Accessibility in Vue Mention component
16 Mar 20235 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
16 Mar 20235 minutes to read
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. |
<template>
<div id="app">
<label id="comment" >Comments</label>
<div id="mentionElement" placeholder = "Type @ and tag user"></div>
<ejs-mention id='defaultMention' :target='target' :dataSource='userData' :fields='fields'></ejs-mention>
</div>
</template>
<script>
import Vue from "vue";
import { MentionPlugin } from "@syncfusion/ej2-vue-dropdowns";
Vue.use(MentionPlugin);
export default {
data: function() {
return {
target: "#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'}
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-list/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/bootstrap5.css";
#app {
color: #008cff;
height: 40px;
left: 15%;
position: absolute;
top: 10%;
width: 30%;
}
#comment {
font-size: 15px;
font-weight: 600;
}
#mentionElement {
min-height: 100px;
border: 1px solid #D7D7D7;
border-radius: 4px;
padding: 8px;
font-size: 14px;
width: 600px;
}
div#mentionElement[placeholder]:empty:before {
content: attr(placeholder);
}
</style>