[useMenuButton] Create hooks for menu and menu button

[diondiondion]

Hi there, thanks for your great work on Downshift!

We're currently using the useCombobox hook and will definitely be using useSelect for our custom select components.

I'm currently tasked with implementing an accessible menu button component for our product and was thinking about whether Downshift could be used for this purpose, too. There seems to be quite a bit of overlap between the ARIA design patterns of select/listbox and menu/menu button, so useSelect may be workable. Do you have any examples of this being done, or any advice on whether you think this is a good or bad idea? Do you maybe already have plans for a useMenuButton hook?

If I went with useSelect, I'd expect it to be necessary to override some of its defaults, for example the role of the menu will have to be menu, not listbox. But otherwise the functionality seems reasonably similar. Any pointers?

[silviuaavram]

First of all I have to say that I would be super happy to have useMenuButton as a hook endorsed and provided by Downshift.

There is a similarity between the select and menu button but there are also a lot of different things, like having sub-menus and focus management in those menus.

I am not going to lie, it may take a while to develop it, but it would be super awesome! I will leave this issue open as a feature request, and we can start discussing specs and how we can use Downshift's principles in building it (stateReducer, control props, on change props etc).

[YaseenAlGailani]

I’m really tempted to give this a try.

I’ve been through aria-practices's recommended specs for menus, and also been going through useSelect's implementation. There are considerable implementation differences, also keeping in mind changes landing with #1402.

@silviuaavram, If you're still interested in having useMenuButton provided by Downshift, I’d love to help. Thanks for your amazing work, I'm learning a lot from the code.

[briavicenti]

@YaseenAlGailani I'd be hugely interested in having a useMenuButton hook! We're currently trying to switch our component system to DownshiftJS from a different headless library, but we need a means of building a menu to be able to do so.

[YaseenAlGailani]

@briavicenti I'm still interested as well. This discussion is barely going as you can see however, I might still submit a PR at some point (hopefully, if I don't get dragged into something else) cause I've already started implementing useMenuButton locally in a side project, and I have a bit of time at the moment.

[silviuaavram]

I think that useMultipleSelection or the other hooks can be of great help to create useMenuButton and useMenu. Not to use them per se, but to build the new hook according to the downshift patterns. Of course, ARIA guidelines for menu and menu button should be followed as well. There are also other similar hooks out there, I think react-aria (adobe spectrum) has one. Let me know if I can guide you further.

I am now focusing on some improvements for the existing hooks, so will not work on this directly, but will be happy to help as much as I can.