-
Notifications
You must be signed in to change notification settings - Fork 104
fix: make the navigation drawer focus-safe and prevent desktop link clipping #346
Copy link
Copy link
Closed
Labels
accessibilityKeyboard, screen reader, contrast, and inclusive UXKeyboard, screen reader, contrast, and inclusive UXbugSomething is broken and needs to be fixed.Something is broken and needs to be fixed.frontendFrontend UI, state, and Next.js workFrontend UI, state, and Next.js workgssoc26Related to GirlScript Summer of Code 2026.Related to GirlScript Summer of Code 2026.level:intermediateGSSoC difficulty level: intermediate. Base contributor points: 35.GSSoC difficulty level: intermediate. Base contributor points: 35.priority: mediumUseful issue with moderate urgencyUseful issue with moderate urgencystatus: availableOpen for contributors to pick upOpen for contributors to pick uptestingAutomated tests or manual QA coverageAutomated tests or manual QA coverageui/uxUser interface, interaction, and visual polishUser interface, interaction, and visual polish
Description
Metadata
Metadata
Assignees
Labels
accessibilityKeyboard, screen reader, contrast, and inclusive UXKeyboard, screen reader, contrast, and inclusive UXbugSomething is broken and needs to be fixed.Something is broken and needs to be fixed.frontendFrontend UI, state, and Next.js workFrontend UI, state, and Next.js workgssoc26Related to GirlScript Summer of Code 2026.Related to GirlScript Summer of Code 2026.level:intermediateGSSoC difficulty level: intermediate. Base contributor points: 35.GSSoC difficulty level: intermediate. Base contributor points: 35.priority: mediumUseful issue with moderate urgencyUseful issue with moderate urgencystatus: availableOpen for contributors to pick upOpen for contributors to pick uptestingAutomated tests or manual QA coverageAutomated tests or manual QA coverageui/uxUser interface, interaction, and visual polishUser interface, interaction, and visual polish
Summary
Make the mobile navigation drawer behave as an accessible modal and verify the expanded route set at tablet/desktop widths.
Current gaps
The drawer closes with Escape but does not declare dialog semantics, trap/restore focus, or lock background scrolling. The 12-link desktop pill can also be clipped around the
lgbreakpoint because the page nav hides horizontal overflow.Where to work
frontend/src/components/NavBar.tsxfrontend/src/app/layout.tsxAcceptance criteria