Keyboard Navigation
The Kendo UI for Angular TileLayout provides keyboard navigation support to enhance accessibility and improve user experience. Keyboard navigation is enabled by default, allowing users to navigate through all TileLayout items using keyboard shortcuts. This feature is particularly useful for users who rely on keyboard navigation or assistive technologies.
Starting with Kendo UI for Angular v19.0.0, the TileLayout keyboard navigation is enabled by default. To disable it, set the
navigableproperty tofalse.
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.