Accessibility in Blazor Mention Component
28 Dec 20224 minutes to read
The Mention component is designed to be compliant with WAI-ARIA
(Web Accessibility Initiative - Accessible Rich Internet Applications) specifications, which provide guidelines and standards for making web content more accessible to people with disabilities. To achieve WAI-ARIA
support, the Mention uses attributes such as aria-selected
and aria-activedescendent
.
The aria-selected
attribute is used to indicate that an element is currently selected or has been selected in the past, while the aria-activedescendent
attribute is used to indicate the currently active descendant element of a composite widget.
ARIA attributes
The Mention component uses the listbox role and option role to implement the Mention functionality. The listbox role represents a list of options, and the option role represents a single item in the list.
It uses the various ARIA attributes
(Accessible Rich Internet Applications) to denote the state of the component and provide additional information to assistive technologies such as screen readers. These attributes can help users who rely on assistive technologies to understand and interact with the Mention component more easily.
Here are some of the ARIA attributes
that might be used to denote the state of a mention list item:
Properties | Functionalities |
---|---|
aria-selected |
Indicates the currently selected option in the list of mention suggestions |
aria-activedescendent |
This attribute holds the ID of the active list item to focus its descendant child element. |
aria-owns |
Indicate that the Mention component owns or controls the popup list of mention suggestions. |
Keyboard interaction
You can use the following key shortcuts to access the Mention without interruptions. It allows users to quickly perform actions or navigate through an application using keyboard input.
Keyboard shortcuts | Actions |
---|---|
Down arrow | Focus the first item in the Mention list. Otherwise, focus the item next to the currently focused item. |
Up arrow | Focus the item previous to the currently focused 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. |
@using Syncfusion.Blazor.DropDowns
<SfMention TItem="Employees" DataSource="@data">
<TargetComponent>
<div id="commentsMention" placeholder="Type @@ and tag employee" ></div>
</TargetComponent>
<ChildContent>
<MentionFieldSettings Text="Name" Value="ID"></MentionFieldSettings>
</ChildContent>
</SfMention>
<style>
#commentsMention {
min-height: 100px;
border: 1px solid #D7D7D7;
border-radius: 4px;
padding: 8px;
font-size: 14px;
width: 600px;
}
div#commentsMention[placeholder]:empty:before {
content: attr(placeholder);
color: #555;
}
</style>
@code {
public class Employees
{
public string Name { get; set; }
public string ID { get; set; }
}
public List<Employees> data = new List<Employees>()
{
new Employees() { Name = "Andrew Fuller", ID = "1" },
new Employees() { Name = "Anne Dodsworth", ID = "2" },
new Employees() { Name = "Janet Leverling", ID = "3" },
new Employees() { Name = "Laura Callahan", ID = "4" },
new Employees() { Name = "Margaret Peacock", ID = "5" }
};
}