Keyboard Navigation
By default, the keyboard navigation of the Kendo UI Gantt for Angular is disabled. To enable keyboard navigation, set the navigable attribute to true. The main interactable parts of the Gantt are reachable through the keyboard - the Toolbar, TreeList, Splitter and Timeline.
Basic Concepts
According to the accessibility guidelines for the treegrid and tree roles, only one of the focusable elements in each of the two sections has to be included in the Tab sequence of the page.
To control which elements will be accessible through the Tab key, the Gantt implements a roving tabindex for both the TreeList cells and the Timeline tasks. All other focusable elements receive a tabindex of "-1" and get excluded from the Tab sequence.
Available Shortcuts
When the Toolbar is focused, left and right arrow keys move focus between the focusable Toolbar elements; focus is wrapped.
When the TreeList is focused, the following keyboard commands are available:
| SHORTCUT | DESCRIPTION |
|---|---|
Right Arrow | Moves the focus one cell to the right. If the focus is on the right-most cell in the row, the focus does not move. |
Left Arrow | Moves the focus one cell to the left. If the focus is on the left-most cell in the row, the focus does not move. |
Down Arrow | Moves the focus one cell down. If the focus is on the bottom-most cell in the column, the focus does not move. |
Up Arrow | Moves the focus one cell up. If the focus is on the top-most cell in the column, the focus does not move. |
Home | Moves the focus to the first focusable cell in the row. |
End | Moves the focus to the last focusable cell in the row. |
Ctrl & Home | Moves the focus to the first cell in the first row. |
Ctrl & End | Moves the focus to the last cell in the last row. |
Alt & Right Arrow | Expands the current row, if applicable. |
Alt & Left Arrow | Collapses the current row, if applicable. |
Enter | Expands or collapses the current row, if pressed on an expandable, non-editable column; triggers the cell click action. |
Digit 1, Digit 2, Digit 3 | Changes the currently active view to the one at the corresponding position. |
When a Gantt cell contains focusable components, the Gantt supports the following shortcuts:
| SHORTCUT | DESCRIPTION |
|---|---|
Enter | Disables the keyboard navigation of the Gantt and places the focus on the first widget. |
Escape | Restores the keyboard navigation of the Gantt. If the content was in the process of editing, the unsaved edits are removed. |
Tab | Moves the focus to the next focusable component in the current row. |
Shift & Tab | Moves the focus to the previous focusable component in the current row. |
When the Timeline is focused, the following keyboard commands are available:
| SHORTCUT | DESCRIPTION |
|---|---|
Right Arrow | Moves the scrollable content to the right. |
Left Arrow | Moves the scrollable content to the left. |
Down Arrow | Moves the focus one task down. If the focus is on the bottom-most taks, the focus does not move. |
Up Arrow | Moves the focus one task up. If the focus is on the top-most taks, the focus does not move. |
Home | Moves the focus to the first task. |
End | Moves the focus to the last task. |
Alt & Right Arrow | Expands the current task, if applicable. |
Alt & Left Arrow | Collapses the current task, if applicable. |
Enter | Triggers the task click action. |
Digit 1, Digit 2, Digit 3 | Changes the currently active view to the one at the corresponding position. |
When Selection is enabled, the both the Gantt TreeList and Timeline supports the following shortcuts:
| SHORTCUT | DESCRIPTION |
|---|---|
Space | Selects the current row or task. |
Ctrl & Space | Toggles the selection of the current row or task. |
Controlling the Focus
To control the focus in the Gantt, use any of the following methods:
focus()- focuses the last active section of the Gantt (TreeList or Timeline)focusCell(rowIndex, cellIndex)- focuses the targeted cell in the TreeListfocusTask(index)- focuses the target task in the Timeline
The following example demonstrates how to use the focus related methods.