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.

RAZOR

@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" }
    };
}