fix(accessibility): add right title/alt

[AugustinMauroy]

Description

• Remove useless getAcronymFromString usage on withMetaBar
• Add a diffentitation bettwent alt and fallback
• Add title

Validation

Title should be GitHub username. Alt should be GitHub username. And fallback should be the acronym.

Related Issues

Partially fix #7093 (no new tooltips components added because the are no discussion on that)

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.
• NA 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	Oct 7, 2024 7:42am

[JakobJingleheimer]

🙌

[mikeesto]

LGTM. I probably would have put fallback: getAcronymFromString(username), into withMetaBar.tsx but that's a small nit

[AugustinMauroy]

LGTM. I probably would have put fallback: getAcronymFromString(username), into withMetaBar.tsx but that's a small nit

It depends on how you look at AvatarGroup. I see it as any image with an alt which is the person and the acronym is part of the component itself. But the image ‘search’ logic isn't supposed to be in AvatarGroup.

[github-actions]

Lighthouse Results

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

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	90.47% (589/651)	76.29% (177/232)	94.35% (117/124)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
131	0 💤	0 ❌	0 🔥	5.278s ⏱️