Accessibility in Angular Daterangepicker component

17 Nov 20224 minutes to read

The web accessibility makes web content and web applications more accessible for disabled people.
It especially helps in dynamic content change and development of advanced user interface controls with AJAX, HTML, JavaScript, and related technologies.
DateRangePicker provides built-in compliance with WAI-ARIA specifications. WAI-ARIA supports is achieved through the attributes like aria-expanded, aria-disabled, aria-activedescendant applied to the input element.

To know about the accessibility of Calendar refer to the Calendar’s Accessibility section.

It helps disabled persons by providing information about the widget for assistive technology in the screen readers.
DateRangePicker component contains grid role and grid cell for each day cell.

• Aria-expanded: attributes indicates the state of a collapsible element.

• Aria-disabled: Indicates the disabled state of the DateRangePicker component.

Keyboard Interaction

You can use the following keys to interact with the DateRangePicker.
This component implements the keyboard navigation support by following the WAI-ARIA practices.

It supports the following list of shortcut keys:

Input Navigation

Before opening the popup, use the below list of keys to control the popup element.

Press	To do this
Alt + Down Arrow	Opens the popup.
Alt + Up Arrow	Closes the popup (if component’s input element is in focused state).
Esc	closes the popup.

Calendar Navigation

Use the following list of keys to navigate the currently focused Calendar after the popup has opened.

| Press | To do this |
| — | — |
| Upper Arrow | Focuses the same day of the previous week. |
| Down Arrow | Focuses the same day of the next week. |
| Left Arrow | Focuses the day before. |
| Right Arrow | Focuses the next day. |
| Home | Focuses the first day of the month. |
| End | Focuses the last day of the month. |
| Page Up | Focuses the same date of the previous month. |
| Page Down | Focuses the same date of the next month. |
| Enter | Selects the currently focused date. |
| Shift + Page Up | Focuses the same date for the previous year. |
| Shift + Page Down | Focuses the same date for the next year. |
| Control + Home | Focuses the first date of the current year. |
| Control + End | Focuses the last date of the current year. |
| Alt + Right | Focuses through out the pop-up container in forward direction. |
| Alt + Left | Focuses through out the pop-up container in backward direction. |

To focus the DateRangePicker component, use the alt+t keys.

app.component.ts

import { Component,HostListener,ViewChild } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
        <ejs-daterangepicker #ejDateRangePicker placeholder='Select a range'></ejs-daterangepicker>
        `
})

export class AppComponent {
   @ViewChild('ejDateRangePicker') ejDateRangePicker: CalendarComponent;
   @HostListener('document:keyup', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) {
    if (event.altKey && event.keyCode === 84 /* t */) {
        // press alt+t to focus the control.
        this.ejDateRangePicker.inputElement.focus();
    }
  }
    constructor() {
    }
}

app.module.ts

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


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        DateRangePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);