update: add title attributes to navbar and social media links for bet…

…ter accessibility
Tsuzat · Dec 27, 2024 · 8b261d5 · 8b261d5
1 parent a7e18b9
commit 8b261d5
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/lib/components/custom/navbar.svelte b/src/lib/components/custom/navbar.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <nav class="flex w-full items-center justify-between py-2">
-	<a href="/" class="inline-flex items-center gap-4 text-xl font-bold">
+	<a href="/" class="inline-flex items-center gap-4 text-xl font-bold" title="Home">
 		<Lottie animationData={lottieLogo} class="size-12" />
 		<span class="hidden text-muted-foreground sm:block">TSUZAT</span>
 	</a>
@@ -24,6 +24,7 @@
 				class:current={page.url.pathname.startsWith(`/${link}`)}
 				href="/{link}"
 				class="hidden capitalize sm:block"
+				title="/{link}"
 			>
 				{link}
 			</a>
@@ -40,6 +41,7 @@
 						onclick={() => {
 							goto(`/${link}`);
 						}}
+						title="/{link}"
 						class={cn(page.url.pathname.startsWith(`/${link}`) && 'underline', 'capitalize')}
 					>
 						{link}

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -47,6 +47,7 @@
 							target="_blank"
 							rel="noreferrer noopener"
 							class="text-[#a100ff] underline transition-all duration-500 hover:drop-shadow-[0_0_1rem_#a100ff]"
+							title="Accenture Hover Card"
 						>
 							@Accenture
 						</HoverCard.Trigger>
@@ -73,6 +74,7 @@
 					href="https://github.com/Tsuzat"
 					target="_blank"
 					class="flex items-center transition-all duration-500 hover:text-foreground hover:drop-shadow-[0_0_1rem_#000000] dark:hover:drop-shadow-[0_0_1rem_#FFFFFF]"
+					title="Github Link"
 				>
 					<Github class="mr-2 size-5" />
 					<span class="hidden sm:block">Github</span>
@@ -81,6 +83,7 @@
 					href="https://www.linkedin.com/in/alok-singh-tsuzat"
 					target="_blank"
 					class="flex items-center transition-all duration-500 hover:text-[#0077b5] hover:drop-shadow-[0_0_1rem_#0077b5]"
+					title="Linkedin Link"
 				>
 					<Linkedin class="mr-2 size-5 text-[#0077b5]" />
 					<span class="hidden sm:block">LinkedIn</span>
@@ -89,6 +92,7 @@
 					href="mailto:[email protected] "
 					target="_blank"
 					class="flex items-center transition-all duration-500 hover:text-[#ea4335] hover:drop-shadow-[0_0_1rem_#ea4335]"
+					title="Email"
 				>
 					<Email class="mr-2 size-5 text-[#ea4335]" />
 					<span class="hidden sm:block">Email</span>
@@ -97,6 +101,7 @@
 					href="https://x.com/TheTsuzat"
 					target="_blank"
 					class="flex items-center transition-all duration-500 hover:text-foreground hover:drop-shadow-[0_0_1rem_#000000] dark:hover:drop-shadow-[0_0_1rem_#FFFFFF]"
+					title="Twitter/X"
 				>
 					<Twitter class="mr-2 size-5" />
 					<span class="hidden sm:block">X/Twitter</span>