Keyboard input Tab + Shift escapes Modal's focus

[ankittrehan2000]

Prerequisites

• I am using the correct version of React-Bootstrap for my version of Bootstrap
• I have searched for duplicate or closed issues
• I have read the contributing guidelines

Describe the bug

With the React Bootstrap modal open, attempt to move around with your keyboard using Shift + Tab. The elements from the background of the modal which should be out of focus start getting focused.

Expected behavior

Using Shift + Tab should keep the focus on the elements within the modal

To Reproduce

No response

Reproducible Example

https://codesandbox.io/p/sandbox/youthful-grothendieck-fzppl5

Screenshots

No response

What operating system(s) are you seeing the problem on?

No response

What browser(s) are you seeing the problem on?

No response

What version of React-Bootstrap are you using?

2.7.2

What version of Bootstrap are you using?

5.2.3

Additional context

No response

[kyletsang]

Can you provide an updated sandbox link? The current link says "not found"

[ankittrehan2000]

Hi can you please try it again. I realized it was in my drafts and couldn't be seen by someone else. Thanks!

Link https://codesandbox.io/p/sandbox/youthful-grothendieck-fzppl5

[kyletsang]

When you shift tab, the base modal captures the key press and ends up focusing on the modal dialog div, although that's been set with a tabindex of -1:
https://github.com/react-restart/ui/blob/main/src/Modal.tsx#L383

Seems like this should be targeting the last focusable element within the modal though. @jquense was there a reason for focusing on the modal dialog div?