Skip to content

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

@siarhei-epam

Description

@siarhei-epam

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions