fix: add aria-label to social network links for improved accessibility

jonaspm · jonaspm · commit 5c85a6c00c80 · 2025-04-30T12:27:42.000-06:00
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -60,7 +60,7 @@ const projects = [
                     <div class="flex gap-4 mt-6 justify-center lg:justify-start">
                         {
                             socialNetworks.map(socialNetwork => (
-                                <a href={socialNetwork.url} class="text-grayblue-300 hover:text-blue-300 transition-transform hover:scale-110">
+                                <a aria-label={socialNetwork.name} href={socialNetwork.url} class="text-grayblue-300 hover:text-blue-300 transition-transform hover:scale-110">
                                     <div class="h-6 w-6">
                                         <Fragment set:html={socialNetwork.image} />
                                     </div>

Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,7 @@ const projects = [`
`60`	`60`	`<div class="flex gap-4 mt-6 justify-center lg:justify-start">`
`61`	`61`	`{`
`62`	`62`	`socialNetworks.map(socialNetwork => (`
`63`		`- <a href={socialNetwork.url} class="text-grayblue-300 hover:text-blue-300 transition-transform hover:scale-110">`
	`63`	`+ <a aria-label={socialNetwork.name} href={socialNetwork.url} class="text-grayblue-300 hover:text-blue-300 transition-transform hover:scale-110">`
`64`	`64`	`<div class="h-6 w-6">`
`65`	`65`	`<Fragment set:html={socialNetwork.image} />`
`66`	`66`	`</div>`