JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Accessibility in JavaScript TimePicker control

08 May 2023 / 3 minutes to read

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

The 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 in TimePicker, the combobox plays the role of input element, and the listbox plays the role of popup element.

  • 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 the 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. Disabled people like blind and those who have motor disabilities or birth defects use keyboard shortcuts more than the mouse.

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 with the TimePicker control.

Press To do this
Upper Arrow Navigate and select the previous item.
Down Arrow Navigate and select the next item.
Left Arrow Move the cursor towards arrow key pressed direction.
Right Arrow Move the cursor towards arrow key pressed direction.
Home Navigate and select the first item.
End Navigate and select the last item.
Enter Select the currently focused item and close the popup.
Alt + Upper Arrow Close the popup.
Alt + Down Arrow Open the popup.
Esc Close the popup.

In the below sample use the alt+t keys to focus the TimePicker component.

Source
Preview
app.ts
index.html
Copied to clipboard
import { TimePicker } from '@syncfusion/ej2-calendars';
import { enableRipple } from '@syncfusion/ej2-base';

//enable ripple style
enableRipple(true);

// creates the simple timepicker component
let timeObject: TimePicker = new TimePicker({
placeholder:'Select Time'
});
timeObject.appendTo('#element');

document.onkeyup = function (e) {
if (e.altKey && e.keyCode === 84 /* t */) {
    // press alt+t to focus the component by calling public method.
    timeObject.focusIn();
}
};
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 TimePicker control</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <!--style reference from the TimePicker component-->
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="style.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'>
        <input id='element' type="text" />
    </div>
</body>

</html>
Previous
Next