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

Menu should close and move to next focusable element on <Tab> #1639

Closed
wants to merge 1 commit into from

Conversation

eriese
Copy link
Contributor

@eriese eriese commented Jul 2, 2022

Fix for #1634

Current behavior is that user cannot tab away from menu. According to the WAI ARIA Menu pattern, Tab key behavior should be as follows:

Tab and Shift + Tab:
Move focus into a menubar:
If focus is moving into the menubar for the first time, focus is set on the first menuitem.
If the menubar has previously contained focus, focus is optionally set on the menuitem that last had focus. Otherwise, it is set on the first menuitem that is not disabled.
When focus is on a menuitem in a menu or menubar, move focus out of the menu or menubar, and close all menus and submenus.
Note that Tab and Shift + Tab do not move focus into a menu. Unlike a menubar, a menu is not visually persistent, and authors are responsible for ensuring focus moves to an item inside of a menu when the menu opens.

@vercel
Copy link

vercel bot commented Jul 2, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
headlessui-react ✅ Ready (Inspect) Visit Preview Jul 2, 2022 at 8:16PM (UTC)

@vercel
Copy link

vercel bot commented Jul 2, 2022

@eriese is attempting to deploy a commit to the Tailwind Labs Team on Vercel.

A member of the Team first needs to authorize it.

@RobinMalfait RobinMalfait changed the title Menu should not trap focus for tab key Menu should close and move to next focusable element on <Tab> Jul 7, 2022
@RobinMalfait RobinMalfait self-assigned this Jul 8, 2022
@RobinMalfait
Copy link
Member

Hey! Thank you for your PR!
Much appreciated! 🙏

I continued on your work here #1673 and will be available in the next release.

You can already try it using:

  • npm install @headlessui/react@insiders.
  • npm install @headlessui/vue@insiders.

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

Successfully merging this pull request may close these issues.

2 participants