feat: add slide-in mobile menu with focus-trap to landing nav bar - #1145
Open
ifygreg01-best wants to merge 1 commit into
Open
feat: add slide-in mobile menu with focus-trap to landing nav bar#1145ifygreg01-best wants to merge 1 commit into
ifygreg01-best wants to merge 1 commit into
Conversation
- Add hamburger toggle (Lucide Menu/X icons) with aria-expanded, aria-controls, aria-haspopup=dialog below the md (768px) breakpoint - Slide-in panel from right via CSS transform transition (no JS animation, prefers-reduced-motion respected automatically) - Full focus trap: Tab/Shift+Tab cycle within panel; Escape, hamburger re-click, close button, and backdrop click all close and return focus to the trigger - Route-change auto-close via usePathname effect - Body scroll lock while panel is open - role=dialog, aria-modal=true, aria-hidden toggle on the panel - aria-current=page on active nav links in both desktop and mobile nav - 30 unit tests covering all behaviours (all passing) - design/a11y-checklist.md updated; resolves P1-03 Closes Stellopay#876
Contributor
|
@ifygreg01-best 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. |
Author
|
Hi maintainer I have completed the implementation for this issue.could you please approve the workflow so the vercel checks can run? Thank you |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #876
Replaces the non-functional inline mobile overflow on
components/landing/landing-page-nav-bar.tsxwith a proper slide-in drawer below themd(768 px) breakpoint.What changed
components/landing/landing-page-nav-bar.tsxMenu/Xicons swap on toggle; exposesaria-expanded,aria-controls="mobile-nav-panel",aria-haspopup="dialog"translate-x-full → translate-x-0(300 ms); no JS animation soprefers-reduced-motionis respected automaticallyTab/Shift+Tabcycle within the panel's focusable elements;aria-hiddenset on the closed panel so background links are unreachableusePathnameeffectoverflow: hidden) while the panel is openrole=dialog,aria-modal=true,aria-label="Mobile navigation menu"on the panel;aria-current=pageon active nav linkscomponents/landing/landing-page-nav-bar.test.tsx(new)30 unit tests — all passing:
role,aria-modal, accessible name)aria-current, Log in / Sign Up links, NetworkSwitcherdesign/a11y-checklist.mdNew section documenting all 13 WCAG criteria addressed, keyboard-nav test results, colour-contrast table, and responsive breakpoint behaviour. Resolves P1-03 (focus trap in mobile nav drawer).
WCAG 2.1 AA
<button>, Tab/Shift+Tab trap, all close paths keyboard-operablearia-expanded,aria-controls,aria-haspopup,role=dialog,aria-modal,aria-labelaria-current=page+ blue text colour for active links#0a0a0abackgroundfocus-visible:ring-2 focus-visible:ring-[#598EFF]on all interactive elementsTesting
All 30 tests pass.