Search results

Accessibility

The Toolbar component has been designed, keeping in mind the WAI-ARIA specifications, and applying the WAI-ARIA roles, states, and properties along with keyboard support for people who use assistive devices. WAI-ARIA accessibility support is achieved through attributes like aria-orientation, aria-disabled, and aria-haspopup. It provides information about elements in a document for assistive technology. The component implements keyboard navigation support by following the WAI-ARIA practices, and has been tested in major screen readers.

ARIA attributes

The Toolbar element is assigned the role of toolbar.

Property Functionalities
role=“toolbar” This attribute added to the ToolBar element describes the actual role of the element.
aria-orientation Indicates the ToolBar orientation. Default value is horizontal.
aria-haspopup Indicates the popup mode of the Toolbar. Default value is false. When popup mode is enabled, attribute value has to be changed to true.
aria-disabled Indicates the disabled state of the ToolBar.

Keyboard interaction

Keyboard navigation is enabled, by default. Possible keys are:

Key Description
Left Focuses the previous element.
Right Focuses the next element.
Enter When focused on a ToolBar command, clicking the key triggers the click of Toolbar element. When popup drop-down icon is focused, the popup opens.
Esc(Escape) Closes popup.
Down Focuses the next popup element.
Up Focuses the previous popup element.
razor
accessibility.cs
@Html.EJS().Toolbar("defaultToolbar").Items(ViewBag.Items).Render()
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Navigations;

namespace EJ2MVCSampleBrowser.Controllers.Toolbar
{
    public partial class ToolbarController : Controller
    {
        public ActionResult Example()
        {
            List<ToolbarItem> popItems = new List<ToolbarItem>();
            popItems.Add(new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-cut-icon", Text = "Cut", ShowTextOn = DisplayMode.Overflow });
            popItems.Add(new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-copy-icon", Text = "Copy", ShowTextOn = DisplayMode.Overflow });
            popItems.Add(new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-cut-icon", Text = "Paste", ShowTextOn = DisplayMode.Overflow });
            popItems.Add(new ToolbarItem { Type = ItemType.Separator });
            popItems.Add(new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-bold-icon", Text = "Bold", ShowTextOn = DisplayMode.Overflow });
            popItems.Add(new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-underline-icon", Text = "Underline", ShowTextOn = DisplayMode.Overflow });
            popItems.Add(new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-italic-icon", Text = "Italic", ShowTextOn = DisplayMode.Overflow });
            popItems.Add(new ToolbarItem { Type = ItemType.Separator });
            popItems.Add(new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-ascending-icon", Text = "A-Z Sort", ShowTextOn = DisplayMode.Overflow });
            popItems.Add(new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-descending-icon", Text = "Z-A Sort", ShowTextOn = DisplayMode.Overflow });

            ViewBag.Items = popItems;

            return View();
        }
    }

}