New to Kendo UI for Angular? Start a free 30-day trial
Keyboard Navigation
By default, the keyboard navigation of the Kendo UI TileLayout is disabled. To enable the keyboard navigation, and include all TileLayout items in the tab sequence, set the navigable option to true.
Managing Focus
When the navigable option is set to true, the tiles receive tabindex "0" and are included in the Tab sequence. Pressing Enter will trap the focus inside the TileLayoutItem content, and all focusable content will follow the natural tab sequence. Pressing Escape will return the focus to the wrapper element.
The TilaLayout supports the following keyboard shortcuts:
| SHORTCUT | DESCRIPTION |
|---|---|
Tab | Moves focus to the next tile. If focus is on the last tile, focuses the next focusable element on the page. |
Shift + Tab | Moves focus to the previous tile. If focus is on the first tile, focuses the previous focusable element before the TileLayout. |
Enter | Focuses the first focusable element within the tile. Focus is trapped and wrapped within the tile content and follows its natural Tab sequence. |
Escape | Moves focus back to the TileLayout item wrapper. |
Shift + Right Arrow | Switches the focused tile with the next one. |
Shift + Left Arrow | Switches the focused tile with the previous one. |
Ctrl / Cmd + Right Arrow | Increments the focused tile width with one column (to a maximum of the preset columns count). |
Ctrl / Cmd + Left Arrow | Decrements the focused tile width with one column (to a minimum of 1). |
Ctrl / Cmd + Down Arrow | Increments the focused item height with one row. |
Ctrl / Cmd + Up Arrow | Decrements the focused item height with one row (to a minimum of 1). |
The following example demonstrates the available TileLayout keyboard navigation shortcuts in action.
Example
View Source
Change Theme:
