useConstrainedTabbing steals focus from elements with tabindex="-1"

[Aljullu]

Description

If an element with tabindex="-1" is focused and is rendered inside a component using useConstrainedTabbing(), pressing Tab will not focus the next focusable element, but instead it will go back to the first focusable item.

Step-by-step reproduction instructions

One way to reproduce this issue is to modify the <Modal> story:

gutenberg/packages/components/src/modal/stories/index.js

Lines 31 to 35 in 9df736c

	<Modal { ...props } onRequestClose={ closeModal }>
	<Button variant="secondary" onClick={ closeModal }>
	Close Modal
	</Button>
	</Modal>

Like this:

<Modal { ...props } onRequestClose={ closeModal }>
+	<Button>Button 1</Button>
+	<div className="placeholder-div" tabIndex={ -1 } />
+	<Button>Button 2</Button>
+	<Button
+		onClick={ () => {
+			const placeholder = document.querySelector(
+				'.placeholder-div'
+			);
+			placeholder.focus();
+		} }
+	>
+		Button 3
+	</Button>
	<Button variant="secondary" onClick={ closeModal }>
		Close Modal
	</Button>
</Modal>

1. Run npm run storybook.
2. Go to the Modal story, open the modal and, navigating with the keyboard, focus and click Button 3.
3. Focus has moved to placeholder-div.

Expected behavior:
4. Pressing Tab will focus Button 2.

Actual behavior:
4. Pressing Tab focuses close button.

Screenshots, screen recording, code snippet

Actual:

actual.mp4

Expected:

expected.mp4

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes