Background

In T383909 we decided that actions can be used within a MenuItem, and we created this sandbox demo to illustrate that use case and refer back to these decisions if actions are included in MenuItems in the future. However, actions within MenuItems don't work perfectly now and they cannot be navigated using the keyboard.

Additionally, when hovering, both the MenuItem and its actions (specifically quiet buttons) are highlighted at the same time, making it unclear which one is being interacted with. Since both elements use background-interactive-subtle--hover, there is no visual distinction between them.

We need to review how actions are included within MenuItem to solve these issues.

Design proposal

Include if needed.

Open questions

1. Do we intend to support arbitrary interactive elements, or only specific ones?
   1. We've identified the need for quiet buttons within MenuItems - should this be the only supported action, or do we need to support more?
   2. This will inform both the design decisions and implementation.
2. How can we provide keyboard navigation support for menu item actions?
   1. Currently, menu items are not in the normal tab order - instead, the user remains focused on the triggering element and uses the arrow keys to loop through the menu items. This arrow key support is provided in the Menu component. How can we enable navigation to and interaction with menu item actions? This might inform the answer to the previous question.

Acceptance criteria (or Done)

• Decide which type(s) of actions/interactive elements we intend to support.
• Differentiate hover states for MenuItem and its actions.
• Ensure that menu item actions can be reached and interacted with via keyboard navigation.
• Document on the Codex docs site how to include actions within menu items.