Filter within MenuSection

[nathanforce]

I'm looking to create the following menu, with a search that only applies to a subsection.

Wishlist to make this:

• Per section empty state
• Do not hide empty sections
• Either allow me to only filter against a single section OR allow my filter to match against an item/key/node rather than just the text
• Allow non menuitem children inside/as siblings of MenuSection

I attempted to make this work a few ways:

1. Using CSS grid and display:contents to reorder items
2. Custom MenuSection with createBranchComponent
3. Multiple Menu components in a single popover

Each of these kind of worked but ultimately felt hacky or had unacceptable tradeoffs for UX, focus management, accessibility. So I guess I'm asking how folks with more familiarity of the low level implementation would try to build this? Or is this just not possible with the RAC components and I should drop down to the useMenu hooks?

[devongovett]

Unfortunately the ARIA menu role does not allow interactive content within it other than menu items. Doing so will confuse screen readers. I think I would use two separate menus within a popover. Then you'd tab from the top menu to the search field to the second menu.