From 3960b9eb1665e155078f0ed7273ee37ca465eebb Mon Sep 17 00:00:00 2001
From: r-freeman <hello@ryanfreeman.dev>
Date: Sun, 22 Jan 2023 00:12:13 +0000
Subject: [PATCH] Fix minor accessibility issue

---
 components/SocialLink.tsx | 5 +++--
 pages/index.tsx           | 6 +++---
 pages/projects.tsx        | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/components/SocialLink.tsx b/components/SocialLink.tsx
index 4b1348c..02380f4 100644
--- a/components/SocialLink.tsx
+++ b/components/SocialLink.tsx
@@ -3,12 +3,13 @@ import {ElementType} from 'react'
 
 type SocialLink = {
     href: string
+    ariaLabel: string
     icon: ElementType
 }
 
-export function SocialLink({icon: Icon, href}: SocialLink) {
+export function SocialLink({icon: Icon, href, ariaLabel}: SocialLink) {
     return (
-        <Link className="group -m-1 p-1" href={href}>
+        <Link className="group -m-1 p-1" href={href} aria-label={ariaLabel}>
             <Icon
                 className="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300"/>
         </Link>
diff --git a/pages/index.tsx b/pages/index.tsx
index cd1ef43..c762077 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -222,17 +222,17 @@ export default function Home({articles}: { articles: Article[] }) {
                     <div className="mt-6 flex gap-6">
                         <SocialLink
                             href="https://github.com/r-freeman"
-                            aria-label="Follow on GitHub"
+                            ariaLabel="Follow on GitHub"
                             icon={GitHubIcon}
                         />
                         <SocialLink
                             href="https://linkedin.com/in/r-freeman/"
-                            aria-label="Follow on LinkedIn"
+                            ariaLabel="Follow on LinkedIn"
                             icon={LinkedInIcon}
                         />
                         <SocialLink
                             href="https://twitter.com/freemry"
-                            aria-label="Follow on Twitter"
+                            ariaLabel="Follow on Twitter"
                             icon={TwitterIcon}
                         />
                     </div>
diff --git a/pages/projects.tsx b/pages/projects.tsx
index e4358ce..80a3720 100644
--- a/pages/projects.tsx
+++ b/pages/projects.tsx
@@ -83,7 +83,7 @@ export default function Projects() {
                             <p className="relative z-10 mt-6 flex text-sm font-medium text-zinc-400 transition group-hover:text-indigo-500 dark:text-zinc-200">
                                 <SocialLink
                                     href={project.link.href}
-                                    aria-label={`Checkout ${project.name} on GitHub`}
+                                    ariaLabel={`Checkout ${project.name} on GitHub`}
                                     icon={GitHubIcon}
                                 />
                                 <span className="ml-2">{project.link.label}</span>