From b843cc4afd0d37231ef663e6c72aab85416fcbe6 Mon Sep 17 00:00:00 2001
From: Deepu S Nath <deepusnath@gmail.com>
Date: Tue, 28 Jul 2026 01:25:26 +0530
Subject: [PATCH] Normalize social link aria-labels in TeamMember to include
 member name

GitHub and personal site links used generic labels ("GitHub Profile",
"Personal Site") that are indistinguishable across dozens of team members
for screen reader users. Include the member's name like the Twitter/
Threads/Bluesky links already do, and mark the decorative icons
aria-hidden so they don't pollute the accessible names.

Fixes #8552

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/MDX/TeamMember.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx
index 2716fa2d1fa..905fbb11290 100644
--- a/src/components/MDX/TeamMember.tsx
+++ b/src/components/MDX/TeamMember.tsx
@@ -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 site`}
                 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>