Skip to content

feat: add slide-in mobile menu with focus-trap to landing nav bar (Closes #876) - #1150

Open
waterWang wants to merge 1 commit into
Stellopay:mainfrom
waterWang:feat/landing-nav-mobile-menu
Open

feat: add slide-in mobile menu with focus-trap to landing nav bar (Closes #876)#1150
waterWang wants to merge 1 commit into
Stellopay:mainfrom
waterWang:feat/landing-nav-mobile-menu

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Adds a slide-in mobile menu with focus-trap to components/landing/landing-page-nav-bar.tsx for viewports below the md breakpoint (768px).

Previously the landing nav bar's mobile panel was a basic centered dropdown that overflowed/wrapped awkwardly under 768px. This replaces it with a proper right-side slide-in drawer.

Changes

  • Slide-in drawer: Fixed panel that slides in from the right below md breakpoint, with a dimmed backdrop overlay
  • Focus trap: Tab/Shift+Tab cycle stays within the open drawer; initial focus moves into the drawer on open
  • Escape to close: Pressing Escape closes the drawer
  • Focus return: Focus returns to the hamburger trigger button when the drawer closes
  • Route change close: Drawer closes automatically on usePathname change
  • Outside click close: Clicking the backdrop overlay closes the drawer
  • Body scroll lock: Body scroll is locked while the drawer is open
  • ARIA: role="dialog", aria-modal="true", aria-expanded, aria-controls, dynamic aria-label on the toggle
  • Keyboard visible focus: focus-visible:ring on all interactive elements for WCAG 2.1 AA

Files changed

  • components/landing/landing-page-nav-bar.tsx — slide-in drawer with focus management
  • components/landing/landing-page-nav-bar.test.tsx — new tests covering open/close, focus trap, Escape, route change, outside click, and scroll lock

Tests

Added landing-page-nav-bar.test.tsx with 13 tests covering:

  • Toggle open/close + aria-expanded state
  • role="dialog" / aria-modal="true" attributes
  • Tab/Shift+Tab focus wrapping within the drawer
  • Focus return to the trigger button on close (Escape and button click)
  • Close on route change and outside click
  • Body scroll lock

Accessibility

WCAG 2.1 AA: keyboard navigable, focus trap, focus return, visible focus rings, ARIA dialog semantics, and aria-expanded/aria-controls on the trigger.

Closes #876

@vercel

vercel Bot commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

@waterWang is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

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.

Add a slide-in mobile menu with focus-trap to components/landing/landing-page-nav-bar.tsx below 768px

1 participant