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
- Add a
useEffect in Navbar.tsx that listens for keydown with key === 'Escape' and closes the mobile menu.
- Return focus to the hamburger toggle button when the menu closes.
- Add an overlay/backdrop behind the mobile menu that also closes it on click.
- 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.
Summary
The mobile navigation menu in
Navbar.tsxcan be opened by a button press but likely does not close when the user pressesEscape, violating WCAG 2.1 criterion 2.1.2 (No Keyboard Trap).What to do
useEffectinNavbar.tsxthat listens forkeydownwithkey === 'Escape'and closes the mobile menu.Acceptance criteria
Navbar.spec.tsxcovers the Escape key path.