New to KendoReact? Start a free 30-day trial
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
The following example is based on the official accessibility standard for a modal dialog.
Change Theme
Theme
Loading ...