From 8991915bea2872ff2a067a39d7455220f276837b Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 19 Jan 2026 12:06:03 +0000
Subject: [PATCH] fix: improve focus rings

---
 app/components/BlueskyComment.vue             | 26 ++++-----
 app/components/BlueskyComments.client.vue     |  6 +--
 app/components/GridLink.vue                   |  2 +-
 app/components/TheBlogIndex.server.vue        |  1 +
 app/components/TheHome.server.vue             | 53 +++++++++++++------
 app/components/TheSponsors.vue                |  2 +-
 app/components/TheTalks.server.vue            | 22 +++++---
 app/components/TheUses.server.vue             |  7 +--
 app/components/ToggleColorMode.vue            |  2 +-
 .../layout/TheSiteFooter.server.vue           |  4 +-
 app/components/layout/TheSiteHeader.vue       |  8 +--
 app/pages/ama.vue                             | 10 ++--
 app/pages/feedback.vue                        |  4 +-
 app/pages/live.vue                            | 11 ++--
 app/pages/work.vue                            | 10 ++--
 15 files changed, 99 insertions(+), 69 deletions(-)

diff --git a/app/components/BlueskyComment.vue b/app/components/BlueskyComment.vue
index 34ed84cf..d3886c21 100644
--- a/app/components/BlueskyComment.vue
+++ b/app/components/BlueskyComment.vue
@@ -61,7 +61,7 @@ const maxDepth = 4
       :href="`https://bsky.app/profile/${comment.author.handle}`"
       target="_blank"
       rel="noopener"
-      class="flex-shrink-0"
+      class="flex-shrink-0 rounded-full f-ring"
     >
       <img
         v-if="comment.author.avatar"
@@ -86,7 +86,7 @@ const maxDepth = 4
           :href="`https://bsky.app/profile/${comment.author.handle}`"
           target="_blank"
           rel="noopener"
-          class="font-medium hover:underline truncate"
+          class="font-medium hover:underline truncate rounded f-ring"
         >
           {{ comment.author.displayName || `@${comment.author.handle}` }}
         </a>
@@ -100,7 +100,7 @@ const maxDepth = 4
           :href="commentUrl"
           target="_blank"
           rel="noopener"
-          class="text-muted text-sm hover:underline"
+          class="text-muted text-sm hover:underline rounded f-ring"
         >
           <NuxtTime
             relative
@@ -119,7 +119,7 @@ const maxDepth = 4
             :href="getFeatureUrl(segment.features[0])"
             target="_blank"
             rel="noopener"
-            class="text-blue-600 dark:text-blue-400 hover:underline"
+            class="text-blue-600 dark:text-blue-400 hover:underline rounded f-ring"
           >{{ segment.text }}</a>
           <template v-else>
             {{ segment.text }}
@@ -137,7 +137,7 @@ const maxDepth = 4
           :href="img.fullsize"
           target="_blank"
           rel="noopener"
-          class="block"
+          class="block rounded-lg f-ring"
         >
           <img
             :src="img.thumb"
@@ -153,7 +153,7 @@ const maxDepth = 4
         :href="comment.embed.external.uri"
         target="_blank"
         rel="noopener"
-        class="mt-2 block border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden hover:border-gray-400 dark:hover:border-gray-600 transition-colors"
+        class="mt-2 block border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden hover:border-gray-400 dark:hover:border-gray-600 transition-colors f-ring-inset"
       >
         <div class="flex">
           <img
@@ -209,7 +209,7 @@ const maxDepth = 4
         :href="`https://bsky.app/profile/${comment.author.handle}`"
         target="_blank"
         rel="noopener"
-        class="flex-shrink-0"
+        class="flex-shrink-0 rounded-full f-ring"
       >
         <img
           v-if="comment.author.avatar"
@@ -231,7 +231,7 @@ const maxDepth = 4
         :href="`https://bsky.app/profile/${comment.author.handle}`"
         target="_blank"
         rel="noopener"
-        class="font-medium hover:underline truncate"
+        class="font-medium hover:underline truncate rounded f-ring"
       >
         {{ comment.author.displayName || `@${comment.author.handle}` }}
       </a>
@@ -245,7 +245,7 @@ const maxDepth = 4
         :href="commentUrl"
         target="_blank"
         rel="noopener"
