From d8db586158598832b35d9da8668c9f432177617c Mon Sep 17 00:00:00 2001
From: Nathan Knowler <nathan@knowler.dev>
Date: Mon, 2 Feb 2026 20:46:46 -0600
Subject: [PATCH] refactor(a11y): add headings to call to action cards

---
 app/components/CallToAction.vue | 75 +++++++++++++++++----------------
 1 file changed, 39 insertions(+), 36 deletions(-)

diff --git a/app/components/CallToAction.vue b/app/components/CallToAction.vue
index f2d66005c..b7581dac1 100644
--- a/app/components/CallToAction.vue
+++ b/app/components/CallToAction.vue
@@ -13,74 +13,77 @@ const socialLinks = {
     </h2>
 
     <div class="grid gap-4 sm:grid-cols-3 sm:items-stretch sm:grid-rows-[auto,1fr,auto]">
-      <a
-        :href="socialLinks.github"
-        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"
+      <div
+        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="i-carbon:logo-github shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
           <span class="font-medium text-fg">
             {{ $t('about.get_involved.contribute.title') }}
           </span>
-        </div>
-        <p class="text-sm text-fg-muted leading-relaxed">
+        </h3>
+        <p class="z-1 inline text-sm text-fg-muted leading-relaxed">
           {{ $t('about.get_involved.contribute.description') }}
         </p>
-        <span
-          class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
+        <a
+          :href="socialLinks.github"
+          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"
         >
           {{ $t('about.get_involved.contribute.cta') }}
           <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>
 
-      <a
-        :href="socialLinks.discord"
-        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"
+      <div
+        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="i-carbon:chat shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
           <span class="font-medium text-fg">
             {{ $t('about.get_involved.community.title') }}
           </span>
-        </div>
-        <p class="text-sm text-fg-muted leading-relaxed">
+        </h3>
+        <p class="z-1 inline text-sm text-fg-muted leading-relaxed">
           {{ $t('about.get_involved.community.description') }}
         </p>
-        <span
-          class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
+        <a
+          :href="socialLinks.discord"
+          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"
         >
           {{ $t('about.get_involved.community.cta') }}
           <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>
 
-      <a
-        :href="socialLinks.bluesky"
-        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"
+      <div
+        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="i-simple-icons:bluesky shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
           <span class="font-medium text-fg">
             {{ $t('about.get_involved.follow.title') }}
           </span>
-        </div>
-        <p class="text-sm text-fg-muted leading-relaxed">
+        </h3>
+        <p class="z-1 inline text-sm text-fg-muted leading-relaxed">
           {{ $t('about.get_involved.follow.description') }}
         </p>
-        <span
-          class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
+        <a
+          :href="socialLinks.bluesky"
+          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"
         >
           {{ $t('about.get_involved.follow.cta') }}
           <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>