refactor(a11y): add headings to call to action cards (#799)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: knowler

app/components/CallToAction.vue

@@ -34,30 +34,31 @@ const socialLinks = computed(() => [
     </h2>
 
     <div class="grid gap-4 sm:grid-cols-3 sm:items-stretch sm:grid-rows-[auto,1fr,auto]">
-      <a
+      <div
         v-for="link in socialLinks"
         :key="link.id"
-        :href="link.href"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="group grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3"
+        class="group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/50"
       >
-        <div class="flex gap-2">
+        <h3 class="z-1 flex gap-2">
           <span :class="link.icon" class="shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
           <span class="font-medium text-fg">
             {{ link.titleKey }}
           </span>
-        </div>
-        <p class="text-sm text-fg-muted leading-relaxed">
+        </h3>
+        <p class="z-1 text-sm text-fg-muted leading-relaxed">
           {{ link.descriptionKey }}
         </p>
-        <span
-          class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
+        <a
+          :href="link.href"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto focus-visible:outline-none"
         >
           {{ link.ctaKey }}
           <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
-        </span>
-      </a>
+          <span class="absolute z-0 inset-0" aria-hidden="true" />
+        </a>
+      </div>
     </div>
   </div>
 </template>