[Feature]: Alignment of Web Components and React Components: Issues with Menu closing behavior and adding support for MenuItem Grouping

[brianchristopherbrady]

Library

Web Components (@fluentui/web-components)

Describe the feature that you would like added

Menu + Menu Item

Issue 1: Change Default Behavior of Menu Closing on Mouse Leave

Description:

Currently, in our Web Component implementation of the Menu, the menu closes on mouse leave. However, the expected behavior is that the Menu should stay open on mouse leave and only close when the mouse is clicked outside the Menu. We need to update our implementation to align with this expected behavior.

Problem:

The current behavior of the menu closing on mouse leave may not be intuitive for users and could lead to frustration or difficulty navigating the menu. Additionally, this behavior does not align with the expected behavior of the Menu and MenuItem components, as well as other common menu implementations.

Delta:

We need to change the default behavior of the Menu component so that it stays open on mouse leave and only closes when the mouse is clicked outside the Menu.

Example:

---

Issue 2: Add Support for Menu Grouping, Header, and Split Button to MenuItem Component

Description:

The current implementation of the Menu component in our Web Component library does not support grouping of menu items using the role="group" attribute. As a result, it is difficult to create visually distinct sub-sections within a menu, and the component may not be fully accessible to all users. Additionally, there is a need to create a split button and a header component to support menu grouping. Adding these features will improve the overall accessibility and usability of the Menu and MenuItem components.

Problem:

Without the ability to group menu items with the role="group" attribute, the Menu and MenuItem components cannot meet design requirements for visually distinct sub-sections, and may not be fully accessible to all users. Similarly, the absence of a split button and header component limits the ability to group menu items and provide additional functionality to users.

Delta:

We need to update our implementation of the Menu component to include support for the role="group" attribute, as well as add a split button and header component to support menu grouping.

Example:

Menu item grouping:

Split button:

Have you discussed this feature with our team

chrisdholt, ling1726

Additional context

No response

Validations

• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[brianchristopherbrady]

@ling1726

[microsoft-github-policy-service]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.