feat: change the aria label on github and personal site with adding aria-hidden for the icons

Author: rully-saputra15

src/components/MDX/TeamMember.tsx

@@ -92,12 +92,22 @@ export function TeamMember({
         <div
           className="hidden sm:block basis-2/5 rounded overflow-hidden relative"
           style={{width: 300, height: 250}}>
-          <Image src={photo} layout="fill" objectFit="cover" alt={name} />
+          <Image
+            src={photo}
+            layout="fill"
+            objectFit="cover"
+            alt={`${name}'s profile picture`}
+          />
         </div>
         <div
           style={{minHeight: 300}}
           className="block w-full sm:hidden flex-grow basis-2/5 rounded overflow-hidden relative">
-          <Image src={photo} layout="fill" objectFit="cover" alt={name} />
+          <Image
+            src={photo}
+            layout="fill"
+            objectFit="cover"
+            alt={`${name}'s profile picture`}
+          />
         </div>
         <div className="ps-0 sm:ps-6 basis-3/5 items-start">
           <H3 className="mb-1 sm:my-0" id={permalink}>
@@ -113,7 +123,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 +134,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,27 +145,27 @@ 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>
             )}
             {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>