fix: accessibility of the mobile nav bar

[aduh95]

Description

Validation

Navigate to the website with VoiceOver (or TalkBack, or another screen reader) enabled, try to use the navigation menu.

Related Issues

Fixes: #7423

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run npm run format to ensure the code follows the style guide.
• I have run npm run test to check if all tests are passing.
• I have run npx turbo 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 Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Jan 28, 2025 9:47pm

[AugustinMauroy]

LGMT !

[shanpriyan]

LGTM!

[canerakdas]

When I try it on Safari with VoiceOver on my phone, the Node.js logo is not accessible. Applying the SVG pattern 5 found in the following link seems like a more suitable scenario; https://www.deque.com/blog/creating-accessible-svgs/

[aduh95]

When I try it on Safari with VoiceOver on my phone, the Node.js logo is not accessible. Applying the SVG pattern 5 found in the following link seems like a more suitable scenario; https://www.deque.com/blog/creating-accessible-svgs/

I've tried with iOS 18.3 and VoiceOver lets me select the logo, and enabling it does bring me back to the home page. Could you share more details please?

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🔴 67	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/about/previous-releases	🟢 99	🟢 100	🟢 100	🟢 92	🔗
/en/download	🟢 98	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 100	🟢 100	🟢 96	🟢 92	🔗

[ovflowd]

I believe we can proceed with this PR as is, and then iterate over if needed regarding the VoiceOver issue and possible Radix component from the Input element.

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	88.71% (739/833)	75.94% (240/316)	87.65% (142/162)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
182	0 💤	0 ❌	0 🔥	5.889s ⏱️

[canerakdas]

As far as I checked, VoiceOver tries to read all the svg's we use because we did not specify the role as image. I will open a PR to fix these 🤔

ScreenRecording_02-01-2025.23-18-25_1.mov

I learned something new, thank you for your contribution @aduh95