Skip to content

fix: AccountMenu dropdown has inconsistent/incomplete ARIA menu semantics #265

Description

@nazarli-shabnam

Problem

The `AccountMenu` dropdown is marked `role="menu"`, and its sign-out button has `role="menuitem"`, but the two `Link` items ("Saved canvases", "Friends & Leaderboard") have no `role="menuitem"`. There's no arrow-key navigation between items, opening the menu doesn't move focus into it (focus stays on the trigger button until Tab is pressed), and focus isn't returned to the trigger when the menu closes via outside-click or Escape.

Impact

Screen-reader and keyboard users get an ARIA `menu` that behaves like a plain popover: some items are announced as menu items and some aren't (inconsistent semantics), there's no roving-tabindex/arrow-key support that the `role="menu"` pattern implies, and focus management doesn't follow the WAI-ARIA menu pattern. This is the same class of gap already tracked for canvas dialogs in #179 (ExpandMenu/CanvasTour focus trap), but here it's about menu role semantics specifically, on a different component (`AccountMenu`) not covered by that issue.

Location

`components/layout/AccountMenu.tsx:136-210`

Suggested fix

Either drop `role="menu"`/`role="menuitem"` entirely in favor of a plain nav popover with a simpler, correct a11y story (simplest fix), or implement the full WAI-ARIA menu pattern: consistent `role="menuitem"` on every item, arrow-key roving focus, initial focus moving into the menu on open, and focus returning to the trigger on close — following the same approach used for `ExpandMenu`/`CanvasTour`.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status
    To triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions