Search results

Accessibility in JavaScript (ES5) Toolbar control

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.

//Initialize Toolbar component

var toolbar = new ej.navigations.Toolbar({
width: 300,
overflowMode: 'Popup',
items: [
    { type: 'Button', prefixIcon: 'e-cut-icon', text:'Cut', showTextOn:'Overflow' },
    { type: 'Button', prefixIcon: 'e-copy-icon', text:'Copy', showTextOn:'Overflow' },
    { type: 'Button', prefixIcon: 'e-paste-icon', text:'Paste', showTextOn:'Overflow' },
    { type: 'Separator'},
    { type: 'Button', prefixIcon: 'e-bold-icon', text:'Bold', showTextOn:'Overflow' },
    { type: 'Button', prefixIcon: 'e-underline-icon', text:'Underline', showTextOn:'Overflow' },
    { type: 'Button', prefixIcon: 'e-italic-icon', text:'Italic', showTextOn:'Overflow' },
    { type: 'Separator'},
    { type: 'Button', prefixIcon: 'e-ascending-icon', text:'A-Z Sort', showTextOn:'Overflow' },
    { type: 'Button', prefixIcon: 'e-descending-icon', text:'Z-A Sort', showTextOn:'Overflow' },

//Render initialized Toolbar component

document.onkeyup = function (e) {
    if (e.altKey && e.keyCode === 84 /* t */) {
        // press alt+t to focus the component.
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Toolbar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//" rel="stylesheet">
    <link href="" rel="stylesheet">
<script src="" type="text/javascript"></script>

    <div id="container">
        <div id="element"></div>
        <div id="result"></div>

var ele = document.getElementById('container');
if(ele) { = "visible";
<script src="index.js" type="text/javascript"></script>