Accessibility in Blazor TimePicker Component
17 Dec 20223 minutes to read
The web accessibility makes web applications and its content more accessible to people with disabilities without any barriers. It especially 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
.
In the 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: Creates a parent/child relationship between two DOM element in the accessibility layer.
-
aria-activedescendent: Helps in managing the current active child of the TimePicker component.
-
role: 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.
NOTE
It supports the following list of shortcut keys to interact with the TimePicker component:
Keys | Description |
---|---|
Upper Arrow | Navigates and selects the previous item. |
Down Arrow | Navigates and selects the next item. |
Left Arrow | Moves the cursor towards arrow key pressed direction. |
Right Arrow | Moves the cursor towards arrow key pressed direction. |
Home | Navigates and selects the first item. |
End | Navigates and selects the last item. |
Enter | Selects the currently focused item and close the popup. |
Alt + Upper Arrow | Closes the popup. |
Alt + Down Arrow | Opens the popup. |
Esc | Closes the popup. |
NOTE
To focusout the TimePicker component, use the
t
keys. For additional information about native event, click here.
@using Syncfusion.Blazor.Calendars
<SfTimePicker TValue="DateTime?" @onkeypress="@(e => KeyPressed(e))" @ref="TimeObj"></SfTimePicker>
@code {
public SfTimePicker<DateTime?> TimeObj;
public void KeyPressed(KeyboardEventArgs args)
{
if (args.Key == "t")
{
this.TimeObj.FocusOutAsync();
}
}
}