User Menu

Accessibility

Import UserMenu, UserMenuStatus from @prepared911/ui/user-menu.

The trigger is a button with aria-haspopup="menu", aria-expanded, and aria-controls while open. Its accessible name is triggerLabel, which should name the person and, with availability on, the status. The avatar, the presence dot and the chevron are aria-hidden.
The panel is a role="menu" named by the trigger. Destinations and Sign out are menuitem; Reduce motion is a menuitemcheckbox with aria-checked whose switch track is aria-hidden and not focusable, so the row is the only control (Enter or Space toggles it and the menu stays open); the Theme control is a group named by its label whose segments are menuitemradio; availability is a labelled group of menuitemradio rows.
The identity header is a presentational list item. Arrow keys pass over it, so it reads as text and is not a stop.
Keys: ArrowDown on the trigger opens on the first row, ArrowUp on the last, and Enter or Space on the first. Inside the menu ArrowUp and ArrowDown move through rows and wrap, Home and End jump to the ends, typing a prefix jumps to a row, Escape and Tab close and return focus to the trigger. The Theme control is one stop: ArrowUp and ArrowDown pass over it and ArrowLeft and ArrowRight choose a segment (mirrored in right-to-left).
Focus moves into the menu only when a person opens it. A menu that opens through defaultOpen or open leaves focus where it is.
Sign out while pending is aria-busy="true" and reads signingOutLabel; the spinning loader stops under reduced motion and stays visible.
Status is optional. When it is on, it is not conveyed by the dot's color alone: each row has a visible label and a radio check, and the trigger's name carries the status.
Targets are 24 by 24 CSS px or larger: the Theme segments are 24px, rows are at least 34px, and the trigger is 32px tall.
In forced colors the Theme pill is Highlight and the selected glyph HighlightText.

User Menu / API and Development

Video player / Usage

User Menu

Accessibility

Import UserMenu, UserMenuStatus from @prepared911/ui/user-menu.

The trigger is a button with aria-haspopup="menu", aria-expanded, and aria-controls while open. Its accessible name is triggerLabel, which should name the person and, with availability on, the status. The avatar, the presence dot and the chevron are aria-hidden.
The panel is a role="menu" named by the trigger. Destinations and Sign out are menuitem; Reduce motion is a menuitemcheckbox with aria-checked whose switch track is aria-hidden and not focusable, so the row is the only control (Enter or Space toggles it and the menu stays open); the Theme control is a group named by its label whose segments are menuitemradio; availability is a labelled group of menuitemradio rows.
The identity header is a presentational list item. Arrow keys pass over it, so it reads as text and is not a stop.
Keys: ArrowDown on the trigger opens on the first row, ArrowUp on the last, and Enter or Space on the first. Inside the menu ArrowUp and ArrowDown move through rows and wrap, Home and End jump to the ends, typing a prefix jumps to a row, Escape and Tab close and return focus to the trigger. The Theme control is one stop: ArrowUp and ArrowDown pass over it and ArrowLeft and ArrowRight choose a segment (mirrored in right-to-left).
Focus moves into the menu only when a person opens it. A menu that opens through defaultOpen or open leaves focus where it is.
Sign out while pending is aria-busy="true" and reads signingOutLabel; the spinning loader stops under reduced motion and stays visible.
Status is optional. When it is on, it is not conveyed by the dot's color alone: each row has a visible label and a radio check, and the trigger's name carries the status.
Targets are 24 by 24 CSS px or larger: the Theme segments are 24px, rows are at least 34px, and the trigger is 32px tall.
In forced colors the Theme pill is Highlight and the selected glyph HighlightText.

User Menu / API and Development

Video player / Usage