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 named by the trigger. A menu may own only menu items, groups of them and separators, and a slider is none of these, so when the panel draws a slider it is a group that holds two role="menu" lists with the slider rows between them, in a region neither menu owns (Menu MN-49): the first menu holds the header, the rule and the Appearance rows up to Reset layout; the region holds Zoom and the Sound section; the second menu holds the rule, any extra items and Sign out. Each menu is named by the trigger too. With no slider the panel is one role="menu". The look and the order on screen are the same either way.
The Appearance and Sound sections are groups named by their headings. Reset layout and Sign out are menuitems; 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); Reset layout is named by its label ("Reset layout"), and its outlined "Reset" chip is aria-hidden, so the row is the only control and a menu may own it.
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. The arrow keys and typeahead run through the items and the sliders alike, across both menus and the region, and Escape closes the panel from a slider as from a row. Tab closes the menu, so the sliders are reached with the arrow keys.
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 named by the trigger. A menu may own only menu items, groups of them and separators, and a slider is none of these, so when the panel draws a slider it is a group that holds two role="menu" lists with the slider rows between them, in a region neither menu owns (Menu MN-49): the first menu holds the header, the rule and the Appearance rows up to Reset layout; the region holds Zoom and the Sound section; the second menu holds the rule, any extra items and Sign out. Each menu is named by the trigger too. With no slider the panel is one role="menu". The look and the order on screen are the same either way.
The Appearance and Sound sections are groups named by their headings. Reset layout and Sign out are menuitems; 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); Reset layout is named by its label ("Reset layout"), and its outlined "Reset" chip is aria-hidden, so the row is the only control and a menu may own it.
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. The arrow keys and typeahead run through the items and the sliders alike, across both menus and the region, and Escape closes the panel from a slider as from a row. Tab closes the menu, so the sliders are reached with the arrow keys.
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