feat: add role menu elements

[luwes]

• [x] move from aria select / listbox / option pattern to menu / menuitem pattern
• [x] add invoketarget attribute and auto linking between x-menu-button & x-menu elements
• [x] add anchoring logic for button / menu with an explicit anchor attribute or auto linking
• [x] close menu when checking item and on focus out

---

• it roughly makes the listboxes all menu elements. a menu can hold menu items optionally with a type of radio or checkbox making this more flexible than listbox / option.
• we're doing away with a grouping element similar to selectmenu to make the connection between button and menu. this improves flexibility, less elements. it's with new upcoming / proposed API's in mind that promote this concept. https://developer.mozilla.org/en-US/docs/Web/API/Popover_API https://open-ui.org/components/invokers.explainer/ https://www.w3.org/TR/css-anchor-position-1/ https://developer.chrome.com/blog/tether-elements-to-each-other-with-css-anchor-positioning

I propose to make this connection automatically for ease of use, less HTML needed but it can be made explicit with the invoketarget <-> id attributes or anchor <-> id for the positioning.

example of an automatic connection:

<media-controller>
  <media-captions-menu hidden></media-captions-menu>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-captions-menu-button></media-captions-menu-button>
  </media-control-bar>
</media-controller>

this menu captions button will automatically open the captions menu because the button finds a valid target. if there is no menu it falls back to the default behavior.

the captions menu is also automatically anchored to the captions menu button position as this is the most common behavior. it will be possible to opt out with anchor="" or similar.

[vercel[bot]]

@luwes is attempting to deploy a commit to the Mux Team on Vercel.

A member of the Team first needs to authorize it.

[codecov[bot]]

Codecov Report

Attention: 21 lines in your changes are missing coverage. Please review.

Comparison is base (aa24858) 78.72% compared to head (934f271) 78.63%.

Files	Patch %	Lines
src/js/utils/element-utils.js	53.33%	21 Missing :warning:

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #785 +/- ## ========================================== - Coverage 78.72% 78.63% -0.10% ========================================== Files 58 58 Lines 10733 10781 +48 ========================================== + Hits 8450 8478 +28 - Misses 2283 2303 +20 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
media-chrome	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 9, 2024 8:08pm
media-chrome-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 9, 2024 8:08pm