Tips for multiple actions per command item

[CanRau]

I have a need for multiple actions per item and am wondering how to best implement to not hurt a11y

I thought about having the items onSelect be the main action and "inside" provide buttons for secondary actions but how to navigate those?

Or maybe structure them as SubItems, so first enter opens the SubItems which then reveals the actual actions?

But one "action" is the ability to select multiple items to then perform an action on them

Any ideas, thoughts?

[joaom00]

Not sure I follow sorry, but I think you are after https://github.com/pacocoursey/cmdk#nested-items ?

[CanRau]

That's one option. Initially I thought having multiple actions directly per item but I guess that's not so great/easy for accessibility 🤔

Sthg like

<Component.Item onSelect={() => mainAction()}>
 <button onClick={() => secondaryAction()}
 Label
</Component.Item>

[joaom00]

Yeah, you'll need to find a way to make it accessible via keyboard and for screen reader users

[CanRau]

Think I'm going for the nested items for now thanks 🙏