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.
Source
Preview
index.ts
index.html
import {Toolbar} from '@syncfusion/ej2-navigations';
let toolbar: Toolbar = new 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' },
      ]
});
toolbar.appendTo('#element');
document.onkeyup = function (e) {
    if (e.altKey && e.keyCode === 84 /* t */) {
        // press alt+t to focus the component.
        toolbar.element.focus();
    }
};
<!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="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id='element'></div>
        <br/><br/>
        <div id='result'></div>
    </div>
</body>

</html>