From 17f4f023c5233b7959bfff950a9a43bd877e36a9 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 19 Jan 2026 12:57:47 +0000
Subject: [PATCH] fix: more a11y fixes

---
 app/assets/main.css                           |  11 ++
 app/components/BlueskyComment.vue             |  22 ++--
 app/components/FeedPost.vue                   |   2 +-
 app/components/TheClientWork.server.vue       |  30 +++--
 app/components/TheGithubRepos.server.vue      |   6 +-
 app/components/TheTalks.server.vue            |  20 ++--
 app/components/ToggleColorMode.vue            |  13 ++-
 app/components/global/CalSchedule.vue         |   4 +-
 app/components/global/SocialPost.vue          |   5 +-
 .../layout/ThePresenceIndicator.vue           |  10 +-
 .../layout/TheSiteFooter.server.vue           |   9 +-
 app/components/layout/TheSiteHeader.vue       | 110 +++++++++---------
 app/pages/ama.vue                             |  70 +++++++++--
 app/pages/feedback.vue                        |  68 ++++++++---
 app/pages/live.vue                            |  30 +++--
 app/pages/work.vue                            |  39 ++++++-
 16 files changed, 310 insertions(+), 139 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index daeaa353..d97a4154 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -27,3 +27,14 @@ a:not([href]) {
 p + p, p + blockquote {
   @apply mt-4;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
diff --git a/app/components/BlueskyComment.vue b/app/components/BlueskyComment.vue
index d3886c21..1aef4155 100644
--- a/app/components/BlueskyComment.vue
+++ b/app/components/BlueskyComment.vue
@@ -60,13 +60,14 @@ const maxDepth = 4
     <a
       :href="`https://bsky.app/profile/${comment.author.handle}`"
       target="_blank"
-      rel="noopener"
+      rel="noopener noreferrer"
       class="flex-shrink-0 rounded-full f-ring"
+      :aria-label="`View ${comment.author.displayName || comment.author.handle}'s profile on Bluesky`"
     >
       <img
         v-if="comment.author.avatar"
         :src="comment.author.avatar"
-        :alt="comment.author.displayName || comment.author.handle"
+        alt=""
         class="rounded-full h-10 w-10"
         width="40"
         height="40"
@@ -75,6 +76,7 @@ const maxDepth = 4
       <div
         v-else
         class="rounded-full h-10 w-10 bg-gray-300 dark:bg-gray-700 flex items-center justify-center text-sm"
+        aria-hidden="true"
       >
         {{ (comment.author.displayName || comment.author.handle).charAt(0).toUpperCase() }}
       </div>
@@ -208,21 +210,23 @@ const maxDepth = 4
       <a
         :href="`https://bsky.app/profile/${comment.author.handle}`"
         target="_blank"
-        rel="noopener"
-        class="flex-shrink-0 rounded-full f-ring"
+        rel="noopener noreferrer"
+        class="flex-shrink-0 rounded-full f-ring p-1"
+        :aria-label="`View ${comment.author.displayName || comment.author.handle}'s profile on Bluesky`"
       >
         <img
           v-if="comment.author.avatar"
           :src="comment.author.avatar"
-          :alt="comment.author.displayName || comment.author.handle"
-          class="rounded-full h-5 w-5"
-          width="20"
-          height="20"
+          alt=""
+          class="rounded-full h-6 w-6"
+          width="24"
+          height="24"
           loading="lazy"
         >
         <div
           v-else
-          class="rounded-full h-5 w-5 bg-gray-300 dark:bg-gray-700 flex items-center justify-center text-xs"
+          class="rounded-full h-6 w-6 bg-gray-300 dark:bg-gray-700 flex items-center justify-center text-xs"
+          aria-hidden="true"
         >
           {{ (comment.author.displayName || comment.author.handle).charAt(0).toUpperCase() }}
         </div>
diff --git a/app/components/FeedPost.vue b/app/components/FeedPost.vue
index 50a8de8a..03a97141 100644
--- a/app/components/FeedPost.vue
+++ b/app/components/FeedPost.vue
@@ -75,7 +75,7 @@ defineProps({
         loop
         playsinline
         controls
-        :alt="media[0].alt || undefined"
+        :aria-label="media[0].alt || 'Video'"
         :width="media[0].width"
         :height="media[0].height"
       >
diff --git a/app/components/TheClientWork.server.vue b/app/components/TheClientWork.server.vue
index bca7e090..e82811b5 100644
--- a/app/components/TheClientWork.server.vue
+++ b/app/components/TheClientWork.server.vue
@@ -20,16 +20,24 @@ const clients = {
 </script>
 
 <template>
-  <section
-    class="flex flex-row flex-wrap justify-center items-center my-12 gap-8 *:h-full *:w-auto *:flex-grow-0 *:flex-shrink *:max-h-8 *:max-w-[5rem]"
-  >
-    <NuxtPicture
-      v-for="([image, dimensions], name) in clients"
-      :key="name"
-      :img-attrs="{ alt: name }"
-      class="light:*:invert-100 light:*:opacity-80"
-      :src="`/img/work/${image}`"
-      v-bind="dimensions"
-    />
+  <section aria-labelledby="client-work-heading">
+    <h2
+      id="client-work-heading"
+      class="sr-only"
+    >
+      Previous clients
+    </h2>
+    <div
+      class="flex flex-row flex-wrap justify-center items-center my-12 gap-8 *:h-full *:w-auto *:flex-grow-0 *:flex-shrink *:max-h-8 *:max-w-[5rem]"
+    >
+      <NuxtPicture
+        v-for="([image, dimensions], name) in clients"
+        :key="name"
+        :img-attrs="{ alt: name, loading: 'lazy' }"
+        class="light:*:invert-100 light:*:opacity-80"
+        :src="`/img/work/${image}`"
+        v-bind="dimensions"
+      />
+    </div>
   </section>
 </template>
diff --git a/app/components/TheGithubRepos.server.vue b/app/components/TheGithubRepos.server.vue
index 659ea972..7d870ed5 100644
--- a/app/components/TheGithubRepos.server.vue
+++ b/app/components/TheGithubRepos.server.vue
@@ -10,14 +10,16 @@
       <article>
         <span
           class="absolute flex top-0 right-0 pr-1 text-primary before:content-empty before:relative before:block before:w-full before:-mt-4 before:mb-2 before:bg-background before:rotate-30 before:scale-x-1000"
+          aria-hidden="true"
         >
           <span
             class="z-10 h-8 w-8 i-ri:github-fill"
-            alt=""
           />
         </span>
         <header>
-          {{ repo }}
+          <h3 class="font-normal">
+            {{ repo }}
+          </h3>
           <dl
             class="block md:flex flex-row flex-wrap mt-1 leading-normal uppercase text-xs"
           >
diff --git a/app/components/TheTalks.server.vue b/app/components/TheTalks.server.vue
index 72b395a9..1bb222a7 100644
--- a/app/components/TheTalks.server.vue
+++ b/app/components/TheTalks.server.vue
@@ -79,9 +79,9 @@ const { data: groups } = await useAsyncData(
       :key="groupKey"
       class="mb-2 w-full relative flex flex-col justify-end min-h-12 transition-all border-1 border-solid border-transparent after:text-transparent flex-[100%]"
     >
-      <div class="flex flex-row items-center gap-2 text-xl">
+      <h2 class="flex flex-row items-center gap-2 text-xl font-normal">
         {{ talks[0].title }}
-      </div>
+      </h2>
       <div
         v-if="talks[0].description"
         class="text-base mb-1"
@@ -92,7 +92,7 @@ const { data: groups } = await useAsyncData(
         v-for="talk of talks"
         :key="talk.link"
         :class="{ 'opacity-60': !talk.video && !talk.link && !talk.slides && !talk.demo && !talk.repo }"
-        :alt="talk.title"
+        :aria-label="talk.title"
       >
         <header class="flex flex-row mt-1">
           <dl
@@ -129,8 +129,9 @@ const { data: groups } = await useAsyncData(
           >
             <NuxtLink
               v-if="talk.video || (talk.type === 'podcast' && talk.link)"
-              :href="talk.video || (talk.type === 'podcast' && talk.link)"
-              class="text-xs items-center f-tray-item active:text-primary hover:text-primary focus:text-primary transition-colors"
+              :href="talk.video || (talk.type === 'podcast' ? talk.link : '')"
+              class="text-xs items-center f-tray-item active:text-primary hover:text-primary focus:text-primary transition-colors touch-action-manipulation"
+              :aria-label="`${talk.video ? 'Watch' : 'Listen to'} ${talks[0]?.title}`"
             >
               <span
                 v-if="talk.type === 'podcast' || talk.video"
@@ -142,8 +143,9 @@ const { data: groups } = await useAsyncData(
             </NuxtLink>
             <NuxtLink
               v-if="talk.slides"
-              class="text-xs items-center f-tray-item active:text-primary hover:text-primary focus:text-primary transition-colors"
+              class="text-xs items-center f-tray-item active:text-primary hover:text-primary focus:text-primary transition-colors touch-action-manipulation"
               :to="`/slides/${talk.slides}.pdf`"
+              :aria-label="`Slides for ${talks[0]?.title}`"
               data-external
             >
               <span
@@ -153,8 +155,9 @@ const { data: groups } = await useAsyncData(
             </NuxtLink>
             <NuxtLink
               v-if="talk.demo"
-              class="text-xs items-center f-tray-item active:text-primary hover:text-primary focus:text-primary transition-colors"
+              class="text-xs items-center f-tray-item active:text-primary hover:text-primary focus:text-primary transition-colors touch-action-manipulation"
               :to="talk.demo"
+              :aria-label="`Demo for ${talks[0]?.title}`"
               data-external
             >
               <span
@@ -164,8 +167,9 @@ const { data: groups } = await useAsyncData(
             </NuxtLink>
             <NuxtLink
               v-if="talk.repo"
-              class="text-xs items-center f-tray-item active:text-primary hover:text-primary focus:text-primary transition-colors"
+              class="text-xs items-center f-tray-item active:text-primary hover:text-primary focus:text-primary transition-colors touch-action-manipulation"
               :to="talk.repo"
+              :aria-label="`Repository for ${talks[0]?.title}`"
               data-external
             >
               <span
diff --git a/app/components/ToggleColorMode.vue b/app/components/ToggleColorMode.vue
index a9dd2385..98603e57 100644
--- a/app/components/ToggleColorMode.vue
+++ b/app/components/ToggleColorMode.vue
@@ -1,17 +1,24 @@
 <script setup lang="ts">
 const colorMode = useColorMode()
+
+const ariaLabel = computed(() => {
+  const currentMode = colorMode.value
+  const targetMode = currentMode === 'dark' ? 'light' : 'dark'
+  return `Switch to ${targetMode} mode (currently ${currentMode})`
+})
 </script>
 
 <template>
   <button
     v-if="colorMode"
-    aria-label="Change site theme"
+    :aria-label="ariaLabel"
     type="button"
-    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"
+    class="h-7 w-12 relative rounded-full bg-accent ml-2 items-center justify-start px-1 border-2 border-solid border-accent hover:border-primary active:border-primary f-ring touch-action-manipulation"
     @click="colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'"
   >
     <span
-      class="inline-block rounded-full h-4 w-4 bg-primary transition-transform light:translate-x-5 i-tabler:moon light:i-tabler:sun-high light:h-4 light:w-4"
+      class="inline-block rounded-full h-4 w-4 bg-primary light:translate-x-5 i-tabler:moon light:i-tabler:sun-high light:h-4 light:w-4 motion-safe:transition-transform"
+      aria-hidden="true"
     />
   </button>
 </template>
diff --git a/app/components/global/CalSchedule.vue b/app/components/global/CalSchedule.vue
index db9fb0ee..bd7950ef 100644
--- a/app/components/global/CalSchedule.vue
+++ b/app/components/global/CalSchedule.vue
@@ -12,8 +12,8 @@ defineProps({
     :href="`https://cal.com/danielroe/${meeting}`"
   >
     <span
-      class="i-ri:calendar-check-fill h-4 w-4"
-      alt=""
+      class="i-ri:calendar-check-fill h-4 w-4 mr-1"
+      aria-hidden="true"
     />
     {{ message }}
   </a>
diff --git a/app/components/global/SocialPost.vue b/app/components/global/SocialPost.vue
index 0337d14e..87ba829b 100644
--- a/app/components/global/SocialPost.vue
+++ b/app/components/global/SocialPost.vue
@@ -23,12 +23,15 @@ const icon = props.social === 'twitter' ? 'i-ri:twitter-fill' : ''
         <span
           class="h-4 w-4"
           :class="icon"
-          alt=""
+          aria-hidden="true"
         />
       </div>
       <component
         :is="link ? 'a' : 'div'"
         :href="link"
+        :target="link ? '_blank' : undefined"
+        :rel="link ? 'noopener noreferrer' : undefined"
+        :class="link ? 'rounded f-ring' : undefined"
       >
         <NuxtTime
           v-if="datetime"
diff --git a/app/components/layout/ThePresenceIndicator.vue b/app/components/layout/ThePresenceIndicator.vue
index 8624b07e..422d88d3 100644
--- a/app/components/layout/ThePresenceIndicator.vue
+++ b/app/components/layout/ThePresenceIndicator.vue
@@ -8,7 +8,7 @@
       :class="colorSet[status].badge"
     >
       <span
-        class="rounded-full inline-block h-2 w-2 animate-pulse shadow"
+        class="rounded-full inline-block h-2 w-2 motion-safe:animate-pulse shadow"
         :class="colorSet[status].block"
       />
       <span
@@ -53,9 +53,11 @@ const LiveWrapper = defineComponent({
       h(
         'a',
         {
-          href: 'https://twitch.tv/danielroe',
-          target: '_blank',
-          title: 'Live now on Twitch',
+          'href': 'https://twitch.tv/danielroe',
+          'target': '_blank',
+          'rel': 'noopener noreferrer',
+          'aria-label': 'Live now on Twitch (opens in new tab)',
+          'class': 'rounded-full f-ring',
         },
         slots,
       )
diff --git a/app/components/layout/TheSiteFooter.server.vue b/app/components/layout/TheSiteFooter.server.vue
index a7f357c5..5cd01437 100644
--- a/app/components/layout/TheSiteFooter.server.vue
+++ b/app/components/layout/TheSiteFooter.server.vue
@@ -66,17 +66,16 @@ const year = new Date().getFullYear()
         >
           <a
             :href="link"
-            rel="me"
-            class="rounded-full f-ring p-1 inline-flex items-center"
+            rel="me noopener noreferrer"
+            target="_blank"
+            class="rounded-full f-ring p-1 inline-flex items-center touch-action-manipulation"
+            :aria-label="`${name} (opens in new tab)`"
           >
             <span
               class="h-4 w-4 fill-current"
               :class="icon"
               aria-hidden="true"
             />
-            <span class="sr-only">
-              {{ name }}
-            </span>
           </a>
         </li>
       </ul>
diff --git a/app/components/layout/TheSiteHeader.vue b/app/components/layout/TheSiteHeader.vue
index cf1ce465..55596924 100644
--- a/app/components/layout/TheSiteHeader.vue
+++ b/app/components/layout/TheSiteHeader.vue
@@ -146,7 +146,6 @@ function onPopoverToggle (event: ToggleEvent) {
         >
           <span
             class="menu-icon h-8 w-8 md:h-6 md:w-6 i-ri:add-line"
-            :style="{ viewTransitionName: showMenu ? undefined : 'menu' }"
             aria-hidden="true"
           />
           <span class="sr-only"> Open mobile navigation menu </span>
@@ -155,44 +154,45 @@ function onPopoverToggle (event: ToggleEvent) {
           id="mobile-menu"
           ref="mobileMenuRef"
           popover
-          class="m-0 inset-0 h-full w-full max-h-full max-w-full border-none bg-accent text-muted flex flex-col justify-center items-center"
+          class="m-0 inset-0 h-full w-full max-h-full max-w-full border-none bg-accent text-muted"
           @toggle="onPopoverToggle"
         >
-          <button
-            type="button"
-            class="top-0 right-0 fixed p-8 rounded f-ring-accent"
-            popovertarget="mobile-menu"
-            popovertargetaction="hide"
-          >
-            <span
-              class="menu-icon h-8 w-8 i-ri:close-fill"
-              :style="{ viewTransitionName: showMenu ? 'menu' : undefined }"
-              aria-hidden="true"
-            />
-            <span class="sr-only"> Close mobile navigation menu </span>
-          </button>
-          <nav aria-label="Mobile navigation">
-            <ul
-              class="uppercase tracking-[0.15rem] max-w-xl text-2xl flex flex-col items-center gap-6"
+          <div class="h-full flex flex-col justify-center items-center">
+            <button
+              type="button"
+              class="top-0 right-0 fixed p-8 rounded f-ring-accent"
+              popovertarget="mobile-menu"
+              popovertargetaction="hide"
             >
-              <li
-                v-for="link in menu"
-                :key="link.name"
+              <span
+                class="menu-icon h-8 w-8 i-ri:close-fill"
+                aria-hidden="true"
+              />
+              <span class="sr-only"> Close mobile navigation menu </span>
+            </button>
+            <nav aria-label="Mobile navigation">
+              <ul
+                class="uppercase tracking-[0.15rem] max-w-xl text-2xl flex flex-col items-center gap-6"
               >
-                <NuxtLink
-                  class="underlined-link px-2 py-2"
-                  :class="{
-                    'not-[:hover,:focus,:active]:after:border-transparent':
-                      $route.path !== link.path,
-                  }"
-                  :to="link.path"
+                <li
+                  v-for="link in menu"
+                  :key="link.name"
                 >
-                  {{ link.name }}
-                </NuxtLink>
-              </li>
-              <li><ToggleColorMode class="flex" /></li>
-            </ul>
-          </nav>
+                  <NuxtLink
+                    class="underlined-link px-2 py-2"
+                    :class="{
+                      'not-[:hover,:focus,:active]:after:border-transparent':
+                        $route.path !== link.path,
+                    }"
+                    :to="link.path"
+                  >
+                    {{ link.name }}
+                  </NuxtLink>
+                </li>
+                <li><ToggleColorMode class="flex" /></li>
+              </ul>
+            </nav>
+          </div>
         </div>
       </div>
       <ToggleColorMode class="hidden md:flex" />
@@ -201,32 +201,38 @@ function onPopoverToggle (event: ToggleEvent) {
 </template>
 
 <style>
-@keyframes rotate-out {
-  from {
-    transform: rotate(0deg);
+@media (prefers-reduced-motion: no-preference) {
+  #mobile-menu {
+    transition:
+      opacity 0.2s ease,
+      overlay 0.2s ease allow-discrete,
+      display 0.2s ease allow-discrete;
+    opacity: 0;
   }
 
-  to {
-    transform: rotate(-22.5deg);
+  #mobile-menu:popover-open {
+    opacity: 1;
   }
-}
 
-@keyframes rotate-in {
-  from {
-    transform: rotate(-22.5deg);
+  @starting-style {
+    #mobile-menu:popover-open {
+      opacity: 0;
+    }
   }
 
-  to {
-    transform: rotate(0deg);
+  #mobile-menu .menu-icon {
+    transition: transform 0.2s ease;
+    transform: rotate(-45deg);
   }
-}
 
-::view-transition-old(menu) {
-  opacity: 0;
-  animation: rotate-out 0.2s;
-}
+  #mobile-menu:popover-open .menu-icon {
+    transform: rotate(0deg);
+  }
 
-::view-transition-new(menu) {
-  animation: rotate-in 0.2s;
+  @starting-style {
+    #mobile-menu:popover-open .menu-icon {
+      transform: rotate(-45deg);
+    }
+  }
 }
 </style>
diff --git a/app/pages/ama.vue b/app/pages/ama.vue
index 5d02ddc7..2a851f42 100644
--- a/app/pages/ama.vue
+++ b/app/pages/ama.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="flex-grow px-4 py-2 md:px-12 md:py-4 w-full">
-    <main class="text-muted text-lg">
+    <main
+      id="main-content"
+      class="text-muted text-lg"
+    >
       <form
         class="flex flex-col items-start py-8 gap-2"
         :class="{ 'opacity-50 pointer-events-none': status === 'pending' }"
@@ -19,6 +22,8 @@
           <a
             class="underlined-link"
             href="https://bsky.app/hashtag/ama?author=danielroe.dev"
+            target="_blank"
+            rel="noopener noreferrer"
           >
             answer it on social media </a>.
         </p>
@@ -26,10 +31,13 @@
           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 f-ring-inset"
+          rows="4"
+          autocomplete="off"
+          class="mt-2 rounded w-full max-w-400px min-h-[10ch] bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 px-3 py-2 text-base f-ring-inset"
           :class="{
             'ring ring-yellow-600 dark:ring-yellow-500': denialDetected,
           }"
+          :disabled="status === 'pending' || status === 'success'"
         />
         <div
           v-if="denialDetected"
@@ -39,7 +47,7 @@
             Did you mean
             <button
               type="button"
-              class="underline font-medium hover:opacity-80 rounded f-ring"
+              class="underline font-medium hover:opacity-80 rounded f-ring px-1 py-0.5"
               @click="fixDenial"
             >
               "Daniel"
@@ -48,9 +56,14 @@
         </div>
         <button
           type="submit"
-          :disabled="status === 'pending'"
-          class="underlined-link outline-none focus-visible:after:opacity-35"
+          :disabled="status === 'pending' || status === 'success' || !questionText.trim()"
+          class="underlined-link outline-none focus-visible:after:opacity-35 py-2 disabled:opacity-50"
         >
+          <span
+            v-if="status === 'pending'"
+            class="i-svg-spinners:90-ring-with-bg h-4 w-4 mr-2"
+            aria-hidden="true"
+          />
           <template v-if="!denialDetected">
             ask anonymously
           </template>
@@ -59,17 +72,44 @@
           </template>
         </button>
       </form>
-      <template v-if="status === 'success'">
-        <p><i class="i-ri-checkbox-fill" /> question submitted successfully!</p>
+      <!-- Status announcements for screen readers -->
+      <div
+        aria-live="polite"
+        aria-atomic="true"
+        class="sr-only"
+      >
+        {{ statusMessage }}
+      </div>
+      <div
+        v-if="status === 'success'"
+        role="status"
+      >
+        <p>
+          <span
+            class="i-ri-checkbox-fill text-green-600 dark:text-green-400"
+            aria-hidden="true"
+          />
+          question submitted successfully!
+        </p>
         <p>
           <NuxtLink
             to="/"
             class="underlined-link"
-          > go home </NuxtLink>
+          >
+            go home
+          </NuxtLink>
         </p>
-      </template>
-      <p v-else-if="status === 'error'">
-        <i class="i-ri-error-warning-fill" /> an error occurred
+      </div>
+      <p
+        v-else-if="status === 'error'"
+        role="alert"
+        class="text-red-600 dark:text-red-400"
+      >
+        <span
+          class="i-ri-error-warning-fill"
+          aria-hidden="true"
+        />
+        an error occurred. Please try again.
       </p>
     </main>
   </div>
@@ -83,6 +123,13 @@ const status = ref<'idle' | 'pending' | 'error' | 'success'>('idle')
 const denialDetected = ref(false)
 const questionText = ref('')
 
+const statusMessage = computed(() => {
+  if (status.value === 'pending') return 'Submitting question...'
+  if (status.value === 'success') return 'Question submitted successfully!'
+  if (status.value === 'error') return 'Error submitting question. Please try again.'
+  return ''
+})
+
 watchEffect(() => {
   denialDetected.value = /[Dd]enial/.test(questionText.value)
 })
@@ -94,6 +141,7 @@ function fixDenial () {
 
 async function askQuestion () {
   if (status.value === 'pending') return
+  if (!questionText.value.trim()) return
 
   if (denialDetected.value) {
     status.value = 'idle'
diff --git a/app/pages/feedback.vue b/app/pages/feedback.vue
index fd11e586..1dddfb48 100644
--- a/app/pages/feedback.vue
+++ b/app/pages/feedback.vue
@@ -16,15 +16,41 @@
         </label>
         <textarea
           id="feedback"
+          v-model="feedback"
           name="feedback"
-          class="rounded w-full max-w-400px text-black px-3 py-1 f-ring-inset"
+          rows="3"
+          autocomplete="off"
+          class="rounded w-full max-w-400px bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 px-3 py-2 text-base f-ring-inset"
+          :disabled="status === 'pending'"
         />
-        <button
-          type="submit"
-          class="underlined-link outline-none focus-visible:after:opacity-35"
+        <div class="flex items-center gap-3">
+          <button
+            type="submit"
+            class="underlined-link outline-none focus-visible:after:opacity-35 py-2 disabled:opacity-50"
+            :disabled="status === 'pending' || !feedback.trim()"
+          >
+            <span
+              v-if="status === 'pending'"
+              class="i-svg-spinners:90-ring-with-bg h-4 w-4 mr-2"
+              aria-hidden="true"
+            />
+            Submit
+          </button>
+        </div>
+        <div
+          aria-live="polite"
+          aria-atomic="true"
+          class="sr-only"
         >
-          Submit
-        </button>
+          {{ statusMessage }}
+        </div>
+        <p
+          v-if="status === 'error'"
+          role="alert"
+          class="text-red-600 dark:text-red-400 text-sm"
+        >
+          Something went wrong. Please try again.
+        </p>
       </form>
     </main>
   </div>
@@ -33,12 +59,28 @@
 <script lang="ts" setup>
 definePageMeta({ title: 'Feedback' })
 
-async function submitFeedback (event: Event) {
-  const formData = new FormData(event.target as HTMLFormElement)
-  await $fetch('/api/feedback', {
-    method: 'POST',
-    body: { feedback: formData.get('feedback') },
-  })
-  await navigateTo('/voted')
+const feedback = ref('')
+const status = ref<'idle' | 'pending' | 'error'>('idle')
+
+const statusMessage = computed(() => {
+  if (status.value === 'pending') return 'Submitting feedback...'
+  if (status.value === 'error') return 'Error submitting feedback. Please try again.'
+  return ''
+})
+
+async function submitFeedback () {
+  if (!feedback.value.trim()) return
+
+  status.value = 'pending'
+  try {
+    await $fetch('/api/feedback', {
+      method: 'POST',
+      body: { feedback: feedback.value },
+    })
+    await navigateTo('/voted')
+  }
+  catch {
+    status.value = 'error'
+  }
 }
 </script>
diff --git a/app/pages/live.vue b/app/pages/live.vue
index fde717fa..917e5098 100644
--- a/app/pages/live.vue
+++ b/app/pages/live.vue
@@ -187,25 +187,33 @@ function preventZoom () {
 }
 
 .emoji-reaction {
-  animation: float-up 2.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
   line-height: 1;
   text-shadow: 0 0 5px rgb(0 0 0 / 20%);
-  will-change: transform, opacity;
 }
 
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease-in-out;
-}
+@media (prefers-reduced-motion: no-preference) {
+  .emoji-reaction {
+    animation: float-up 2.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+    will-change: transform, opacity;
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.2s ease-in-out;
+  }
 
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
 }
 
-/* Focus styles are now handled via Tailwind classes */
+@media (prefers-reduced-motion: reduce) {
+  .emoji-reaction {
+    display: none;
+  }
+}
 
-/* Remove spinner buttons from number inputs */
 input::-webkit-inner-spin-button,
 input::-webkit-outer-spin-button {
   appearance: none;
diff --git a/app/pages/work.vue b/app/pages/work.vue
index 7d8b31ae..2f8ea97f 100644
--- a/app/pages/work.vue
+++ b/app/pages/work.vue
@@ -17,25 +17,34 @@
         @submit.prevent="handleSubmission"
       >
         <label
+          for="idea-input"
           class="flex md:flex-row flex-col gap-4 flex-grow md:items-center"
         >
           What should I build next?
           <input
+            id="idea-input"
+            v-model="ideaText"
             name="idea"
-            autofocus
-            :disabled="ideaStatus === 'submitting'"
             type="text"
+            autocomplete="off"
+            :disabled="ideaStatus === 'submitting'"
             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 rounded f-ring-accent"
+          :disabled="ideaStatus === 'submitting' || !ideaText.trim()"
+          class="px-2 py-1 tracking-[0.15rem] text-sm uppercase rounded f-ring-accent disabled:opacity-50"
           :class="{
             'bg-green-200 dark:bg-green-900': ideaStatus === 'submitted',
             'bg-red-200 dark:bg-red-900': ideaStatus === 'error',
           }"
         >
+          <span
+            v-if="ideaStatus === 'submitting'"
+            class="i-svg-spinners:90-ring-with-bg h-4 w-4 mr-1"
+            aria-hidden="true"
+          />
           {{
             ideaStatus === 'submitted'
               ? 'Done'
@@ -44,6 +53,13 @@
                 : 'Submit'
           }}
         </button>
+        <div
+          aria-live="polite"
+          aria-atomic="true"
+          class="sr-only"
+        >
+          {{ statusMessage }}
+        </div>
       </form>
       <TheClientWork />
     </main>
@@ -53,16 +69,27 @@
 <script lang="ts" setup>
 definePageMeta({ title: 'Work' })
 
+const ideaText = ref('')
 const ideaStatus = ref<'ready' | 'submitting' | 'submitted' | 'error'>('ready')
-async function handleSubmission (e: Event) {
-  const data = new FormData(e.target as HTMLFormElement)
+
+const statusMessage = computed(() => {
+  if (ideaStatus.value === 'submitting') return 'Submitting idea...'
+  if (ideaStatus.value === 'submitted') return 'Idea submitted successfully!'
+  if (ideaStatus.value === 'error') return 'Error submitting idea. Please try again.'
+  return ''
+})
+
+async function handleSubmission () {
+  if (!ideaText.value.trim()) return
+
   ideaStatus.value = 'submitting'
   try {
     await $fetch('/api/idea', {
       method: 'POST',
-      body: Object.fromEntries([...data.entries()]),
+      body: { idea: ideaText.value },
     })
     ideaStatus.value = 'submitted'
+    ideaText.value = ''
   }
   catch {
     ideaStatus.value = 'error'
-- 
2.51.2