[Suggestion]: Weak Social Links alt text in TeamMember.tsx
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 11.8k
- Forks
- 7.9k
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 11
Description
Summary
The accessibility problem on social links
Page
https://react.dev/community/team
Details
Social links use aria-label={${name} on Twitter}, but Github ("Github Profile") and Personal ("Personal Site") omit the name. On a page with dozens of members these are indistinguishable to screen reader users. Normalize them to include name.
Also adding aria-hidden="true", hiding decorative icons keeps the accessible name clean.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in TeamMember.tsx and inspect how the social-link labels and decorative icons are rendered for the team page. Verify the links expose distinct accessible names containing each member's name and that the icons are hidden from assistive technology, then check the team page for the completed behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100