Accessibility in Angular TimePicker component

The web accessibility makes web applications and its content more accessible to people with disabilities without any barriers. Especially it tracks the dynamic value changes and DOM changes.

TimePicker component has covered the WAI-ARIA specifications with the following list of WAI-ARIA attributes aria-haspopup, aria-selected, aria-disabled, aria-activedescendant, aria-expanded, aria-owns, and aria-autocomplete.

Here, the combobox as a role for input element and listbox as a role for popup element in the TimePicker.

• Aria-haspopup : Provides the information about whether this element display a pop-up window or not.
• Aria-selected : Indicates the current selected value of the TimePicker component.
• Aria-disabled : Indicates disabled state of the TimePicker component.
• Aria-expanded : Indicates expanded state of the popup.
• Aria-autocomplete : Indicates whether user input completion suggestions are provided or not.
• Aria-owns : Attribute that creates a parent/child relationship between two DOM element in the accessibility layer.
• Aria-activedescendent : Attribute that helps in managing the current active child of the TimePicker component.
• Role : Attribute that gives assistive technology information for handling each element in a widget.

Keyboard Interaction

Keyboard accessibility is one of the most important aspects of web accessibility. It will be more useful to all the computer users, as they often allow to interact keyboard more than a mouse. Among people with disabilities like blind or who have motor disabilities are also can make frequent use of keyboard shortcuts.

The TimePicker component has built-in keyboard accessibility support by following the WAI-ARIA practices.

It supports the following list of shortcut keys to interact the TimePicker control.

The following sample use the alt+t keys to focus the TimePicker component.

import { Component, HostListener, ViewChild } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

//enable ripple style
enableRipple(true);

@Component({
selector: 'app-root',
template: `
    <ejs-timepicker #keyboard [value]='dateValue'></ejs-timepicker>
    `
})

export class AppComponent {
   @ViewChild('keyboard') timeObj: TimePickerComponent;
public dateValue: Date = new Date();
@HostListener('document:keyup', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
if (event.altKey && event.keyCode === 84 /* t */) {
    // press alt+t to focus the control by calling public method.
    this.timeObj.focusIn();
}
  }
constructor() {
}
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TimePickerModule
    ],
    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);