react-focus-lock icon indicating copy to clipboard operation
react-focus-lock copied to clipboard

Focus Lock navigates to wrapper with tabIndex="-1" when using props "shards"

Open siarhei-epam opened this issue 5 months ago • 4 comments

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

  1. Open the CodeSandbox demo
  2. Click the "Open modal 2" button to open the dialog
  3. Press 'Tab' once
  4. 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)

siarhei-epam avatar May 27 '25 15:05 siarhei-epam