fix(PageCard): improve keyboard accessibility (#4733)

Author: HugoRCD

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" />

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',

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>"
 `;

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>"
 `;