User Menu

Accessibility

Import UserMenu 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. The avatar 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; each preference slider is a group named by its row label with a role="slider" thumb (aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext).
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 between 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). A slider row is one stop (Slider SL-26): ArrowUp and ArrowDown leave the row; ArrowLeft and ArrowRight (mirrored in right-to-left), PageUp and PageDown move the thumb.
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.
Each slider row shows a visible label and readout above the track (Figma layout). The readout matches the thumb's aria-valuetext unless the app uses a separate speech formatter on a custom slider.
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

ValueListField / Usage

User Menu

Accessibility

Import UserMenu 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. The avatar 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; each preference slider is a group named by its row label with a role="slider" thumb (aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext).
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 between 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). A slider row is one stop (Slider SL-26): ArrowUp and ArrowDown leave the row; ArrowLeft and ArrowRight (mirrored in right-to-left), PageUp and PageDown move the thumb.
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.
Each slider row shows a visible label and readout above the track (Figma layout). The readout matches the thumb's aria-valuetext unless the app uses a separate speech formatter on a custom slider.
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

ValueListField / Usage