Correct way of a building menu with search and other roles

[prichodko]

Thank you for building this library! It's superb and I've learned a lot while improving the accessibility of our app.

However, I have some difficulties recreating an accessible component similar to GitHub's label picker.

Can someone point me in the right direction on how to structure it correctly?

My current approach is something like this:

<MenuTrigger>
   <Button>
   <Popover>
      <TextField />
      <Menu />
   </Popover>
</MenuTrigger>

where TextField is filtering the collection of available MenuItems, selectionMode is set to multiple.

I am struggling with two things:

1. Since selectionMode is multiple, the role of menu items is role=menuitemcheckbox. How to add a last non-filterable button with role=menuitem?
2. Ideally it should also support virtual focus similar to the ComboBox, but as far as I know it's currently only available in ListBox.

🙏

[devongovett]

I think you want a ComboBox, not a menu.

[prichodko]

Thanks, @devongovett for the answer.

Using ComboBox was my initial attempt, however, it didn't seem possible to have the input inside the popover (only as a part of the trigger). Am I missing something? I can provide an example if needed.

Also, what is the right way of mixing items that function like checkboxes (list of labels) with actions (Edit labels button)?