brand icon indicating copy to clipboard operation
brand copied to clipboard

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

Open simurai opened this issue 1 year ago • 1 comments

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 avatar Jun 13 '24 01:06 simurai

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

simurai avatar Jun 24 '24 08:06 simurai