Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add modal focus trap feature #279

Merged
merged 27 commits into from Aug 1, 2020
Merged

Add modal focus trap feature #279

merged 27 commits into from Aug 1, 2020

Conversation

sebnitu
Copy link
Owner

@sebnitu sebnitu commented Jul 31, 2020

Problem

There are a few outstanding accessibility issues with the current modal script.

Solution

This PR improve the modal component by introducing a focus trap feature. This ensures that while a modal is open, it's not possible to access the rest of the page using tab focus. In addition to this, a new enable and disable state management has been along with a main selector option which will make primary content areas within a page inaccessible while a modal is active. Lastly, to better improve the management of modals, a new move modal option and api was added to move all modals in a document to a specific location. This prevents a modal from inheriting the inaccessible state if it's originally within the main content area. The new modal behavior pattern is as follows:

  1. When a modal is opened, focus is moved to the dialog or an element inside.
  2. Modals provide standard methods for the user to close such as using the esc key or clicking outside the dialog.
  3. While the modal is active, contents obscured by the modal are inaccessible to all users.
  4. When a modal is closed, focus is returned to the initial trigger element that activated the dialog.

@sebnitu sebnitu marked this pull request as ready for review August 1, 2020 06:50
@sebnitu sebnitu merged commit d7465ea into master Aug 1, 2020
@sebnitu sebnitu deleted the modal-focus-trap branch August 1, 2020 06:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant