Accessibility in Angular Mention component
14 Nov 20224 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. |
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<label id="comment" >Comments</label>
<div id="mentionElement" placeholder = "Type @ and tag user"></div>
<ejs-mention [dataSource]='userData' [target]='mentionTarget' [fields]='fields'></ejs-mention>`,
styleUrls: ['index.css']
})
export class AppComponent {
constructor() {
}
public 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" }
];
public fields: Object = {text:'Name'};
public mentionTarget: string = "#mentionElement";
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MentionModule } from '@syncfusion/ej2-angular-dropdowns';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,FormsModule, ReactiveFormsModule, MentionModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);