search

primer / brand

React components and Primitives for GitHub marketing websites
https://primer.style/brand
MIT License
56 stars 30 forks source link

🐛 [BUG] - `AnchorNav` focus is trapped on mobile #608

Open simurai opened 3 weeks ago

simurai commented 3 weeks ago

Describe the bug

This came up in this accessibility audit. Once the focus is inside the menu, the focus is trapped and you can't get out of it with the tab key.

Reproduction steps

  1. Go to Storybook
  2. Resize browser to mobile (~500px until nav "collapses")
  3. Use keyboard tab to navigate
  4. Once focus is on "GitHub vs Jenkins", you can only use up/down keys, but tab key doesn't work anymore and you can't reach the "Sign up" button.

Expected behavior

  1. Go to Storybook
  2. Resize browser to mobile (~500px until nav "collapses")
  3. Use keyboard tab + enter to navigate
  4. Once focus is on "GitHub vs Jenkins" and you press the tab key, the focus should move to the "Sign up" button and not be "trapped" in the menu.

Screenshots

https://github.com/primer/brand/assets/378023/5f87d5b8-2a76-446a-8a4f-a55ce8d9c42a

Browsers

Chrome

OS

Mac

simurai commented 1 week ago

FYI: Here another comment from a follow-up review.