microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
18.54k stars 2.74k forks source link

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

Open kolaps33 opened 6 days ago

kolaps33 commented 6 days ago

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

khmakoto commented 3 days ago

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.