search

react-bootstrap / react-overlays

Utilities for creating robust overlay components
https://react-bootstrap.github.io/react-overlays
MIT License
898 stars 223 forks source link

TrapFocus on Modal for accessibility #981

Open Subha opened 3 years ago

Subha commented 3 years ago

Describe the bug

We wanted to trap focus when the modal is opened. Focus should be retained in the modal after the last focused item.

To Reproduce

Steps to reproduce the behavior:

  1. https://react-bootstrap.github.io/react-overlays/api/Modal
  2. After the last focusable element in the modal the focus should not move outside.
  3. Tried with enforceFocus property as well.

Reproducible Example

https://react-bootstrap.github.io/react-overlays/api/Modal

Expected behavior

Maintain focus within the modal should not move to the Browser url Accessibility Example: https://dequeuniversity.com/library/aria/simple-dialog

Screenshots

Screen Shot 2021-10-27 at 10 32 36 PM

Environment (please complete the following information)

Additional context

This is a great library, appreciate if this can be fixed on the library or provide a work around. If this is already addressed and I am missing to add any properties please let me know.

jquense commented 3 years ago

This is intentional and inline with how native dialogs work. The focus is limited to the modal but can cycle out of the window. You can tab from the url bar and focus will be put back into the Modal. We e vetted this approach a number of times with a11y folks and it's been wildly 👍 as correct. This does deviate from many online examples but because we are doing more to implement this well not less