Focus Behaviour
Each interactive element in a modal should be focusable.
When a modal is opened, focus should generally be on the first interactive element. When a modal is closed, focus should return to the element that triggered it.
If a modal has no interactive element when it opens, add the appropriate tab-index attribute to the header to allow for programmatic focus.
Non-interactive elements should not be focusable, with the exception of the modal title. Ensure this by setting the tab-index attribute to -1 on each non-interactive element
When hovering over an element shows a custom tooltip, focusing should achieve the same behaviour.
Keyboard Interactions
Each interactive element in a modal should be keyboard-navigable and keyboard-interactive.
The following table illustrates the expected behaviour on the press of the given key(s):
| Input | Behaviour |
|---|---|
| Escape | Closes the modal and moves focus to the element that triggered the modal to open |
| Tab | Cycles focus forwards through all focusable elements. Focuses the first element when focus was on the final element |
| Shift + Tab | Cycles focus backwards through all focusable elements. Focuses the final element when focus was on the first element |
| Enter | Activates a button or link, or submits a form |
| Space | Activates a button or toggle |
| Arrows | Cycles focus through a set of related elements, such as radio buttons or menu items |
Pressing Tab while focused in the modal should keep focus trapped in the modal rather than moving it to the underlying page.
Initial focus
On opening a modal, the element to be focused should be determined as below:
Initial focus should never be on the primary action.