Fix(NavBar, AvatarGroup): Improve keyboard accessibility for interactive controls

[Shubham-1068]

Description

Improve keyboard accessibility and ARIA semantics across interactive UI:

• AvatarGroup: make the “show more” control keyboard-accessible and announced as a button
• NavBar: enable keyboard toggling of the mobile menu via the label trigger
• Docs: add an Accessibility subsection with guidance and a recommended pattern for interactive non-semantic elements

This addresses WCAG 2.1 AA requirements for keyboard operability and proper roles/names while preserving existing visuals and pointer behavior.

Changes

• packages/ui-components/src/Common/AvatarGroup/index.tsx
  • Add role="button" and tabIndex={0} to the “+N/–N” control
  • Handle Enter and Space in onKeyDown to toggle
  • Reference: packages/ui-components/src/Common/AvatarGroup/index.tsx:66
• packages/ui-components/src/Containers/NavBar/index.tsx
  • Add tabIndex={0} and onKeyDown to the mobile menu label trigger
  • Pressing Enter/Space toggles #sidebarItemToggler
  • Reference: packages/ui-components/src/Containers/NavBar/index.tsx:53
• docs/creating-components.md
  • Add “Accessibility” guidance on interactive controls
  • Include a concise code pattern for role="button", tabIndex, and keyboard handling
  • Reference: docs/creating-components.md (Accessibility subsection below “Responsive Design”)

Validation

• Keyboard
  • Tab to the AvatarGroup “+N/–N” control and press Enter or Space to expand/collapse
  • Tab to the NavBar mobile menu trigger and press Enter or Space to open/close
• Screen readers
  • Confirm the AvatarGroup control is announced as a button
  • Confirm the NavBar trigger conveys its purpose through the existing aria-label

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run pnpm format to ensure the code follows the style guide.
• I have run pnpm test to check if all tests are passing.
• I have run pnpm build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

[vercel]

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

Project	Deployment	Review	Updated (UTC)
nodejs-org	Ready	Preview	Dec 13, 2025 7:22pm

[github-actions]

👋 Codeowner Review Request

The following codeowners have been identified for the changed files:

Team reviewers: @nodejs/nodejs-website @nodejs/web-infra

Please review the changes when you have a chance. Thank you! 🙏

[avivkeller]

Isn't there a way to do this without JavaScript onKeyDown? That seems like un-needed complexity

[codecov]

Codecov Report

❌ Patch coverage is 57.14286% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 73.62%. Comparing base (0d0a4a4) to head (899a997).
⚠️ Report is 1 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...ges/ui-components/src/Common/AvatarGroup/index.tsx	57.14%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8416      +/-   ##
==========================================
- Coverage   73.64%   73.62%   -0.03%     
==========================================
  Files         107      107              
  Lines        9161     9168       +7     
  Branches      312      312              
==========================================
+ Hits         6747     6750       +3     
- Misses       2412     2416       +4     
  Partials        2        2              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Shubham-1068]

@avivkeller
We need keyboard support for non-native interactive elements to meet WCAG. role and tabIndex alone don’t handle Enter/Space activation, so some JavaScript is required for keyboard operability. Adding onKeyDown is the smallest and lowest-risk way to do this without refactoring, and it restores accessibility immediately.

[ovflowd]

I'm -1 of this change. I'm unsure of what you're trying to achieve here, but this menu is only visible on mobile screens, which very often are touch-only. Screen readers should already be accessible to this with aria-label, there's no need for an onKeyDown here.

[ovflowd]

You can already navigate through avatars with tab without any of this. -1 to the change.

[ovflowd]

These changes feel misplaced. They feel like changes that were generated by AI without actually confirming if there were accessibility issues on said components or if they actually are pertinent for their use cases, likely a prompt such as "Check with components of this repository likely have accessibility issues not confirming with the ARIA format, especially missing keyboard navigations"

I could be wrong, but for a first-time contributor to know we have these docs and write changes directly on them, it's... Unlikely.

If the PR description and code feels like AI, quacks like AI and looks like AI, then it likely is.

That isn't a bad thing, I use AI all the time, but the issue is that these changes were likely not validated/tested against (before / after) nor screenshots showing these new changes.

I appreciate your efforts here, but I'm against this change.