Maintain focus on trigger when Menu is open

[ritz078]

I am trying to implement a Toolbar with Menu using react-aria where you can have multiple menus and you can quickly navigate through them using right/left arrows. Something similar to https://www.radix-ui.com/docs/primitives/components/menubar where the focus stays on the trigger even after open the menu. The focus only shifts after we click on the up/down arrow keys.

Here's what I have so far:

Kapture.2023-05-01.at.21.42.46.mp4

As you can see, I am using useMenuTriggerState's state.open("first") to open the menu when focus comes back to the menu. Even if I use state.open(), the focus shifts to the menu content and I am not able to bring it back to the trigger button without closing the menu content.

[snowystinger]

I don't think we've implemented this pattern yet, it's a menubar https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-editor/

Menu bars still use menus inside them, so you could probably get most of it implemented using our hooks, but some things you'd need to handle yourself.

Could open a feature request for the menubar in React Aria and given that the behaviors and dom structure are well defined, you could contribute that if you wanted. Keep in mind that due to ongoing team priorities we won't have much time to actively support a contribution of this scale, but we'd appreciate any findings and progress you make here!

[ritz078]

Thank you. I have achieved most of the menubar pattern using react-aria (as you can see in the video). The only thing I am not able achieve is preventing autofocus of content when the menubar opens. 😞 That feature will enable the development of menubar.

Maybe a preventContentAutoFocus in useMenu will help here. The focus can shift when someone presses keyboard up/down arrows.

[snowystinger]

Yeah, that's the one place where I am not sure the best way to go about it, given that popovers generally need to contain focus. I'll bring it up with the core team at our next meeting as well as with our accessibility team. I don't think useMenu is doing anything with the focus though. That'd be useMenuTrigger most likely.

[ritz078]

Yes I think it's the popover that has focus. I realised that I can actually fake this behaviour by pretending that the menu trigger button is focused using CSS. So even though it's not focused I can style it to look like it does and add interactions using JS.

Kapture.2023-05-02.at.01.22.05.mp4

Thanks a lot for your help. I think I have achieved the most of what I wanted using existing APIs of react-aria.

[snowystinger]

That looks pretty good. I think that's an appropriate way to solve it until it can really be addressed in react-aria. Thanks for sticking with it!

[ritz078]

Thanks for all your help.