Skip to content

[A11y] Add proper disclosure semantics to desktop nav dropdown #157

Description

@andrewy1n

Problem

Desktop navigation dropdown toggles in src/components/NavDropdown.tsx/src/components/Header.tsx do not expose disclosure state with aria-expanded and do not associate trigger/menu via aria-controls.

This makes dropdown state unclear for assistive technologies and reduces keyboard/screen-reader usability.

Scope

  • Add disclosure semantics to desktop dropdown trigger(s): aria-expanded, aria-controls, stable id relationships.
  • Ensure keyboard interactions are robust (open/close via Enter/Space, Escape to close, focus returns to trigger when closed).
  • Confirm dropdown content has appropriate semantics/labels.

Acceptance Criteria

  • Trigger announces open/closed state to screen readers.
  • Trigger and menu are linked via IDs.
  • Escape key closes open dropdown reliably.
  • Keyboard navigation is test-covered.

Files

  • src/components/NavDropdown.tsx
  • src/components/Header.tsx
  • e2e/header-mobile-menu.spec.ts (extend or add desktop-specific spec)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions