Skip to content

[client] Add keyboard shortcut (Escape) to close mobile nav menu #831

Description

@Otaiki1

Summary

The mobile navigation menu in Navbar.tsx can be opened by a button press but likely does not close when the user presses Escape, violating WCAG 2.1 criterion 2.1.2 (No Keyboard Trap).

What to do

  1. Add a useEffect in Navbar.tsx that listens for keydown with key === 'Escape' and closes the mobile menu.
  2. Return focus to the hamburger toggle button when the menu closes.
  3. Add an overlay/backdrop behind the mobile menu that also closes it on click.
  4. Test with Playwright that pressing Escape dismisses the menu.

Acceptance criteria

  • Pressing Escape closes the mobile nav.
  • Focus returns to the trigger button after close.
  • The test in Navbar.spec.tsx covers the Escape key path.

Metadata

Metadata

Assignees

Labels

Stellar WaveFull ecosystem refactor initiative

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