What is the recommended way for adding one or more actions to a menu item in the context of a command palette?

[jsefiani]

Hey! I implemented React Aria's command palette example, and I was wondering how the recommended way is to add one or more actions to a menu item and whether this is possible in the context of React Aria.

Ideally, I want to show a star icon button in the menu item so that users can star a particular menu item. Nesting this inside the menu item will make it inaccessible. If I were to position it absolutely, it would need to live outside the menu item, which React Aria doesn't allow because of the Menu composition pattern.

[snowystinger]

Aria does not allow interactive children in role=menuitem. I know the spec doesn't say presentation only, and it doesn't specify the allowed roles, that's because that's a little in flux right now. See these issues for more information:
menuitem doesn't have presentational children?
Add normative text to menuitem and treeitem about allowed child elements
Spec for menu/menuitem does not provide enough author guidance for structure

Instead, you'd want to use Autocomplete with GridList, but we don't have support for that yet.

What you could do in the meantime though is make an input for filtering a gridlist and users would need to tab from the input to the gridlist in order to navigate it.

[jsefiani]

Hey @snowystinger , thanks for getting back to me and thanks for the recommendation!

What you could do in the meantime though is make an input for filtering a gridlist and users would need to tab from the input to the gridlist in order to navigate it.

That seems like an annoying experience for keyboard users. Can't I work around this and use any utilities from the react-aria lib to "focus" the first item while keeping the focus on the autocomplete?

The list of items needs to be linked to pages, and there also needs to be a button inside the link (visually) to mark an item as a favorite. I guess this won't be possible with the GridList structure if I want to make it accessible?

I looked at the documentation and didn't see anything about sections. Does it support section titles like this:

[snowystinger]

Not yet, #7935
GridList is still pretty new in many regards and Autocomplete is even newer. So we appreciate your patience and understanding.

We still have to figure out the interaction between Autocomplete and GridList when it comes to left/right arrow keys since right now they would conflict.

Another option, possibly, I haven't tried it, could be to make use of selection in your ListBox and keep a separate div of "favorite" buttons that scrolls with your list. They could make use of a roving tab index pattern so that when you tab to them, it'd go to the selected row. You could possibly aria label them by the ListBox row as well.