accessibility

src/components/BreadCrumbCell.vue

@@ -4,7 +4,7 @@ const props = defineProps({
 })
 </script>
 <template>
-    <a :href="`#${url}`">
+    <a :href="`#${url}`" :aria-label="url">
       <span class="hover:text-blue transition-all ease-in-out duration-250 cursor-pointer" role="link">
         <slot></slot>
       </span>

src/components/Footer.vue

@@ -6,10 +6,11 @@ import GithubLogo from './../assets/icons/github.svg';
 <template>
     <div class="flex flex-col justify-center items-center bg-grey-400 text-white pt-40 pb-8 px-12 sm:px-64">
       <div class="flex flex-row justify-center items-center gap-2 py-4">
-        <a href="//www.linkedin.com/in/lucas-delanier" target="_blank" rel="noopener">
+        <a href="//www.linkedin.com/in/lucas-delanier" target="_blank" rel="noopener"
+           aria-label="Linkedin - (link opens in a new tab)">
           <LinkedinLogo class="w-8 h-8 text-gray-500"/>
         </a>
-        <a href="//github.com/WINK3R" target="_blank" rel="noopener">
+        <a href="//github.com/WINK3R" target="_blank" rel="noopener" aria-label="Github - (link opens in a new tab)">
           <GithubLogo class="w-8 h-8 text-gray-500"/>
         </a>
       </div>

src/components/LinkButton.vue

@@ -4,7 +4,7 @@ const props = defineProps({
 })
 </script>
 <template>
-  <a :href="props.url" target="_blank">
+  <a :href="props.url" target="_blank" :aria-label="`${props.url} - (link opens in a new tab)`">
     <button class="px-10 bg-grey-900 border border-grey-300 flex flex-row justify-center items-center py-3 gap-2
     text-grey-100 transition-all duration-300 ease-in-out hover:bg-grey-100/10 hover:text-white hover:shadow-xl
     hover:-translate-y-1 hover:scale-105" :aria-label="`redirect to ${props.url}`">