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?

[ahaws-govcio]

@jquense , our 508 team is holding us on this issue. They are saying, either the focus is "trapped" in the dialog OR the dialog "act as the entire document" and allows the focus to cycle through the browser UI (Issue #6579). I just argued the latter with our 508 team based on your response in Issue #6579.
When using the TAB key, the focus path works as expected and cycles through the browser UI. However, when using Shift+TAB the focus path is blocked at the dialog element and DOES NOT cycle through the browser UI as expected. If the "native element is the gold standard", then I would believe this IS a bug. Is it possible to get the Shift+TAB to cycle through the browser UI in reverse of the TAB?

I think the title of this issue is misleading since the focus doesn't really escape the dialog, it just gets held at the dialog element as @kyletsang mentions

[jquense]

Should be possible but a bit tricky, I think I started to try and fix this upstream but didn't have the time to finish

[Dev-Oli]

Any updates on this bug(fix) @jquense? For accessibility reasons we need the modal to behave the same way when using tab or shift-tab (just the other way round). The focus must always be trapped inside the modal without scrolling to the button of the page and jumping back up when closing the modal.

[jquense]

Hey @Dev-Oli i'm not working on this, if you want to take a stab at it go for it. PRs are welcome! This isn't super high priority for us as we've had the currently implementation validated by a11y auditors before and while not the most ideal, it's not really a problem in practice (according to them). I appreciate that your team feels differently but we are just short on time !