fix: missing accesibility attributes for mobile navbar

rubenbupe · Aug 15, 2024 · 52c25b2 · 52c25b2
1 parent 853a4e3
commit 52c25b2
Showing 1 changed file with 12 additions and 6 deletions.
diff --git 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,15 +227,17 @@ 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"
                     size="sm"
                     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>