# Keyboard Navigation

## Managing the Focus

* Initial focus - When opened, the Window should be focused.
* Action buttons are accessed with `Tab` key
* Tab Key Trap is implemented for modal windows

## Keyboard Shortcuts

| Shortcut                     | Behavior                                                                                                                  |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| `Alt/Opt(Mac) + DownArrow`   | Minimizes or restores the state, if the focused element is the window                                                     |
| `Alt/Opt(Mac) + UpArrow`     | Maximizes or restores the state, if the focused element is the window                                                     |
| `Arrow Keys`                 | Move the window to the respective direction (UP                                                                           |
| `Ctrl/Cmd(Mac) + UpArrow`    | Decreases the height of the window triggering the resizing capabilities. Applicable only when the component is resizable. |
| `Ctrl/Cmd(Mac) + DownArrow`  | Increases the height of the window triggering the resizing capabilities. Applicable only when the component is resizable. |
| `Ctrl/Cmd(Mac) + LeftArrow`  | Decreases the width of the window triggering the resizing capabilities. Applicable only when the component is resizable.  |
| `Ctrl/Cmd(Mac) + RightArrow` | Increases the width of the window triggering the resizing capabilities. Applicable only when the component is resizable.  |
| `Escape`                     | Closes the window. When the window is modal, the focus should be returned to the element that triggered the open.         |

## Resources

[ARIA Authoring Practices: Modal Dialog Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)

[Demo Source](https://demos.telerik.com/kendo-react-ui/dialogs/window/overview/func/source.txt)

## See Also

* [Learn about KendoReact Free.](https://www.telerik.com/kendo-react-ui-develop/components/getting-started/free-vs-premium)

* [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)