# Keyboard Navigation

## Keyboard Shortcuts

The Gantt component is a container that consists of 4 logically separated structural elements:

* Toolbar (`role="toolbar"`);
* Splitter (`role="separator"`);
* TreeList (`role="treegrid"`);
* TimeLine (`role="tree"`)

Each of them is part of the page tab sequence and can be navigated to using the `Tab` key of the keyboard. The list above illustrates the **focus sequence**.

The `Toolbar` implements the keyboard navigation specification for a `ToolBar component`:

[ToolBar  specification](https://www.telerik.com/kendo-react-ui-develop/components/buttons/toolbar/keyboard-navigation)

The `Splitter` implements the keyboard navigation specification for a `Splitter component`

[Splitter  specification](https://www.telerik.com/kendo-react-ui-develop/components/layout/splitter/keyboard-navigation)

### Gantt shortcuts

| Shortcut                   | Behavior                                         |
| -------------------------- | ------------------------------------------------ |
| `Alt/Opt(Mac) + 1,2,3,...` | navigates to the view with the respective number |
| `F10`                      | Focuses the ToolBar.                             |

### TreeList shortcuts

The `TreeList` implements the keyboard navigation specification for a `TreeList component`:

[TreeList  specification](https://www.telerik.com/kendo-react-ui-develop/components/treelist/keyboard-navigation)

| Shortcut      | Behavior                                                                                                                                          |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Tab`         | Moves focus to the corresponding task in the TimeLine.                                                                                            |
| `Shift + Tab` | If focus has been previously on the same line in the treelist, moves focus to last focused cell. Otherwise, focus the last cell on the same line. |

### TimeLine Shortcuts

| Shortcut                     | Behavior                                                                                                                                    |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| `Home`                       | Moves focus to first task.                                                                                                                  |
| `End`                        | Moves focus to the last task.                                                                                                               |
| `Up Arrow`                   | Moves focus to previous task.                                                                                                               |
| `Down Arrow`                 | Moves focus to the next task.                                                                                                               |
| `Left Arrow`                 | Scrolls the view to the left.                                                                                                               |
| `Right Arrow`                | Scrolls the view to the right.                                                                                                              |
| `Enter`                      | Gantt Popup Form is opened to provide editing of the task. The dependencies and field edit is made. On close focus is returned on the task. |
| `Delete`                     | The task gets deleted. The focus is moved to the previous task.                                                                             |
| `Alt/Opt(Mac) + Right Arrow` | The task is expanded, if it contains child tasks. The task should remain in focus and the timeline should be scrolled to it.                |
| `Alt/Opt(Mac) + Left Arrow`  | The task is collapsed, if it contains child tasks. The task should remain in focus and the timeline should be scrolled to it.               |

[Demo Source](https://demos.telerik.com/kendo-react-ui/gantt/keyboard-navigation/func/source.txt)

## See Also

* [API Reference of the Gantt](https://www.telerik.com/kendo-react-ui-develop/components/gantt/api/gantt)
* [API Index of the Gantt](https://www.telerik.com/kendo-react-ui-develop/components/gantt/api)
* [navigatable](https://www.telerik.com/kendo-react-ui-develop/components/gantt/api/ganttprops#navigatable)
* [Accessibility in KendoReact](https://www.telerik.com/kendo-react-ui-develop/components/accessibility)
* [Accessibility Compliance and Keyboard Support in KendoReact](https://www.telerik.com/kendo-react-ui-develop/components/accessibility/accessibility-compliance)