Skip to content

Commit 7d0e972

Browse files
committed
Normalize aria-labels on TeamMember social links
Twitter, Threads, and Bluesky links already included the member's name in their aria-label, but GitHub and personal-site links used generic labels ("GitHub Profile", "Personal Site") with no name — inconsistent and confusing for screen reader users scanning the team page. Standardize all five link types to include the member's name, and mark their icons aria-hidden since the link's accessible name already conveys the same information. Fixes #8552
1 parent 383a1e9 commit 7d0e972

1 file changed

Lines changed: 8 additions & 8 deletions

File tree

src/components/MDX/TeamMember.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ function GroupBadges({group}: {group: string}) {
6868
);
6969
}
7070

71-
// TODO: good alt text for images/links
71+
// TODO: good alt text for images
7272
export function TeamMember({
7373
name,
7474
title,
@@ -113,7 +113,7 @@ export function TeamMember({
113113
aria-label={`${name} on Twitter`}
114114
href={`https://twitter.com/${twitter}`}
115115
className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
116-
<IconTwitter className="pe-1" />
116+
<IconTwitter className="pe-1" aria-hidden="true" />
117117
{twitter}
118118
</ExternalLink>
119119
</div>
@@ -124,7 +124,7 @@ export function TeamMember({
124124
aria-label={`${name} on Threads`}
125125
href={`https://threads.net/${threads}`}
126126
className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
127-
<IconThreads className="pe-1" />
127+
<IconThreads className="pe-1" aria-hidden="true" />
128128
{threads}
129129
</ExternalLink>
130130
</div>
@@ -135,27 +135,27 @@ export function TeamMember({
135135
aria-label={`${name} on Bluesky`}
136136
href={`https://bsky.app/profile/${bsky}`}
137137
className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
138-
<IconBsky className="pe-1" />
138+
<IconBsky className="pe-1" aria-hidden="true" />
139139
{bsky}
140140
</ExternalLink>
141141
</div>
142142
)}
143143
{github && (
144144
<div className="me-4">
145145
<ExternalLink
146-
aria-label="GitHub Profile"
146+
aria-label={`${name} on GitHub`}
147147
href={`https://github.com/${github}`}
148148
className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
149-
<IconGitHub className="pe-1" /> {github}
149+
<IconGitHub className="pe-1" aria-hidden="true" /> {github}
150150
</ExternalLink>
151151
</div>
152152
)}
153153
{personal && (
154154
<ExternalLink
155-
aria-label="Personal Site"
155+
aria-label={`${name}'s personal website`}
156156
href={`https://${personal}`}
157157
className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
158-
<IconLink className="pe-1" /> {personal}
158+
<IconLink className="pe-1" aria-hidden="true" /> {personal}
159159
</ExternalLink>
160160
)}
161161
</div>

0 commit comments

Comments
 (0)