reactjs / reactjs/react.dev

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

Offen Anfängerfreundlich
#8,552 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

type: documentation
Vorherrschende Sprache
JavaScript
Sterne
11.8k
Forks
7.9k
Ø Merge
1 T. 11 Std.
Gemergte PRs (30 T.)
11

Beschreibung

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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginnen Sie in TeamMember.tsx und prüfen Sie, wie die Beschriftungen der Social-Links und dekorative Symbole für die Teamseite gerendert werden. Verifizieren Sie, dass die Links unterschiedliche zugängliche Namen enthalten, die den Namen jedes Mitglieds enthalten, und dass die Symbole für assistive Technologien ausgeblendet sind; prüfen Sie anschließend die Teamseite auf das abgeschlossene Verhalten.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react, typescript
Bereich
accessibility, frontend
Issue-Typ
Bug
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Ruhig
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
78/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.