Keyboard Navigation
By default, the keyboard navigation of the Kendo UI TreeList for Angular is disabled. To enable keyboard navigation, set the navigable attribute to true.
The TreeList supports the following keyboard shortcuts:
| 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. |
Page Down | Scrolls to the next page of data. If paging is configured, loads the next page of data, if any. |
Page Up | Scrolls to the previous page of data. If paging is configured, loads the previous page of data, if any. |
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. |
When Selection is enabled, the TreeList supports the following shortcuts:
| SHORTCUT | DESCRIPTION |
|---|---|
Space | Selects the current row or cell. |
Ctrl & Space | Toggles the selection of the current row or cell. |
Shift & Space | Selects a range of rows or cells. |
Ctrl & A | Selects all rows or cells. |
When a TreeList cell contains focusable components, the TreeList supports the following shortcuts:
| SHORTCUT | DESCRIPTION |
|---|---|
Enter | Disables the keyboard navigation of the TreeList and places the focus on the first widget. |
Escape | Restores the keyboard navigation of the TreeList. 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. |
| Alphanumeric keys | If the cell contains editable content, places the focus in an input field—for example, a textbox. |
The TreeList filter row supports the following keyboard shortcuts*:
| SHORTCUT | DESCRIPTION |
|---|---|
Enter | Enters in the td and focuses the first focusable element in it. All filter row components gain tabindex = 0. |
Arrow Keys | td elements receive focus as standard navigation in the TreeList. |
Tab | Goes forward through the filter row components. |
Shift + Tab | Goes backwards through the filter row components. |
The TreeList Pager supports the following keyboard shortcuts*:
| SHORTCUT | DESCRIPTION |
|---|---|
Enter | When the Pager wrapper is focused, moves the focus to the first focusable pager element. When an inner Pager element is focused, triggers the default action, associated with this element. |
Escape | When an inner Pager element is focused, brings the focus to the Pager wrapper. If the focused inner component has an open popup, Escape will close the popup. Pressing Escape again will focus the Pager wrapper. |
Tab | When an inner Pager element is focused, moves the focus between the focusable Pager elements sequentially. The focus is trapped and tabbing out of the last focusable element, focuses the first focusable element. |
Shift & Tab | When an inner Pager element is focused, moves the focus between the focusable Pager elements sequentially in reversed order. The focus is trapped and shift-tabbing out of the first focusable element, focuses the last focusable element. |
Left Arrow or Page Up | When the Pager wrapper is focused, loads the previous page of data, if any. |
Right Arrow or Page Down | When the Pager wrapper is focused, loads the next page of data, if any. |
Home | When the Pager wrapper is focused, loads the first page of data (if the current page is not the first one). |
End | When the Pager wrapper is focused, loads the last page of data (if the current page is not the last one). |
* All inner components within the Pager follow their own keyboard navigation behavior when focused.
The TreeList toolbar supports the following keyboard shortcuts*:
| SHORTCUT | DESCRIPTION |
|---|---|
Left / Right Arrow | Focuses the previous / next focusable element in the toolbar. Focus is wrapped, meaning it will go from the last to first focusable element and vice-versa depending on the end user action. |
Tab | Focuses the next navigable TreeList section, or the next focusable element on the page. |
Shift + Tab | Focuses the previous navigable TreeList section, or the previous focusable element on the page. |
Basic Concepts
According to the accessibility guidelines, only one of the focusable elements which are contained by the TreeList has to be included in the Tab sequence of the page.
To control which elements will be accessible through the Tab key, the TreeList implements a roving tabindex. All other focusable elements receive a tabindex of "-1" and get excluded from the Tab sequence.
To implement this requirement, all elements which can receive focus either through the Tab sequence or through direct interaction must be decorated with the kendoTreeListFocusable directive. It registers the focusable elements with the TreeList and provides an interface for controlling their focused state and tabindex. The directive can be applied to both regular input elements, such as inputs and buttons, and composite components, such as drop-down lists. Based on the user actions, the TreeList will include the focused (selected) element in the Tab sequence. Typically, this element is one single cell at a time but when the TreeList is in editing mode, it can also be an entire row.
The user can move the focus from cell to cell by using the available shortcut keys. If a cell contains a single focusable element, such as a button or a checkbox, the focus will be applied directly to the element. This behavior allows the user to interact with it without having to enter the cell first.
The following example demonstrates how to decorate a button inside a template by using kendoTreeListFocusable. The button will be excluded from the page Tab sequence, but can still be focused by using the Arrow keys inside the TreeList.
Controlling the Focus
To control the focus in the TreeList, use any of the following methods:
You can query the cell and row which are currently focused by using the activeCell and activeRow properties. When the TreeList has no focused elements, these properties are undefined.
The following example demonstrates how to use the focus methods to implement the Tab key navigation with in-cell editing.
