From 52c25b2a1080e9a92201ab78588a107e398c03e9 Mon Sep 17 00:00:00 2001
From: rubenbupe <rubenbupe@gmail.com>
Date: Thu, 15 Aug 2024 22:12:30 +0200
Subject: [PATCH] fix: missing accesibility attributes for mobile navbar

---
 src/components/Header.astro | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 9e03077..606e5b7 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -130,8 +130,10 @@ const links = [
                         href={linkedinUrl}
                         target="_blank"
                         aria-label="LinkedIn"
-                        ><Icon name="tabler:brand-linkedin" size={18} /></Anchor
-                    >
+                        ><Icon name="tabler:brand-linkedin" size={18} />
+
+                        <span class="sr-only">LinkedIn</span>
+                    </Anchor>
 
                     <Anchor
                         class="p-2"
@@ -140,8 +142,9 @@ const links = [
                         href={githubUrl}
                         target="_blank"
                         aria-label="Github"
-                        ><Icon name="tabler:brand-github" size={18} /></Anchor
-                    >
+                        ><Icon name="tabler:brand-github" size={18} />
+                        <span class="sr-only">Github</span>
+                    </Anchor>
 
                     <Anchor
                         class="p-2"
@@ -224,8 +227,9 @@ const links = [
                     variant="outline"
                     href={linkedinUrl}
                     target="_blank"
-                    ><Icon name="tabler:brand-linkedin" size={18} /></Anchor
-                >
+                    aria-label="LinkedIn"
+                    ><Icon name="tabler:brand-linkedin" size={18} />
+                </Anchor>
 
                 <Anchor
                     class="p-2"
@@ -233,6 +237,7 @@ const links = [
                     variant="outline"
                     href={githubUrl}
                     target="_blank"
+                    aria-label="Github"
                     ><Icon name="tabler:brand-github" size={18} /></Anchor
                 >
 
@@ -242,6 +247,7 @@ const links = [
                     variant="outline"
                     href={mailUrl}
                     target="_blank"
+                    aria-label="Mail"
                 >
                     <Icon name="tabler:mail" size={18} />
                 </Anchor>