From 7d0e9725a6d074d9db71a7bc6f584ff1516f271e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 14 Aug 2026 00:30:17 +0000
Subject: [PATCH] Normalize aria-labels on TeamMember social links
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 src/components/MDX/TeamMember.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx
index 2716fa2d1fa..3be1fa7a7c8 100644
--- a/src/components/MDX/TeamMember.tsx
+++ b/src/components/MDX/TeamMember.tsx
@@ -68,7 +68,7 @@ function GroupBadges({group}: {group: string}) {
   );
 }
 
-// TODO: good alt text for images/links
+// TODO: good alt text for images
 export function TeamMember({
   name,
   title,
@@ -113,7 +113,7 @@ export function TeamMember({
                   aria-label={`${name} on Twitter`}
                   href={`https://twitter.com/${twitter}`}
                   className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-                  <IconTwitter className="pe-1" />
+                  <IconTwitter className="pe-1" aria-hidden="true" />
                   {twitter}
                 </ExternalLink>
               </div>
@@ -124,7 +124,7 @@ export function TeamMember({
                   aria-label={`${name} on Threads`}
                   href={`https://threads.net/${threads}`}
                   className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-                  <IconThreads className="pe-1" />
+                  <IconThreads className="pe-1" aria-hidden="true" />
                   {threads}
                 </ExternalLink>
               </div>
@@ -135,7 +135,7 @@ export function TeamMember({
                   aria-label={`${name} on Bluesky`}
                   href={`https://bsky.app/profile/${bsky}`}
                   className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-                  <IconBsky className="pe-1" />
+                  <IconBsky className="pe-1" aria-hidden="true" />
                   {bsky}
                 </ExternalLink>
               </div>
@@ -143,19 +143,19 @@ export function TeamMember({
             {github && (
               <div className="me-4">
                 <ExternalLink
-                  aria-label="GitHub Profile"
+                  aria-label={`${name} on GitHub`}
                   href={`https://github.com/${github}`}
                   className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-                  <IconGitHub className="pe-1" /> {github}
+                  <IconGitHub className="pe-1" aria-hidden="true" /> {github}
                 </ExternalLink>
               </div>
             )}
             {personal && (
               <ExternalLink
-                aria-label="Personal Site"
+                aria-label={`${name}'s personal website`}
                 href={`https://${personal}`}
                 className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-                <IconLink className="pe-1" /> {personal}
+                <IconLink className="pe-1" aria-hidden="true" /> {personal}
               </ExternalLink>
             )}
           </div>