Account Switcher

Features

• Menu-button pattern with aria-haspopup, aria-expanded and aria-controls
• Signed-in account header with photo avatar, name, email and an Active badge
• Switch-account list rendered from an ACCOUNTS array — clicking another account really switches the active state and updates the trigger avatar and name
• role="menuitemradio" account rows with aria-checked and a steel-blue check on the active account
• Local WebP photo avatars layered over the per-account accent discs (steel-blue, indigo, teal, glacier-cyan) with an accent ring overlay
• Automatic fallback to the tinted initials disc when a photo fails to load
• Real add-account affordance that appends the next account from a pool and disables itself when the pool is empty
• Full roving keyboard navigation with Arrow, Home, End, Enter, Escape and Tab
• Fade-and-translate reveal of the menu plus a spring pop on the trigger avatar when switching
• Outside-click close with focus return to the trigger
• Fully respects prefers-reduced-motion

Accessibility

Menu button

The trigger uses aria-haspopup="menu", aria-expanded and aria-controls

Menu semantics

The panel uses role="menu", actions use role="menuitem"

Radio semantics

Account rows use role="menuitemradio" with aria-checked inside a labelled role="group"

Roving focus

Items use tabindex="-1" and receive focus as the active index moves

Focus return

Closing with Enter or Escape returns focus to the trigger

Live trigger label

The trigger aria-label names the signed-in account and updates on switch

Disabled state

The add-account item flips to aria-disabled="true" when the pool is empty

Focus indicators

:focus-visible with --ring outline on all interactive elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Account Switcher in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the dropdown menu is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.