freenowtech / freenowtech/wave

Modal window must capture the keyboard focus

Open
#68 4 comments 2 reactions 0 assignees View on GitHub
a11y conversation needed
Dominant language
TypeScript
Stars
67
Forks
31
Avg merge
1d 8h
Merged PRs (30d)
4

Description

When the modal is shown, a user can move focus between its elements using the Tab button. But when we run out of the focusable elements in the modal, the focus moves to the content below.

We must follow [WAI ARIA best practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal) and trap the focus inside the modal.

[Codesanbox example](https://codesandbox.io/s/sad-silence-ugse0d?file=/src/App.tsx) shows an app with two inputs — one on the main page and another one in the modal window. When the modal is opened and the focus is on in-modal input, you can still press Shift+Tab to go outside the modal. This is incorrect behaviour, the focus must be trapped inside the modal window

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.