Skip to content

fix: make mobile navigation toggle keyboard accessible#8922

Open
musshiyaki wants to merge 1 commit into
nodejs:mainfrom
musshiyaki:codex/fix-mobile-menu-keyboard-toggle
Open

fix: make mobile navigation toggle keyboard accessible#8922
musshiyaki wants to merge 1 commit into
nodejs:mainfrom
musshiyaki:codex/fix-mobile-menu-keyboard-toggle

Conversation

@musshiyaki
Copy link
Copy Markdown

Summary

Make the mobile navigation menu toggle a native button so it can be reached and activated with keyboard navigation.

This also adds aria-expanded/aria-controls to expose the menu state and updates the existing mobile menu E2E coverage to verify Enter and Space activation.

Fixes: #7895

Validation

  • pnpm exec prettier packages/ui-components/src/Containers/NavBar/index.tsx packages/ui-components/src/Containers/NavBar/index.module.css apps/site/tests/e2e/general-behavior.spec.ts --check
  • pnpm --filter @node-core/ui-components lint
  • pnpm --filter @node-core/ui-components lint:types
  • pnpm --filter @node-core/website lint:js
  • pnpm --filter @node-core/website lint:types
  • PLAYWRIGHT_BASE_URL=http://localhost:3000 pnpm --filter @node-core/website playwright tests/e2e/general-behavior.spec.ts -g "functioning mobile menu" --project=chromium
  • git diff --check

Note: local validation was run with Node.js v25.8.2, so apps/site emitted its expected node: 24.x engine warning, but the checks above completed successfully.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 31, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
nodejs-org Ready Ready Preview May 31, 2026 4:35pm

Request Review

@musshiyaki musshiyaki marked this pull request as ready for review May 31, 2026 16:36
@musshiyaki musshiyaki requested a review from a team as a code owner May 31, 2026 16:36
@cursor
Copy link
Copy Markdown

cursor Bot commented May 31, 2026

PR Summary

Low Risk
Localized NavBar accessibility and presentation change with added E2E coverage; no auth, data, or API impact.

Overview
Replaces the mobile nav checkbox + label pattern with a native button that toggles menu visibility via React state, so keyboard users can focus and activate it with Enter and Space.

The collapsible panel gets a stable id="navbar-menu", wired with aria-controls and aria-expanded. Visibility is driven by isMenuOpen (flex vs hidden, with xl:flex unchanged on desktop) instead of CSS peer-checked. Toggle styling adds focus-visible ring treatment and drops the hidden checkbox markup.

E2E coverage targets #navbar-menu and asserts keyboard open/close after the existing click toggles.

Reviewed by Cursor Bugbot for commit 1e8e264. Bugbot is set up for automated code reviews on this repo. Configure here.

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.

The toggle navigation menu button is not keyboard accessible

1 participant