-        class="text-muted text-sm hover:underline"
+        class="text-muted text-sm hover:underline rounded f-ring"
       >
         <NuxtTime
           relative
@@ -264,7 +264,7 @@ const maxDepth = 4
           :href="getFeatureUrl(segment.features[0])"
           target="_blank"
           rel="noopener"
-          class="text-blue-600 dark:text-blue-400 hover:underline"
+          class="text-blue-600 dark:text-blue-400 hover:underline rounded f-ring"
         >{{ segment.text }}</a>
         <template v-else>
           {{ segment.text }}
@@ -282,7 +282,7 @@ const maxDepth = 4
         :href="img.fullsize"
         target="_blank"
         rel="noopener"
-        class="block"
+        class="block rounded-lg f-ring"
       >
         <img
           :src="img.thumb"
@@ -298,7 +298,7 @@ const maxDepth = 4
       :href="comment.embed.external.uri"
       target="_blank"
       rel="noopener"
-      class="mt-2 block border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden hover:border-gray-400 dark:hover:border-gray-600 transition-colors"
+      class="mt-2 block border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden hover:border-gray-400 dark:hover:border-gray-600 transition-colors f-ring-inset"
     >
       <div class="flex">
         <img
@@ -336,7 +336,7 @@ const maxDepth = 4
         :href="getCommentUrl(comment.replies[0]!)"
         target="_blank"
         rel="noopener"
-        class="text-sm text-muted hover:underline mt-2 block"
+        class="text-sm text-muted hover:underline mt-2 block rounded f-ring"
       >
         {{ comment.replies.length }} more {{ comment.replies.length === 1 ? 'reply' : 'replies' }}...
       </a>
