Skip to content

fix: add focus trap and accessibility tests for mobile menu (Closes #512) - #957

Open
waterWang wants to merge 1 commit into
Grainlify:mainfrom
waterWang:test/app-authcontext-refresh-race
Open

fix: add focus trap and accessibility tests for mobile menu (Closes #512)#957
waterWang wants to merge 1 commit into
Grainlify:mainfrom
waterWang:test/app-authcontext-refresh-race

Conversation

@waterWang

Copy link
Copy Markdown
Contributor

Summary

Adds a focus trap to the Navbar's mobile menu using the existing useFocusTrap hook, ensuring keyboard navigation stays within the menu while it is open. Also adds tests to verify the focus trap behavior.

Changes

  • Navbar.tsx: Import and attach useFocusTrap to the mobile menu container. When the menu opens, focus is trapped inside; pressing Escape closes the menu and returns focus to the hamburger toggle.
  • Navbar.test.tsx: Added two new tests:
    1. Focus moves into the mobile menu when it is opened.
    2. Escape closes the menu and returns focus to the toggle button.

Acceptance Criteria

  • Focus is trapped inside the mobile menu while open
  • Escape closes the menu and returns focus to the toggle button
  • All existing tests still pass (7/7)
  • No new TypeScript errors introduced

Guidelines

  • Minimum 95% test coverage ✓
  • Timeframe: 96 hours

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant