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]: keyboard navigation is not correct when a List is composite AND tries to use useRestoreFocusTarget #33844

Open
2 tasks done
nikki9696 opened this issue Feb 14, 2025 · 1 comment

Comments

@nikki9696
Copy link

nikki9696 commented Feb 14, 2025

Component

List

Package version

9.58.3

React version

18

Environment

stackblitz

Current Behavior

When I render a List that is type composite, I expect keyboard navigation down and up arrows to move between items. This works fine for items UNTIL I then also try to allow it to be a focus restoration point using useRestoreFocusTarget.
When we do this, the keyboard arrows also go into the ListItem instead of moving from item to item. Also note that when NVDA is open, it gets amazingly confused and tab goes in unexpected places, which does not happen when NOT using useRestoreFocusTarget.

I need this because my List action will be opening an Inline Drawer. I used this example for it
https://react.fluentui.dev/?path=/docs/components-drawer--docs#default

Expected Behavior

Keyboard arrows should still move item to item when using useRestoreFocusTarget

Reproduction

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

Steps to reproduce

Tab to the List and use the arrow down key. See that focus goes into the item instead of to the next item.

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.
@CampbellOwen
Copy link
Contributor

This looks to be a tabster issue when combining restorer and mover

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

No branches or pull requests

2 participants