Add title attributes to anchor tags in Header and Footer components

Michael-Liendo · Jan 24, 2024 · 8e76830 · 8e76830
1 parent 46a7a55
commit 8e76830
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -13,6 +13,7 @@
   <div class="flex justify-center">
     <small
       ><a
+        title="Source code"
         class="underline"
         href="https://github.com/Michael-Liendo/michaelliendo.com"
         >Source code</a

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -79,26 +79,42 @@
       class="hidden sm:flex text-xl items-center sm:space-x-10 md:space-x-16 px-10 py-2 bg-[#f5f5f5] dark:bg-slate-900 border border-black dark:border-white rounded-full"
     >
       <li>
-        <a href="{baseLocaleUrl}/">{$LL.LAYOUT.NAV.HOME()}</a>
+        <a title="Go to the main page" href="{baseLocaleUrl}/"
+          >{$LL.LAYOUT.NAV.HOME()}</a
+        >
       </li>
       <li>
-        <a href="{baseLocaleUrl}/notes">{$LL.LAYOUT.NAV.NOTES()}</a>
+        <a title="Read about Michael's notes" href="{baseLocaleUrl}/notes"
+          >{$LL.LAYOUT.NAV.NOTES()}</a
+        >
       </li>
       <li>
-        <a href="{baseLocaleUrl}/projects">{$LL.LAYOUT.NAV.PROJECTS()}</a>
+        <a title="View Michael's Projects" href="{baseLocaleUrl}/projects"
+          >{$LL.LAYOUT.NAV.PROJECTS()}</a
+        >
       </li>
     </ul>
     <ul
       class="text-xl flex sm:hidden items-center space-x-6 px-5 py-2 bg-[#f5f5f5] dark:bg-slate-900 border border-black dark:border-white rounded-full"
       aria-label="Main navigation"
     >
-      <li><a href="{baseLocaleUrl}/" aria-label="Home"><Home /></a></li>
       <li>
-        <a href="{baseLocaleUrl}/notes" aria-label="Notes"><Notebook /></a>
+        <a title="Go to the main page" href="{baseLocaleUrl}/" aria-label="Home"
+          ><Home /></a
+        >
+      </li>
+      <li>
+        <a
+          title="Read about Michael's notes"
+          href="{baseLocaleUrl}/notes"
+          aria-label="Notes"><Notebook /></a
+        >
       </li>
       <li>
-        <a href="{baseLocaleUrl}/projects" aria-label="Projects"
-          ><PodiumGold /></a
+        <a
+          title="View Michael's Projects"
+          href="{baseLocaleUrl}/projects"
+          aria-label="Projects"><PodiumGold /></a
         >
       </li>
     </ul>

diff --git a/src/routes/[[lang=lang]]/+page.svelte b/src/routes/[[lang=lang]]/+page.svelte
@@ -139,6 +139,7 @@
     {#each data.notes as note, index}
       {#if index === 0}
         <a
+          title="Read more about {note.title}"
           href={`${baseLocaleUrl}/notes/${note.slug}`}
           class="rounded-2xl flex flex-col justify-between w-full h-full bg-[#f5f5f5] dark:bg-slate-900 xl:col-span-2 xl:row-span-2"
           itemprop="blogPost"
@@ -199,6 +200,7 @@
       {/if}
       {#if index === 1 || index === 4}
         <a
+          title="Read more about {note.title}"
           href={`${baseLocaleUrl}/notes/${note.slug}`}
           class="rounded-2xl flex flex-col justify-between w-full h-full px-5 py-4 bg-[#f5f5f5] dark:bg-slate-900 xl:col-span-2"
           itemprop="blogPost"
@@ -245,6 +247,7 @@
       {/if}
       {#if index === 2 || index === 3}
         <a
+          title="Read more about {note.title}"
           href={`${baseLocaleUrl}/notes/${note.slug}`}
           class="block md:flex rounded-2xl w-full h-full bg-[#f5f5f5] dark:bg-slate-900 xl:col-span-4"
           itemprop="blogPost"