[Suggestion]: Weak Social Links alt text in TeamMember.tsx

Open Beginner friendly
#8,552 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Quiet
Tech stack
react, typescript
Domain
accessibility, frontend

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.

Description

type: documentation
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.

Dominant language
JavaScript
Stars
11.8k
Forks
7.9k
Avg merge
16h 6m
Merged PRs (30d)
7

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from reactjs/react.dev

All issues in reactjs/react.dev

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.