TrapFocus on Modal for accessibility

[Subha]

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

Environment (please complete the following information)

• Operating System: [macOS]
• Browser, Version [Chrome 95]
• react-overlays Version [5.1.1]

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]

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