refactor(web-components): refactor menu to popover

[davatron5000]

Previous Behavior

The current Menu component has a hard dependency on @floating-ui/dom, this is an attempt to slim that down and leverage HTML popover and CSS anchor positioning.

Also discovered:

• Drop-shadow bug on nested menu items
• Nested menu items not working in Safari

New Behavior

This component has been refactored to use HTML popover and CSS anchor positioning. HTML popoveris polyfillable and we're able to gracefully degrade CSS anchor, so that's promising.

• Refactor Menu to use the HTML [popover] and CSS anchor
• Allow for setting max-height of dropdown (per request from Commerce UI Kit)
• Refactor MenuList and MenuItem to use [popover] as well.
• Add default fallback position for browsers that don't support CSS anchor
• Remove @floating-ui/dom dependency from Menu and MenuItem

Due to platform limitations with popover, we're unable to apply popovertarget to fluent-button (because it's not a real <button>) which would automate some of the show/hiding focus management and ARIA-expanded work, but have included workarounds.

Known issues and TODOs

• :focus-visible not visible on first and last items in Safari
• contextmenu is a little futzy
• Document HTML popover polyfill
• Run yarn change
• Update API Extractor
• Update package.json

Related Issue(s)

• Fixes #

[fabricteam]

📊 Bundle size report

✅ No changes found

[chrisdholt]

This looks great! One place where we'll want to remove the @floating-ui/dom dependency as well is the tensile config for the benchmarks. There's a reference in there we can likely remove.

[mlijanto]

Looks like there's a couple of color bugs in menu-item when disabled. Here's what I see:

Disabled, rest - looks good!

Disabled, active - icon color should not change color?

Disabled, high contrast - no color difference, maybe needs a system color override

[radium-v]

A small interaction nit with menu: When clicking a menu to open it, keyboard navigation doesn't work. You have to redirect focus away from the control then back into it to use the keyboard. This isn't an issue with menu-list.

[davatron5000]

@mlijanto Thanks for finding that. 🙌

• Fixed the [disabled]:active issue.
• Added a disabled menuitem to the story as well.
• Fixed disabled state in forced-colors mode.

@radium-v

• Rolled in your nits
• Fixed the focus situation on Menu when you click and then want to use arrow keys.