Skip to content

Accessibility: keyboard navigation for listbox popups #29

Closed

Description

@sapatmohit

Accessibility: keyboard navigation for listbox popups

LanguageSwitcher, PhoneInput (country menu) and NavBar (language menu) all render role="listbox" popups, but the only key handled is Escape. Users can only Tab through options, which doesn't match the WAI-ARIA listbox / combobox pattern.

Expected

  • ArrowDown / ArrowUp move the active option (from the search input too); wrap or clamp
  • Home / End jump to first/last
  • Enter selects the active option; Escape closes and returns focus to the trigger
  • Active option exposed via aria-activedescendant on the search input (with role="combobox" + aria-controls)
  • Active option scrolled into view
  • Opening with ArrowDown on the trigger
  • Focus returns to the trigger after selection

Acceptance

  • Shared hook (e.g. src/lib/use-listbox-navigation.ts) used by all three components
  • Tests with @testing-library/user-event covering the keys above for each component

Activity

  1. ujwalbajaj commented on Oct 12, 2026

    @ujwalbajaj
    Collaborator

    Hey I'm interested to work on this, can you assign this issue to me?

  2. sapatmohit commented on Oct 12, 2026

    @sapatmohit
    MemberAuthor

    Hey I'm interested to work on this, can you assign this issue to me?

    Works!! Assigned

  3. added a commit that references this issue on Oct 15, 2026
    7cdf183
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

accessibilityAccessibility improvementshelp wantedExtra attention is needed

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions