You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
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.
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
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
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-controlsto 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 --checkpnpm --filter @node-core/ui-components lintpnpm --filter @node-core/ui-components lint:typespnpm --filter @node-core/website lint:jspnpm --filter @node-core/website lint:typesPLAYWRIGHT_BASE_URL=http://localhost:3000 pnpm --filter @node-core/website playwright tests/e2e/general-behavior.spec.ts -g "functioning mobile menu" --project=chromiumgit diff --checkNote: local validation was run with Node.js
v25.8.2, soapps/siteemitted its expectednode: 24.xengine warning, but the checks above completed successfully.