The Angular 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.
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 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. |
import { Component, ViewChild } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-container',
template: `
<ejs-toolbar>
<e-items>
<e-item text='Cut' prefixIcon = 'e-cut-icon tb-icons' showTextOn ='Overflow'></e-item>
<e-item text='Copy' prefixIcon = 'e-copy-icon tb-icons' showTextOn ='Overflow'></e-item>
<e-item text='Paste' prefixIcon = 'e-paste-icon tb-icons' showTextOn ='Overflow'></e-item>
<e-item type='Separator'></e-item>
<e-item text='bold' prefixIcon = 'e-bold-icon tb-icons' showTextOn ='Overflow'></e-item>
<e-item text='underline' prefixIcon = 'e-underline-icon tb-icons' showTextOn ='Overflow'></e-item>
<e-item text='italic' prefixIcon = 'e-italic-icon tb-icons' showTextOn ='Overflow'></e-item>
<e-item type='Separator'></e-item>
<e-item text='A-Z Sort' prefixIcon = 'e-ascending-icon tb-icons' showTextOn ='Overflow'></e-item>
<e-item text='Z-A Sort' prefixIcon = 'e-descending-icon tb-icons' showTextOn ='Overflow'></e-item>
</e-items>
</ejs-toolbar>
`
})
export class AppComponent {
@ViewChild('element') element;
ngAfterViewInit() {
document.onkeyup = function (e) {
if (e.altKey && e.keyCode === 84) {
document.getElementById('Toolbar').focus();
}
};
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ToolbarModule, TooltipModule
],
declarations: [AppComponent ],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);