accessibility

src/components/BreadCrumbCell.vue

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

src/components/HeaderContainer.vue

@@ -34,12 +34,12 @@ function copyEmail(event) {
         <div class="flex items-center gap-7">
             <p class="selectable hidden lg:block">Delanierlucas@gmail.com</p>
             <div class="relative parent hidden lg:block">
-              <PrimaryButton text="Copier" @click="copyEmail"/>
+              <PrimaryButton text="Copier" @click="copyEmail" role="button"/>
               <Vue3Lottie ref="copyAnimation" :animationData="CopyJson" :height="180" :width="180"
                           class="absolute z-10 pointer-events-none child" :auto-play="false" :loop="false"
                           v-show="display"/>
             </div>
-            <PrimaryButton :text="$t('cv')" @click="openCV"/>
+            <PrimaryButton :text="$t('cv')" @click="openCV" onkeydown="openCV();" role="button"/>
         </div>
         <div class=" hidden sm:block">
             <BreadCrumb>

src/components/LinkButton.vue

@@ -3,12 +3,11 @@ const props = defineProps({
     url: String
 })
 </script>
-
 <template>
   <a :href="props.url" target="_blank">
     <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">
+    hover:-translate-y-1 hover:scale-105" :aria-label="`redirect to ${props.url}`">
         <slot></slot>
     </button>
   </a>

src/components/PrimaryButton.vue

@@ -4,8 +4,8 @@ const props = defineProps({
 })
 </script>
 <template>
-    <div class="px-7 py-1.5 bg-blue rounded-full text-sm font-bold shadow-lg shadow-blue/20 transition-all ease-in-out
-    delay-75 text-nowrap duration-150 hover:shadow-none hover:scale-105 cursor-pointer">
+    <div class="px-7 py-1.5 bg-blue rounded-full text-sm font-bold shadow-lg shadow-blue/20 transition-all
+    ease-in-out delay-75 text-nowrap duration-150 hover:shadow-none hover:scale-105 cursor-pointer">
         <p>{{ props.text }}</p>
     </div>
 </template>