diff --git a/app/components/BlueskyComments.client.vue b/app/components/BlueskyComments.client.vue
index 0c8d24ed..97dd493f 100644
--- a/app/components/BlueskyComments.client.vue
+++ b/app/components/BlueskyComments.client.vue
@@ -149,7 +149,7 @@ const postUrl = computed(() => {
           :href="postUrl"
           target="_blank"
           rel="noopener"
-          class="underline"
+          class="underline rounded f-ring"
         >
           View on Bluesky
         </a>
@@ -165,7 +165,7 @@ const postUrl = computed(() => {
         :href="postUrl"
         target="_blank"
         rel="noopener"
-        class="inline-flex items-center gap-2 text-sm underline"
+        class="inline-flex items-center gap-2 text-sm underline rounded f-ring"
       >
         Reply on Bluesky
       </a>
@@ -183,7 +183,7 @@ const postUrl = computed(() => {
           :href="postUrl"
           target="_blank"
           rel="noopener"
-          class="underline ml-auto"
+          class="underline ml-auto rounded f-ring"
         >
           Reply on Bluesky
         </a>
diff --git a/app/components/GridLink.vue b/app/components/GridLink.vue
index a2d02500..17a5dd3d 100644
--- a/app/components/GridLink.vue
+++ b/app/components/GridLink.vue
@@ -1,6 +1,6 @@
 <template>
   <NuxtLink
-    class="p-4 relative text-xl flex flex-col justify-end shadow hover:outline-none active:outline-none focus:outline-none min-h-12 transition-all border-1 border-solid border-transparent after:text-transparent flex-[100%] bg-accent hover:border-muted active:border-muted focus:border-muted"
+    class="p-4 relative text-xl flex flex-col justify-end shadow min-h-12 transition-all border-1 border-solid border-transparent after:text-transparent flex-[100%] bg-accent hover:border-muted active:border-muted f-ring-inset rounded"
   >
     <slot />
   </NuxtLink>
diff --git a/app/components/TheBlogIndex.server.vue b/app/components/TheBlogIndex.server.vue
index 19acb140..2c1eff29 100644
--- a/app/components/TheBlogIndex.server.vue
+++ b/app/components/TheBlogIndex.server.vue
@@ -15,6 +15,7 @@ const entries = await queryCollection('blog')
       :key="path"
       :to="path"
       :title="title"
+      class="rounded f-ring pb-1"
     >
       <article>
         <header class="flex flex-col md:flex-row justify-between items-start">
diff --git a/app/components/TheHome.server.vue b/app/components/TheHome.server.vue
index 72634dd5..0cc24b88 100644
--- a/app/components/TheHome.server.vue
+++ b/app/components/TheHome.server.vue
@@ -121,7 +121,8 @@ interface Talk {
         </h2>
         <div class="w-screen -mx-4 md:-mx-12 overflow-visible">
           <ul
-            class="flex flex-row gap-2 mt-4 overflow-x-scroll overflow-y-visible snap-mandatory snap-x scroll-smooth px-4 md:px-12"
+            class="flex flex-row gap-2 mt-4 py-1 overflow-x-scroll overflow-y-visible snap-mandatory snap-x scroll-smooth px-4 md:px-12"
+            tabindex="-1"
           >
             <li
               v-for="(video, index) of streams"
@@ -129,7 +130,7 @@ interface Talk {
               class="snap-start px-4 md:px-12 -mx-4 md:-mx-12"
             >
               <NuxtLink
-                class="bg-accent w-[20rem] justify-between flex flex-col"
+                class="bg-accent w-[20rem] justify-between flex flex-col rounded f-ring-inset"
                 :to="video.link"
               >
                 <div
@@ -168,18 +169,24 @@ interface Talk {
           <ExpandableTray>
             <a
               href="https://twitch.tv/danielroe"
-              class="outline-none active:text-primary hover:text-primary focus:text-primary transition-colors text-sm items-center flex gap-1"
+              class="active:text-primary hover:text-primary focus:text-primary f-tray-item transition-colors text-sm items-center flex gap-1"
               aria-label="Watch more streams on Twitch"
             >
-              <span class="i-ri-twitch-fill h-5 w-5 md:h-4 md:w-4" />
+              <span
+                class="i-ri-twitch-fill h-5 w-5 md:h-4 md:w-4"
+                aria-hidden="true"
+              />
               <span class="hidden md:inline-block">twitch</span>
             </a>
             <a
               href="https://youtube.com/@danielroe"
-              class="outline-none active:text-primary hover:text-primary focus:text-primary transition-colors text-sm items-center flex gap-1"
+              class="active:text-primary hover:text-primary focus:text-primary f-tray-item transition-colors text-sm items-center flex gap-1"
               aria-label="Watch more videos on YouTube"
             >
-              <span class="i-ri-youtube-fill h-5 w-5 md:h-4 md:w-4" />
+              <span
+                class="i-ri-youtube-fill h-5 w-5 md:h-4 md:w-4"
+                aria-hidden="true"
+              />
               <span class="hidden md:inline-block">youtube</span>
             </a>
           </ExpandableTray>
@@ -204,7 +211,8 @@ interface Talk {
         </h2>
         <div class="w-screen -mx-4 md:-mx-12 overflow-visible">
           <ul
-            class="flex flex-row gap-2 mt-4 overflow-x-scroll snap-mandatory snap-x scroll-smooth px-4 md:px-12"
+            class="flex flex-row gap-2 mt-4 py-1 overflow-x-scroll snap-mandatory snap-x scroll-smooth px-4 md:px-12"
+            tabindex="-1"
           >
             <li
               v-for="(conference, index) in upcomingConferences"
@@ -213,7 +221,7 @@ interface Talk {
             >
               <NuxtLink
                 :to="conference.link"
-                class="bg-accent w-[20rem] justify-between flex flex-col"
+                class="bg-accent w-[20rem] justify-between flex flex-col rounded f-ring-inset"
               >
                 <div
                   class="relative flex flex-col justify-center bg-gray-100 dark:bg-gray-900 w-[20rem] h-[8rem] overflow-hidden"
@@ -280,12 +288,13 @@ interface Talk {
                 <NuxtLink
                   v-if="talk.video || (talk.type === 'podcast' && talk.link)"
                   :href="talk.video || talk.link"
-                  class="active:text-primary hover:text-primary focus:text-primary transition-colors leading-none text-sm lowercase items-center flex gap-1"
+                  class="active:text-primary hover:text-primary focus:text-primary f-tray-item transition-colors leading-none text-sm lowercase items-center flex gap-1"
                 >
                   <span
                     v-if="talk.type === 'podcast' || talk.video"
                     :class="talk.video ? 'i-ri:play-line' : 'i-ri:broadcast-line'"
                     class="h-5 w-5 md:h-4 md:w-4"
+                    aria-hidden="true"
                   />
                   <span class="sr-only">
                     {{ talk.video ? `Watch` : `Listen` }} to {{ talk.title }}
@@ -293,29 +302,38 @@ interface Talk {
                 </NuxtLink>
                 <NuxtLink
                   v-if="talk.slides"
-                  class="active:text-primary hover:text-primary focus:text-primary transition-colors leading-none uppercase text-sm lowercase items-center flex gap-1"
+                  class="active:text-primary hover:text-primary focus:text-primary f-tray-item transition-colors leading-none uppercase text-sm lowercase items-center flex gap-1"
                   :to="`/slides/${talk.slides}.pdf`"
                   data-external
                 >
-                  <span class="h-4 w-4 i-ri:presentation-fill" />
+                  <span
+                    class="h-4 w-4 i-ri:presentation-fill"
+                    aria-hidden="true"
+                  />
                   <span class="sr-only"> Slides for {{ talk.title }} </span>
                 </NuxtLink>
                 <NuxtLink
                   v-if="talk.demo"
-                  class="active:text-primary hover:text-primary focus:text-primary transition-colors leading-none uppercase text-sm lowercase items-center flex gap-1"
+                  class="active:text-primary hover:text-primary focus:text-primary f-tray-item transition-colors leading-none uppercase text-sm lowercase items-center flex gap-1"
                   :to="talk.demo"
                   data-external
                 >
-                  <span class="i-tabler:sparkles" />
+                  <span
+                    class="i-tabler:sparkles"
+                    aria-hidden="true"
+                  />
                   <span class="sr-only">A demo for {{ talk.title }} </span>
                 </NuxtLink>
                 <NuxtLink
                   v-if="talk.repo"
-                  class="active:text-primary hover:text-primary focus:text-primary transition-colors leading-none uppercase text-sm lowercase items-center flex gap-1"
+                  class="active:text-primary hover:text-primary focus:text-primary f-tray-item transition-colors leading-none uppercase text-sm lowercase items-center flex gap-1"
                   :to="talk.repo"
                   data-external
                 >
-                  <span class="i-ri:github-fill" />
+                  <span
+                    class="i-ri:github-fill"
+                    aria-hidden="true"
+                  />
                   <span class="sr-only">A repo for {{ talk.title }}</span>
                 </NuxtLink>
               </ExpandableTray>
@@ -351,7 +369,7 @@ interface Talk {
         >
           <NuxtLink
             :to="article.path"
-            class="flex flex-col items-start gap-3 justify-between md:flex-row md:items-center"
+            class="flex flex-col items-start gap-3 justify-between md:flex-row md:items-center rounded f-ring pb-1"
           >
             <div class="underlined-link">
               {{ article.title }}
@@ -387,11 +405,12 @@ interface Talk {
             :key="link.name"
             :href="link.link"
             :aria-label="`Follow me on ${link.name}`"
-            class="outline-none active:text-primary hover:text-primary focus:text-primary transition-colors text-sm lowercase items-center flex gap-1"
+            class="active:text-primary hover:text-primary focus:text-primary f-tray-item transition-colors text-sm lowercase items-center flex gap-1"
           >
             <span
               :class="link.icon"
               class="h-4 w-4"
+              aria-hidden="true"
             />
             <span class="hidden md:inline-block">{{ link.name }}</span>
           </a>
diff --git a/app/components/TheSponsors.vue b/app/components/TheSponsors.vue
index c1ffd592..cc126b35 100644
--- a/app/components/TheSponsors.vue
+++ b/app/components/TheSponsors.vue
@@ -20,7 +20,7 @@ const sponsors = await $fetch<string[]>('/api/sponsors')
     />
     <NuxtLink
       to="https://github.com/sponsors/danielroe"
-      class="pure rounded-full border-primary outline-none border-dashed border h-[35px] w-[35px] flex flex-col justify-center items-center hover:border-solid focus:border-solid active:border-solid hover:bg-accent focus:bg-accent active:bg-accent"
+      class="pure rounded-full border-primary border-dashed border h-[35px] w-[35px] flex flex-col justify-center items-center hover:border-solid active:border-solid hover:bg-accent active:bg-accent f-ring"
       target="_blank"
     >
       <div class="block i-ri:add-fill h-6 w-6" />
diff --git a/app/components/TheTalks.server.vue b/app/components/TheTalks.server.vue
index 6abf29c9..72b395a9 100644
--- a/app/components/TheTalks.server.vue
+++ b/app/components/TheTalks.server.vue
@@ -136,32 +136,42 @@ const { data: groups } = await useAsyncData(
                 v-if="talk.type === 'podcast' || talk.video"
                 :class="talk.video ? 'i-ri:play-line' : 'i-ri:broadcast-line'"
                 class="h-4 w-4 flex-shrink-0"
+                aria-hidden="true"
               />
               {{ talk.video ? `watch` : `listen` }}
             </NuxtLink>
             <NuxtLink
               v-if="talk.slides"
-              class="text-xs items-center"
+              class="text-xs items-center f-tray-item active:text-primary hover:text-primary focus:text-primary transition-colors"
               :to="`/slides/${talk.slides}.pdf`"
               data-external
             >
-              <span class="i-ri:presentation-fill" /> slides
+              <span
+                class="i-ri:presentation-fill"
+                aria-hidden="true"
+              /> slides
             </NuxtLink>
             <NuxtLink
               v-if="talk.demo"
-              class="text-xs items-center"
+              class="text-xs items-center f-tray-item active:text-primary hover:text-primary focus:text-primary transition-colors"
               :to="talk.demo"
               data-external
             >
-              <span class="i-tabler:sparkles" /> demo
+              <span
+                class="i-tabler:sparkles"
+                aria-hidden="true"
+              /> demo
             </NuxtLink>
             <NuxtLink
               v-if="talk.repo"
-              class="text-xs items-center"
+              class="text-xs items-center f-tray-item active:text-primary hover:text-primary focus:text-primary transition-colors"
               :to="talk.repo"
               data-external
             >
-              <span class="i-ri:github-fill" /> repo
+              <span
+                class="i-ri:github-fill"
+                aria-hidden="true"
+              /> repo
             </NuxtLink>
           </ExpandableTray>
         </header>
diff --git a/app/components/TheUses.server.vue b/app/components/TheUses.server.vue
index 9f3f4cea..42c187ac 100644
--- a/app/components/TheUses.server.vue
+++ b/app/components/TheUses.server.vue
@@ -23,7 +23,7 @@
             <div class="bg-accent flex flex-col">
               <div
                 v-if="item.image"
-                class="relative flex flex-col justify-end bg-gray-900 aspect-video overflow-hidden"
+                class="relative flex flex-col justify-end bg-gray-100 dark:bg-gray-900 aspect-video overflow-hidden"
               >
                 <NuxtImg
                   provider="sanity"
@@ -58,7 +58,7 @@
                       :href="link.url"
                       target="_blank"
                       rel="noopener noreferrer"
-                      class="text-sm px-3 py-1 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center gap-2"
+                      class="text-sm px-3 py-1 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center gap-2 f-ring hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
                     >
                       <img
                         :src="`https://www.google.com/s2/favicons?domain=${getHost(link.url)}&sz=256`"
@@ -93,6 +93,7 @@
                 :href="item.links?.[0]?.url"
                 target="_blank"
                 rel="noopener noreferrer"
+                class="underlined-link"
               >{{ item.name }}</a>
             </span>
             <span v-else>{{ item.name }}</span>
@@ -115,7 +116,7 @@
               :href="link.url"
               target="_blank"
               rel="noopener noreferrer"
-              class="text-xs px-2 py-0.5 bg-gray-100 dark:bg-gray-800 rounded"
+              class="text-xs px-2 py-0.5 bg-gray-100 dark:bg-gray-800 rounded f-ring hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
             >
               {{ link.label || 'Link' }}
             </a>
diff --git a/app/components/ToggleColorMode.vue b/app/components/ToggleColorMode.vue
index 3f59525b..a9dd2385 100644
--- a/app/components/ToggleColorMode.vue
+++ b/app/components/ToggleColorMode.vue
@@ -7,7 +7,7 @@ const colorMode = useColorMode()
     v-if="colorMode"
     aria-label="Change site theme"
     type="button"
-    class="h-7 w-12 relative rounded-full bg-accent ml-2 items-center justify-start px-1 transition-opacity outline-none border-2 border-solid border-accent hover:border-primary focus:border-primary active:border-primary"
+    class="h-7 w-12 relative rounded-full bg-accent ml-2 items-center justify-start px-1 transition-opacity border-2 border-solid border-accent hover:border-primary active:border-primary f-ring"
     @click="colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'"
   >
     <span
diff --git a/app/components/layout/TheSiteFooter.server.vue b/app/components/layout/TheSiteFooter.server.vue
index 587d3a5a..a7f357c5 100644
--- a/app/components/layout/TheSiteFooter.server.vue
+++ b/app/components/layout/TheSiteFooter.server.vue
@@ -59,15 +59,15 @@ const year = new Date().getFullYear()
           CC BY-SA 4.0
         </a>
       </small>
-      <ul class="flex flex-row justify-center gap-4 my-4 items-center">
+      <ul class="flex flex-row justify-center gap-2 my-4 items-center">
         <li
           v-for="{ link, name, icon } in links"
           :key="name"
-          class="inline-flex items-center"
         >
           <a
             :href="link"
             rel="me"
+            class="rounded-full f-ring p-1 inline-flex items-center"
           >
             <span
               class="h-4 w-4 fill-current"
diff --git a/app/components/layout/TheSiteHeader.vue b/app/components/layout/TheSiteHeader.vue
index 879f405c..15a77da9 100644
--- a/app/components/layout/TheSiteHeader.vue
+++ b/app/components/layout/TheSiteHeader.vue
@@ -118,7 +118,7 @@ function toggleMenu (input?: Event | boolean) {
       <NuxtLink
         v-else-if="$auth.status === 'logged-out'"
         :to="loginURL"
-        class="p-1 w-[2rem] flex-shrink-0 outline-none border-transparent border-2 border-solid hover:border-primary active:border-primary focus:border-primary rounded-full leading-none"
+        class="p-1 w-[2rem] flex-shrink-0 border-transparent border-2 border-solid hover:border-primary active:border-primary rounded-full leading-none f-ring"
         @click="$auth.status = 'pending'"
       >
         <span
@@ -130,7 +130,7 @@ function toggleMenu (input?: Event | boolean) {
       <button
         v-else-if="$auth.status === 'logged-in'"
         type="button"
-        class="relative flex-shrink-0 w-[2rem]"
+        class="relative flex-shrink-0 w-[2rem] rounded-full f-ring"
         @click="$auth.logout"
       >
         <img
@@ -151,7 +151,7 @@ function toggleMenu (input?: Event | boolean) {
       <div class="md:hidden">
         <button
           type="button"
-          class="ml-4"
+          class="ml-4 rounded f-ring"
           @click="toggleMenu"
         >
           <span
@@ -170,7 +170,7 @@ function toggleMenu (input?: Event | boolean) {
           >
             <button
               type="button"
-              class="top-0 right-0 fixed p-8"
+              class="top-0 right-0 fixed p-8 rounded f-ring-accent"
               @click="toggleMenu"
             >
               <span
diff --git a/app/pages/ama.vue b/app/pages/ama.vue
index f5871cfd..5d02ddc7 100644
--- a/app/pages/ama.vue
+++ b/app/pages/ama.vue
@@ -26,20 +26,20 @@
           id="question"
           v-model="questionText"
           name="question"
-          class="mt-2 rounded w-full max-w-400px min-h-[10ch] text-black px-3 py-1"
+          class="mt-2 rounded w-full max-w-400px min-h-[10ch] text-black px-3 py-1 f-ring-inset"
           :class="{
-            'ring ring-yellow-500': denialDetected,
+            'ring ring-yellow-600 dark:ring-yellow-500': denialDetected,
           }"
         />
         <div
           v-if="denialDetected"
-          class="mt-2 text-sm text-yellow-500"
+          class="mt-2 text-sm text-yellow-600 dark:text-yellow-500"
         >
           <p>
             Did you mean
             <button
               type="button"
-              class="underline font-medium hover:opacity-80"
+              class="underline font-medium hover:opacity-80 rounded f-ring"
               @click="fixDenial"
             >
               "Daniel"
@@ -49,7 +49,7 @@
         <button
           type="submit"
           :disabled="status === 'pending'"
-          class="underlined-link"
+          class="underlined-link outline-none focus-visible:after:opacity-35"
         >
           <template v-if="!denialDetected">
             ask anonymously
diff --git a/app/pages/feedback.vue b/app/pages/feedback.vue
index 4e777638..fee4fca0 100644
--- a/app/pages/feedback.vue
+++ b/app/pages/feedback.vue
@@ -14,11 +14,11 @@
         <textarea
           id="feedback"
           name="feedback"
-          class="rounded w-full max-w-400px text-black px-3 py-1"
+          class="rounded w-full max-w-400px text-black px-3 py-1 f-ring-inset"
         />
         <button
           type="submit"
-          class="underlined-link"
+          class="underlined-link outline-none focus-visible:after:opacity-35"
         >
           Submit
         </button>
diff --git a/app/pages/live.vue b/app/pages/live.vue
index 7193a83b..537493c2 100644
--- a/app/pages/live.vue
+++ b/app/pages/live.vue
@@ -35,8 +35,9 @@
           v-for="emoji in predefinedEmojis"
           :key="emoji"
           type="button"
-          class="aspect-square text-[1.75rem] rounded-lg flex items-center justify-center bg-muted bg-opacity-10 transition-all duration-200 hover:bg-opacity-20 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed select-none"
+          class="aspect-square text-[1.75rem] rounded-lg flex items-center justify-center bg-muted bg-opacity-10 transition-all duration-200 hover:bg-opacity-20 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed select-none f-ring"
           :disabled="!isConnected"
+          :aria-label="`Send ${emoji} reaction`"
           @click="sendEmoji(emoji)"
           @dblclick="sendEmoji(emoji, 3)"
           @touchstart.passive="preventZoom"
@@ -53,8 +54,9 @@
             <input
               v-model="customEmoji"
               type="text"
-              class="w-14 h-14 text-center text-[1.75rem] bg-transparent border-none outline-none"
+              class="w-14 h-14 text-center text-[1.75rem] bg-transparent border-none rounded-lg f-ring-inset"
               :disabled="!isConnected"
+              aria-label="Custom emoji input"
               @touchstart.passive="preventZoom"
             >
             <span class="text-xs text-muted mt-1">custom</span>
@@ -198,10 +200,7 @@ function preventZoom () {
   opacity: 0;
 }
 
-/* Focus styles for the custom emoji input */
-input:focus {
-  outline: none;
-}
+/* Focus styles are now handled via Tailwind classes */
 
 /* Remove spinner buttons from number inputs */
 input::-webkit-inner-spin-button,
diff --git a/app/pages/work.vue b/app/pages/work.vue
index ba9ef24a..9a41efd1 100644
--- a/app/pages/work.vue
+++ b/app/pages/work.vue
@@ -10,7 +10,7 @@
       <TheGithubRepos />
       <form
         v-if="$auth.user.sponsor"
-        class="mt-4 mb-4 p-4 bg-gray-900 text-white flex md:flex-row flex-col gap-2"
+        class="mt-4 mb-4 p-4 bg-gray-100 dark:bg-gray-900 text-primary flex md:flex-row flex-col gap-2"
         @submit.prevent="handleSubmission"
       >
         <label
@@ -22,15 +22,15 @@
             autofocus
             :disabled="ideaStatus === 'submitting'"
             type="text"
-            class="bg-gray-600 text-white text-sm px-2 py-1 flex-grow disabled:opacity-60 disabled:pointer-events-none"
+            class="bg-gray-300 dark:bg-gray-600 text-primary text-sm px-2 py-1 flex-grow disabled:opacity-60 disabled:pointer-events-none rounded f-ring-inset"
           >
         </label>
         <button
           type="submit"
-          class="px-2 py-1 tracking-[0.15rem] text-sm uppercase"
+          class="px-2 py-1 tracking-[0.15rem] text-sm uppercase rounded f-ring-accent"
           :class="{
-            'bg-green-900': ideaStatus === 'submitted',
-            'bg-red-900': ideaStatus === 'error',
+            'bg-green-200 dark:bg-green-900': ideaStatus === 'submitted',
+            'bg-red-200 dark:bg-red-900': ideaStatus === 'error',
           }"
         >
           {{
-- 
2.51.2