v2 Menus: Implement typeahead focus #1834
Conversation
🦋 Changeset detectedLatest commit: 4ff95ac The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
size-limit report 📦
|
siddharthkp
changed the title
| const {containerRef, openWithFocus} = useMenuInitialFocus(open, onOpen) | ||
| const containerRef = React.createRef<HTMLDivElement>() | ||
| const {openWithFocus} = useMenuInitialFocus(open, onOpen, containerRef) | ||
| useTypeaheadFocus(open, containerRef) |
There was a problem hiding this comment.
Note 1: Changed both of these hooks to accept a ref if it's passed (or create a new one if it's not passed)
Note 2: Did not combine these into one hook called useMenuFocus, we might want to re-use typeahead logic in NavigationTree 🤷
I'm also curious about this ☝️ cc @alliethu It seems a little strange that typeahead doesn't work when activated with a mouse, but I don't have a strong opinion. |
There was a problem hiding this comment.
Nice work @siddharthkp! Looks good to me 👍 I would like an answer to #1834 (comment) from someone with more accessibility experience before we merge this, but feel free to merge if this is urgent.
Side note, this would be fun to implement as a state machine!
|
This is an interesting update which would change the behavior here as well :) primer/behaviors#52 Will wait for behaviors release before moving forward on this PR |
|
Update: After #1877 (which is also merged in this branch), typeahead is active even when you open the menu with mouse click ✌️ |
Waiting on Release Tracking behaviors#59Looking for feedback on:
Is this correct behavior - Typeahead does not activate automatically when you open with mouse click. But, if you press the arrow keys after opening with mouse, typeahead becomes activated.Screenshots:
Before:
After:
100% test coverage yo!