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.
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' showTextOn ='Overflow'></e-item>
<e-item text='Copy' prefixIcon = 'e-copy-icon' showTextOn ='Overflow'></e-item>
<e-item text='Paste' prefixIcon = 'e-paste-icon' showTextOn ='Overflow'></e-item>
<e-item type='Separator'></e-item>
<e-item text='Undo' prefixIcon = 'e-bold-icon' showTextOn ='Overflow'></e-item>
<e-item text='Redo' prefixIcon = 'e-underline-icon' showTextOn ='Overflow'></e-item>
<e-item text='Redo' prefixIcon = 'e-italic-icon' showTextOn ='Overflow'></e-item>
<e-item type='Separator'></e-item>
<e-item text='A-Z Sort' prefixIcon = 'e-ascending-icon' showTextOn ='Overflow'></e-item>
<e-item text='Z-A Sort' prefixIcon = 'e-descending-icon' 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 { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ToolbarModule
],
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);