Close Menu component when using tab key
#1673
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This is internal API, and the actual API is not 100% ideal. I started refactoring this in a separate branch but it got out of hand and touches a bit more pieces of the codebase that aren't related to this PR at all. The idea of this function is just so that we can go Next/Previous but from the given element not from the document.activeElement. This is important for this feature. We also bolted this ontop of the existing code which now means that we have this API: ```js focusIn([], Focus.Previouw, true, DOMNode) ``` Luckily it's internal API only!
Just closing the Menu isn't 100% enough. If we do this, it means that when the Menu is open, we press shift+tab, then we go to the Menu.Button because the Menu.Items were the active element. The other way is also incorrect because it can happen if you have an `<a>` element as one of the Menu.Item elements then that `<a>` will receive focus, then the `Menu` will close unmounting the focused `<a>` and now that element is gone resulting in `document.body` being the active element. To fix this, we will make sure that we consider the `Menu` as 1 coherent component. This means that using `<Tab>` will now go to the next element after the `<Menu.Button>` once the Menu is closed. Shift+Tab will go to the element before the `<Menu.Button>` even though you are currently focused on the `Menu.Items` so depending on the timing you go to the `Menu.Button` or not. Considering the Menu as a single component it makes more sense use the elements before / after the `Menu`
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is a bit of an odd one, we always used to focus trap when the
Menucomponent is open and I'mpretty sure this was also recommend on some pages.
Looking at the new ARIA Authoring Practices Guide (APG) pages this is now recommended https://www.w3.org/WAI/ARIA/apg/patterns/menu/
This is also what was mentioned by @eriese on the original issue #1634 and #1639
This PR is a continuation of #1639 with a few more improvements and cleanup, but I started from the
original PR just so that the original work from @eriese is includes (Thanks for starting this!)
I also did some digging around the internet and other libraries implement it either using focus
trapping or with the new proper "move focus out" code.
Closes: #1639
Fixes: #1634