react-focus-lock
react-focus-lock copied to clipboard
Focus Lock navigates to wrapper with tabIndex="-1" when using props "shards"
Issue Description
When using react-focus-lock (version 2.13.5) with props shards and rendering a dialog wrapped in a component with tabIndex="-1", the focus lock incorrectly includes the wrapper in the tab navigation sequence.
According to accessibility standards, elements with tabIndex="-1" should be programmatically focusable but not included in the keyboard tab sequence. However, the focus lock is navigating to this wrapper when tabbing through the dialog.
Steps to Reproduce
- Open the CodeSandbox demo
- Click the "Open modal 2" button to open the dialog
- Press 'Tab' once
- Observe that the component with
tabIndex="-1"receives focus, which should not happen
Expected Behavior
The focus lock should skip elements with tabIndex="-1" during keyboard navigation, as these elements should only be focusable programmatically but not part of the tab sequence.
Environment
- react-focus-lock version: 2.13.5
- React version: (as specified in the CodeSandbox)