fix(a11y): add lang attribute to language selector for better SR accessibility

[ShubhamOulkar]

Description

This PR fixes an accessibility issue where screen readers (like Windows Narrator, android Talk back) were unable to correctly announce language names in the language selector.

Changes:

• Added hrefLang to the SimpleLocaleConfig type.
• Implemented the lang attribute on DropdownMenu.Item using the hrefLang property.
• Updated Storybook mock data and added localized examples (Japanese/Chinese) for verification.

Manual Testing Recordings:

• English Language Selection (Narrator): Watch chrome testing Video
• Japanese Language Selection (Narrator): Watch chrome testing Video
• TalkBack (Android): chrome testing video

Important

I have used the hrefLang property for the lang attribute instead of the internal code property.
In this project, code is often used for internal routing and directory structures (e.g. zh-cn), whereas hrefLang contains best current practice language tags (e.g. zh-Hans). Using hrefLang ensures that screen readers receive the most accurate language hint for pronunciation.

closes #8668

Note

Additional Testing Welcome
These changes have not been tested on macOS (VoiceOver). If any maintainer or contributor has access to a Mac, verification on VoiceOver would be very helpful to ensure consistent multilingual accessibility across all platforms.

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	Actions	Updated (UTC)
nodejs-org	Error		Mar 3, 2026 7:32am

[github-actions]

👋 Codeowner Review Request

The following codeowners have been identified for the changed files:

Team reviewers: @nodejs/nodejs-website

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

[ShubhamOulkar]

Hi @avivkeller, why preview failed?

[AugustinMauroy]

LGTM !

[ShubhamOulkar]

Hi everyone 👋, during accessibility testing of the language selector, I observed inconsistent support for lang based voice switching across assistive technologies.

Chrome + Narrator correctly switches pronunciation based on lang. However, Firefox + Narrator do not reliably switch voices for inline language changes within menu items.

This seems to be an AT/browser interoperability limitation. I am investigating alternative patterns (e.g. exposing English labels alongside native names) to improve robustness.

Note

Testing on macOS Safari with VoiceOver would be helpful to further validate behavior.