# Keyboard Navigation

The dialog component should implement tab key trap to allow navigation in the dialog. Only the `x` button in the dialog element is included in the tab sequence. The dialog itself is not a focusable element. By default, on open the focus goes to the first focusable element in the content, or the primary action button if there is no focusable element in the content.

## Keyboard Shortcuts

### Button element

| Shortcut | Behavior                                                                                                          |
| -------- | ----------------------------------------------------------------------------------------------------------------- |
| `Tab`    | Focus is moved between the elements in the dialog and is trapped into the component.                              |
| `Escape` | Closes the dialog. When the dialog 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/)

The following example is based on the official [accessibility standard](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) for a modal dialog.

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

## See Also

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

* [Get Started with the Dialog](https://www.telerik.com/kendo-react-ui-develop/components/dialogs/dialog)

* [API Reference of the Dialog](https://www.telerik.com/kendo-react-ui-develop/components/dialogs/api)

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