From f0003dda167a86f3d1fe11a416a290b14ea956c5 Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@epitech.eu>
Date: Wed, 13 Aug 2025 13:51:19 +0100
Subject: [PATCH] fix(PageCard): improve keyboard accessibility

---
 src/runtime/components/PageCard.vue           |  1 -
 src/theme/page-card.ts                        |  5 ++++
 .../__snapshots__/PageCard-vue.spec.ts.snap   | 28 +++++++++----------
 .../__snapshots__/PageCard.spec.ts.snap       | 28 +++++++++----------
 4 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/runtime/components/PageCard.vue b/src/runtime/components/PageCard.vue
index b17b30ff2e..c078601390 100644
--- a/src/runtime/components/PageCard.vue
+++ b/src/runtime/components/PageCard.vue
@@ -172,7 +172,6 @@ const ariaLabel = computed(() => {
       :aria-label="ariaLabel"
       v-bind="{ to, target, ...$attrs }"
       class="focus:outline-none peer"
-      tabindex="-1"
       raw
     >
       <span class="absolute inset-0" aria-hidden="true" />
diff --git a/src/theme/page-card.ts b/src/theme/page-card.ts
index 84eddce74c..da72414877 100644
--- a/src/theme/page-card.ts
+++ b/src/theme/page-card.ts
@@ -144,6 +144,11 @@ export default (options: Required<NuxtOptions['ui']>) => ({
     class: {
       root: '[--spotlight-color:var(--ui-bg-inverted)]'
     }
+  }, {
+    to: true,
+    class: {
+      root: 'has-focus-visible:ring-2 has-focus-visible:ring-primary'
+    }
   }],
   defaultVariants: {
     variant: 'outline',
diff --git a/test/components/__snapshots__/PageCard-vue.spec.ts.snap b/test/components/__snapshots__/PageCard-vue.spec.ts.snap
index e493b85911..dd730f7cd4 100644
--- a/test/components/__snapshots__/PageCard-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageCard-vue.spec.ts.snap
@@ -599,11 +599,11 @@ exports[`PageCard > renders with title slot correctly 1`] = `
 `;
 
 exports[`PageCard > renders with to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default transition hover:bg-elevated/50">
+"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
     <!--v-if-->
-  </div><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Card link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+  </div><a href="https://github.com/benjamincanac" target="_blank" aria-label="Card link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
 `;
 
@@ -662,7 +662,7 @@ exports[`PageCard > renders with variant ghost highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant ghost to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg transition hover:bg-elevated/50">
+"<div data-orientation="vertical" class="relative flex rounded-lg transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
     <div class="flex flex-col flex-1 items-start">
@@ -674,7 +674,7 @@ exports[`PageCard > renders with variant ghost to correctly 1`] = `
       </div>
       <!--v-if-->
     </div>
-  </div><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+  </div><a href="https://github.com/benjamincanac" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
 `;
 
@@ -715,7 +715,7 @@ exports[`PageCard > renders with variant naked highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant naked to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg transition">
+"<div data-orientation="vertical" class="relative flex rounded-lg transition has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
     <div class="flex flex-col flex-1 items-start">
@@ -727,7 +727,7 @@ exports[`PageCard > renders with variant naked to correctly 1`] = `
       </div>
       <!--v-if-->
     </div>
-  </div><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+  </div><a href="https://github.com/benjamincanac" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
 `;
 
@@ -768,7 +768,7 @@ exports[`PageCard > renders with variant outline highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant outline to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default transition hover:bg-elevated/50">
+"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
     <div class="flex flex-col flex-1 items-start">
@@ -780,7 +780,7 @@ exports[`PageCard > renders with variant outline to correctly 1`] = `
       </div>
       <!--v-if-->
     </div>
-  </div><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+  </div><a href="https://github.com/benjamincanac" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
 `;
 
@@ -821,7 +821,7 @@ exports[`PageCard > renders with variant soft highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant soft to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 transition hover:bg-elevated">
+"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 transition hover:bg-elevated has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
     <div class="flex flex-col flex-1 items-start">
@@ -833,7 +833,7 @@ exports[`PageCard > renders with variant soft to correctly 1`] = `
       </div>
       <!--v-if-->
     </div>
-  </div><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+  </div><a href="https://github.com/benjamincanac" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
 `;
 
@@ -874,7 +874,7 @@ exports[`PageCard > renders with variant solid highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant solid to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-inverted text-inverted transition hover:bg-inverted/90">
+"<div data-orientation="vertical" class="relative flex rounded-lg bg-inverted text-inverted transition hover:bg-inverted/90 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
     <div class="flex flex-col flex-1 items-start">
@@ -886,7 +886,7 @@ exports[`PageCard > renders with variant solid to correctly 1`] = `
       </div>
       <!--v-if-->
     </div>
-  </div><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+  </div><a href="https://github.com/benjamincanac" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
 `;
 
@@ -927,7 +927,7 @@ exports[`PageCard > renders with variant subtle highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant subtle to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring ring-default transition hover:bg-elevated hover:ring-accented">
+"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring ring-default transition hover:bg-elevated hover:ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
     <div class="flex flex-col flex-1 items-start">
@@ -939,6 +939,6 @@ exports[`PageCard > renders with variant subtle to correctly 1`] = `
       </div>
       <!--v-if-->
     </div>
-  </div><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+  </div><a href="https://github.com/benjamincanac" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
 `;
diff --git a/test/components/__snapshots__/PageCard.spec.ts.snap b/test/components/__snapshots__/PageCard.spec.ts.snap
index 579da878f4..294af1ae60 100644
--- a/test/components/__snapshots__/PageCard.spec.ts.snap
+++ b/test/components/__snapshots__/PageCard.spec.ts.snap
@@ -599,11 +599,11 @@ exports[`PageCard > renders with title slot correctly 1`] = `
 `;
 
 exports[`PageCard > renders with to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default transition hover:bg-elevated/50">
+"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
     <!--v-if-->
-  </div><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Card link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+  </div><a href="https://github.com/benjamincanac" rel="noopener noreferrer" aria-label="Card link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
 `;
 
@@ -662,7 +662,7 @@ exports[`PageCard > renders with variant ghost highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant ghost to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg transition hover:bg-elevated/50">
+"<div data-orientation="vertical" class="relative flex rounded-lg transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
     <div class="flex flex-col flex-1 items-start">
@@ -674,7 +674,7 @@ exports[`PageCard > renders with variant ghost to correctly 1`] = `
       </div>
       <!--v-if-->
     </div>
-  </div><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+  </div><a href="https://github.com/benjamincanac" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
 `;
 
@@ -715,7 +715,7 @@ exports[`PageCard > renders with variant naked highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant naked to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg transition">
+"<div data-orientation="vertical" class="relative flex rounded-lg transition has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
     <div class="flex flex-col flex-1 items-start">
@@ -727,7 +727,7 @@ exports[`PageCard > renders with variant naked to correctly 1`] = `
       </div>
       <!--v-if-->
     </div>
-  </div><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+  </div><a href="https://github.com/benjamincanac" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
 `;
 
@@ -768,7 +768,7 @@ exports[`PageCard > renders with variant outline highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant outline to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default transition hover:bg-elevated/50">
+"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
     <div class="flex flex-col flex-1 items-start">
@@ -780,7 +780,7 @@ exports[`PageCard > renders with variant outline to correctly 1`] = `
       </div>
       <!--v-if-->
     </div>
-  </div><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+  </div><a href="https://github.com/benjamincanac" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
 `;
 
@@ -821,7 +821,7 @@ exports[`PageCard > renders with variant soft highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant soft to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 transition hover:bg-elevated">
+"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 transition hover:bg-elevated has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
     <div class="flex flex-col flex-1 items-start">
@@ -833,7 +833,7 @@ exports[`PageCard > renders with variant soft to correctly 1`] = `
       </div>
       <!--v-if-->
     </div>
-  </div><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+  </div><a href="https://github.com/benjamincanac" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
 `;
 
@@ -874,7 +874,7 @@ exports[`PageCard > renders with variant solid highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant solid to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-inverted text-inverted transition hover:bg-inverted/90">
+"<div data-orientation="vertical" class="relative flex rounded-lg bg-inverted text-inverted transition hover:bg-inverted/90 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
     <div class="flex flex-col flex-1 items-start">
@@ -886,7 +886,7 @@ exports[`PageCard > renders with variant solid to correctly 1`] = `
       </div>
       <!--v-if-->
     </div>
-  </div><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+  </div><a href="https://github.com/benjamincanac" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
 `;
 
@@ -927,7 +927,7 @@ exports[`PageCard > renders with variant subtle highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant subtle to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring ring-default transition hover:bg-elevated hover:ring-accented">
+"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring ring-default transition hover:bg-elevated hover:ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
     <div class="flex flex-col flex-1 items-start">
@@ -939,6 +939,6 @@ exports[`PageCard > renders with variant subtle to correctly 1`] = `
       </div>
       <!--v-if-->
     </div>
-  </div><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+  </div><a href="https://github.com/benjamincanac" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
 `;