Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Virtualized list example is not reachable by TAB key #33255

Open
2 tasks done
kolaps33 opened this issue Nov 12, 2024 · 1 comment · May be fixed by #33276
Open
2 tasks done

[Bug]: Virtualized list example is not reachable by TAB key #33255

kolaps33 opened this issue Nov 12, 2024 · 1 comment · May be fixed by #33276

Comments

@kolaps33
Copy link
Contributor

Component

List (Preview)

Package version

v9.56.1

React version

18.3.1

Environment

System:
    OS: Windows 11 10.0.22631
    CPU: (22) x64 Intel(R) Core(TM) Ultra 7 165H
    Memory: 41.66 GB / 63.64 GB
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

Current Behavior

User is not able to navigate to list with TAB key.

Expected Behavior

User should navigate to list with TAB key.

Reproduction

https://stackblitz.com/edit/vflhfv?file=src%2Fexample.tsx

Steps to reproduce

  1. Navigate on the page https://nj9t8grun-q3qq--5173--f565b097.local-credentialless.webcontainer.io/
  2. set focus on button "testing 1"
  3. Press TAB key
    Actual: focus goes to "testing 2" button
    Expected: focus goes to list element

NOTE: Shift+TAB brings focus to list element

Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
@khmakoto
Copy link
Member

This is because of a weird interaction between react-window and tabster's mover. However, since this example is for non-interactive items, we can just pass undefined as part of data-tabster and this should work correctly. I'll send a PR to update this behavior accordingly in the example and call it out in its description.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment