Keyboard Navigation
28 Jun 20171 minute to read
You can use Keyboard shortcut keys as an alternative to the mouse in Accordion widget using allowKeyboardNavigation property. However, you will have to focus the control to enable the keyboard navigation. Accordion Widget allows you to perform all kind of actions using keyboard shortcuts.
List of Keyboard shortcut keys are shown below,
| Shortcut Key | Description |
|---|---|
| Access key + j | Focuses into the accordion control |
| Up | Moves to previous panel |
| Down | Moves to next panel |
| Left | Moves to previous panel |
| Right | Moves to next panel |
| Home | Moves to the first accordion panel |
| End | Moves to the last accordion panel |
Configure keyboard interaction
The following steps explains how to enable keyboard interaction for an Accordion widget.
In an HTML page, define a <div> element that is a container for Accordion widget and add the contents correspondingly.
<div id="accordion" style="width: 500px" ej-accordion e-allowkeyboardnavigation="true">
</div>NOTE
Need to set focus on Accordion component to access the keyboard shortcuts.