feat: accessibility improvements — Phase 1 + 2 (WCAG 2.2 AA)

Phase 1 (quick wins):
- Skip-to-main-content link in default layout
- aria-hidden on decorative nav SVGs
- role="dialog" + aria-modal + aria-labelledby on all 5 modals
- Form labels wired to inputs via for/id in 4 components
- aria-pressed on CategoryFilter and ZoomToggle buttons
- Chart nav button touch targets p-1 → p-2 (~28px → ~36px)
- aria-label on TimelineStrip toggle button

Phase 2 (moderate effort):
- text-tada-600 → text-tada-700 for body text on light backgrounds
- text-stone-400 → text-stone-500 for light-mode informational text
- Hardcoded #9ca3af → #6b7280 in chart scoped styles
- Focus management: move focus into modals on open, restore on close
- role="radiogroup" + aria-checked on RhythmCreateModal button groups
- Rhythm expand/collapse: div→button with aria-expanded

Also adds design/accessibility.md handover doc for Phase 3 work.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: InfantLab

app/components/ActivityAutocomplete.vue

@@ -172,6 +172,7 @@ onUnmounted(() => {
     <!-- Label -->
     <label
       v-if="label"
+      for="activity-input"
       class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1"
     >
       {{ label }}
@@ -180,6 +181,7 @@ onUnmounted(() => {
     <!-- Input -->
     <div class="relative">
       <input
+        id="activity-input"
         ref="inputRef"
         :value="modelValue"
         type="text"

app/components/CategoryFilter.vue

@@ -40,6 +40,7 @@ const categories = computed(() => [
       :key="cat.value"
       type="button"
       class="flex items-center gap-1.5 px-3 py-2 rounded-full text-sm whitespace-nowrap transition-colors"
+      :aria-pressed="selectedCategory === cat.value"
       :class="
         selectedCategory === cat.value
           ? 'bg-tada-500 text-white shadow-md'

app/components/CategorySubcategoryPicker.vue

@@ -64,8 +64,9 @@ const selectClass = computed(() =>
 <template>
   <div :class="gridClass">
     <div :class="wrapperClass">
-      <label :class="labelClass">Category</label>
+      <label for="category-select" :class="labelClass">Category</label>
       <select
+        id="category-select"
         :value="category ?? ''"
         :class="selectClass"
         @change="handleCategoryChange"
@@ -83,8 +84,9 @@ const selectClass = computed(() =>
       </select>
     </div>
     <div :class="wrapperClass">
-      <label :class="labelClass">Subcategory</label>
+      <label for="subcategory-select" :class="labelClass">Subcategory</label>
       <select
+        id="subcategory-select"
         :value="subcategory ?? ''"
         :disabled="!category"
         :class="selectClass"

app/components/ContextualHelpPanel.vue

@@ -287,12 +287,15 @@ onUnmounted(() => {
     >
       <div
         v-if="open"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="help-panel-title"
         class="fixed right-0 top-0 bottom-0 w-full max-w-md bg-pearl-cream dark:bg-cosmic-void border-l border-stone-200 dark:border-stone-700 z-50 overflow-y-auto"
       >
         <!-- Header -->
         <div class="sticky top-0 bg-pearl-cream/95 dark:bg-cosmic-void/95 backdrop-blur-sm border-b border-stone-200 dark:border-stone-700 px-6 py-4 flex items-center justify-between">
           <div>
-            <h2 class="text-lg font-semibold text-stone-800 dark:text-stone-100">
+            <h2 id="help-panel-title" class="text-lg font-semibold text-stone-800 dark:text-stone-100">
               {{ currentHelp.title }}
             </h2>
             <p class="text-sm text-stone-500 dark:text-stone-400">
@@ -336,7 +339,7 @@ onUnmounted(() => {
                   </p>
                   <p
                     v-if="section.tip"
-                    class="mt-2 text-sm text-tada-600 dark:text-tada-400 flex items-start gap-1"
+                    class="mt-2 text-sm text-tada-700 dark:text-tada-400 flex items-start gap-1"
                   >
                     <span class="flex-shrink-0">💡</span>
                     <span>{{ section.tip }}</span>
@@ -350,7 +353,7 @@ onUnmounted(() => {
           <div class="pt-4 border-t border-stone-200 dark:border-stone-700 space-y-3">
             <NuxtLink
               to="/help"
-              class="flex items-center gap-2 text-tada-600 dark:text-tada-400 hover:underline"
+              class="flex items-center gap-2 text-tada-700 dark:text-tada-400 hover:underline"
               @click="close"
             >
               <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">

app/components/DurationPicker.vue

@@ -154,6 +154,7 @@ function clearDuration() {
           :value="preciseMinutes"
           type="number"
           min="0"
+          aria-label="Minutes"
           :disabled="disabled"
           class="w-16 px-2 py-2 rounded-lg border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-900 text-stone-900 dark:text-white text-center focus:ring-2 focus:ring-tada-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
           @input="
@@ -171,6 +172,7 @@ function clearDuration() {
           type="number"
           min="0"
           max="59"
+          aria-label="Seconds"
           :disabled="disabled"
           class="w-16 px-2 py-2 rounded-lg border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-900 text-stone-900 dark:text-white text-center focus:ring-2 focus:ring-tada-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
           @input="

app/components/EmojiPicker.vue

@@ -22,11 +22,17 @@ const emit = defineEmits<Emits>();
 
 const pickerContainer = ref<HTMLElement | null>(null);
 const pickerInstance = ref<EmojiPickerElement | null>(null);
+const closeButtonRef = ref<HTMLElement | null>(null);
+const triggerElement = ref<Element | null>(null);
 
 // Close modal
 function close() {
   emit("update:modelValue", false);
 
+  // Restore focus to the element that opened the picker
+  (triggerElement.value as HTMLElement | null)?.focus();
+  triggerElement.value = null;
+
   // Clean up picker instance so it recreates fresh next time
   if (pickerInstance.value && pickerContainer.value) {
     try {
@@ -56,6 +62,9 @@ watch(
   () => props.modelValue,
   async (isOpen) => {
     if (isOpen && !pickerInstance.value) {
+      // Save trigger element for focus restoration on close
+      triggerElement.value = document.activeElement;
+
       // Wait for next tick to ensure DOM is ready
       await nextTick();
 
@@ -81,6 +90,11 @@ watch(
         // Store instance and append to container
         pickerInstance.value = picker;
         pickerContainer.value.appendChild(picker);
+
+        // Focus the close button so keyboard users land inside the modal
+        nextTick(() => {
+          closeButtonRef.value?.focus();
+        });
       } catch (error) {
         console.error("Failed to load emoji picker:", error);
       }
@@ -119,6 +133,9 @@ onUnmounted(() => {
         @click="close"
       >
         <div
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="emoji-picker-title"
           class="bg-white dark:bg-stone-800 rounded-xl shadow-xl overflow-hidden max-h-[90vh]"
           @click.stop
         >
@@ -127,6 +144,7 @@ onUnmounted(() => {
             class="flex items-center justify-between px-4 py-3 border-b border-stone-200 dark:border-stone-700"
           >
             <h3
+              id="emoji-picker-title"
               class="text-lg font-semibold text-stone-800 dark:text-stone-100"
             >
               Choose Emoji
@@ -135,6 +153,7 @@ onUnmounted(() => {
               </span>
             </h3>
             <button
+              ref="closeButtonRef"
               class="p-2 hover:bg-stone-100 dark:hover:bg-stone-700 rounded-lg transition-colors"
               @click="close"
             >

app/components/LandingPage.vue

@@ -109,7 +109,7 @@ const philosophyPoints = [
               :key="point"
               class="flex items-start gap-3 p-4 bg-white/60 dark:bg-stone-800/60 rounded-xl"
             >
-              <span class="text-tada-600 dark:text-tada-400 text-xl">✓</span>
+              <span class="text-tada-700 dark:text-tada-400 text-xl">✓</span>
               <span class="text-stone-700 dark:text-stone-300">{{ point }}</span>
             </div>
           </div>
@@ -209,7 +209,7 @@ const philosophyPoints = [
           href="https://github.com/infantlab/tada"
           target="_blank"
           rel="noopener noreferrer"
-          class="inline-flex items-center gap-2 text-tada-600 hover:text-tada-700 dark:text-tada-400 dark:hover:text-tada-300 font-medium"
+          class="inline-flex items-center gap-2 text-tada-700 hover:text-tada-800 dark:text-tada-400 dark:hover:text-tada-300 font-medium"
         >
           <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
             <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />

app/components/QuickEntryModal.vue

@@ -56,6 +56,10 @@ const emit = defineEmits<{
 const { createEntry, checkConflicts, isLoading } = useEntryEngine();
 const toast = useToast();
 
+// Focus management
+const firstFocusRef = ref<HTMLElement | null>(null);
+const triggerElement = ref<Element | null>(null);
+
 // Form state
 const mode = ref<EntryMode>(props.initialMode);
 const name = ref(props.initialName);
@@ -107,6 +111,9 @@ watch(
   () => props.open,
   (isOpen) => {
     if (isOpen) {
+      // Save trigger element for focus restoration on close
+      triggerElement.value = document.activeElement;
+
       // Check if resuming from draft
       if (props.resumeDraft) {
         const draft = props.resumeDraft;
@@ -144,6 +151,15 @@ watch(
       }
       conflicts.value = null;
       conflictResolution.value = null;
+
+      // Move focus into modal after DOM update
+      nextTick(() => {
+        firstFocusRef.value?.focus();
+      });
+    } else {
+      // Restore focus to the element that opened the modal
+      (triggerElement.value as HTMLElement | null)?.focus();
+      triggerElement.value = null;
     }
   },
 );
@@ -355,18 +371,22 @@ const modeLabels: Record<EntryMode, string> = {
         >
           <div
             v-if="open"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="quick-entry-title"
             class="relative w-full sm:max-w-md mx-auto bg-white dark:bg-stone-900 rounded-t-2xl sm:rounded-2xl shadow-2xl overflow-hidden max-h-[90vh] overflow-y-auto"
           >
             <!-- Header -->
             <div
               class="flex items-center justify-between px-4 py-3 border-b border-stone-200 dark:border-stone-700"
             >
-              <h2 class="text-lg font-semibold text-stone-900 dark:text-white">
+              <h2 id="quick-entry-title" class="text-lg font-semibold text-stone-900 dark:text-white">
                 {{ modeLabels[mode] }}
               </h2>
               <button
+                ref="firstFocusRef"
                 type="button"
-                class="p-1 rounded-full text-stone-400 hover:text-stone-600 dark:hover:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-800 transition-colors"
+                class="p-2 rounded-full text-stone-400 hover:text-stone-600 dark:hover:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-800 transition-colors"
                 @click="closeModal"
               >
                 <svg
@@ -467,12 +487,14 @@ const modeLabels: Record<EntryMode, string> = {
               <!-- Notes (moved up, right after title) -->
               <div class="space-y-1">
                 <label
+                  for="entry-notes"
                   class="block text-sm font-medium text-stone-700 dark:text-stone-300"
                 >
                   Notes
                   <span class="text-stone-400 font-normal">(optional)</span>
                 </label>
                 <textarea
+                  id="entry-notes"
                   v-model="notes"
                   :rows="2"
                   :placeholder="

app/components/RhythmBarChart.vue

@@ -3,7 +3,7 @@
     <!-- Navigation header -->
     <div class="mb-2 flex items-center justify-between">
       <button
-        class="rounded p-1 text-stone-400 hover:bg-stone-100 hover:text-stone-600 dark:hover:bg-stone-700 dark:hover:text-stone-300"
+        class="rounded p-2 text-stone-400 hover:bg-stone-100 hover:text-stone-600 dark:hover:bg-stone-700 dark:hover:text-stone-300"
         @click.stop="previousPeriod"
       >
         <svg
@@ -26,7 +26,7 @@
       </span>
 
       <button
-        class="rounded p-1 text-stone-400 hover:bg-stone-100 hover:text-stone-600 dark:hover:bg-stone-700 dark:hover:text-stone-300"
+        class="rounded p-2 text-stone-400 hover:bg-stone-100 hover:text-stone-600 dark:hover:bg-stone-700 dark:hover:text-stone-300"
         :disabled="isCurrentPeriod"
         :class="{ 'opacity-30 cursor-not-allowed': isCurrentPeriod }"
         @click.stop="nextPeriod"
@@ -350,7 +350,7 @@ function getTooltip(day: ChartDay): string {
 
 .day-label {
   font-size: 0.5rem;
-  color: #9ca3af;
+  color: #6b7280;
   margin-top: 2px;
   line-height: 1;
 }
@@ -379,7 +379,7 @@ function getTooltip(day: ChartDay): string {
   top: 50%;
   transform: translateY(-50%) rotate(-90deg);
   font-size: 0.5rem;
-  color: #9ca3af;
+  color: #6b7280;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }

app/components/RhythmCreateModal.vue

@@ -52,6 +52,10 @@ const emit = defineEmits<{
   ): void;
 }>();
 
+// Focus management
+const nameInputRef = ref<HTMLInputElement | null>(null);
+const triggerElement = ref<Element | null>(null);
+
 // Form state
 const name = ref("");
 const entryType = ref<"timed" | "tally" | "moment" | "tada">("timed");
@@ -82,6 +86,9 @@ watch(
   () => props.isOpen,
   (isOpen) => {
     if (isOpen) {
+      // Save trigger element for focus restoration on close
+      triggerElement.value = document.activeElement;
+
       if (props.editRhythm) {
         // Edit mode
         name.value = props.editRhythm.name;
@@ -118,6 +125,15 @@ watch(
         specificActivityName.value = "";
       }
       error.value = null;
+
+      // Move focus into modal after DOM update
+      nextTick(() => {
+        nameInputRef.value?.focus();
+      });
+    } else {
+      // Restore focus to the element that opened the modal
+      (triggerElement.value as HTMLElement | null)?.focus();
+      triggerElement.value = null;
     }
   },
 );
@@ -345,11 +361,14 @@ async function save() {
 
         <!-- Modal -->
         <div
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="rhythm-create-title"
           class="relative my-auto w-full max-w-md max-h-[90vh] overflow-y-auto rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-800"
         >
           <!-- Header -->
           <div class="mb-6 flex items-center justify-between">
-            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
+            <h2 id="rhythm-create-title" class="text-xl font-semibold text-gray-900 dark:text-white">
               {{ modalTitle }}
             </h2>
             <button
@@ -385,6 +404,7 @@ async function save() {
               </label>
               <input
                 id="rhythm-name"
+                ref="nameInputRef"
                 v-model="name"
                 type="text"
                 placeholder="Daily Meditation"
@@ -400,11 +420,13 @@ async function save() {
               >
                 Entry Type
               </label>
-              <div class="grid grid-cols-2 gap-2">
+              <div role="radiogroup" aria-label="Entry type" class="grid grid-cols-2 gap-2">
                 <button
                   v-for="option in entryTypeOptions"
                   :key="option.value"
                   type="button"
+                  role="radio"
+                  :aria-checked="entryType === option.value"
                   :class="[
                     'flex items-center justify-center gap-2 rounded-lg border-2 px-3 py-2.5 text-sm font-medium transition-colors',
                     entryType === option.value
@@ -426,11 +448,13 @@ async function save() {
               >
                 Type of moment
               </label>
-              <div class="flex gap-2">
+              <div role="radiogroup" aria-label="Type of moment" class="flex gap-2">
                 <button
                   v-for="option in momentSubcategories"
                   :key="String(option.value)"
                   type="button"
+                  role="radio"
+                  :aria-checked="subcategory === option.value"
                   :class="[
                     'flex-1 flex items-center justify-center gap-2 rounded-lg border-2 px-3 py-2 text-sm font-medium transition-colors',
                     subcategory === option.value
@@ -483,11 +507,13 @@ async function save() {
               >
                 Category
               </label>
-              <div class="mt-2 grid grid-cols-2 gap-2">
+              <div role="radiogroup" aria-label="Category" class="mt-2 grid grid-cols-2 gap-2">
                 <button
                   v-for="option in categoryOptions"
                   :key="option.value"
                   type="button"
+                  role="radio"
+                  :aria-checked="category === option.value"
                   :class="[
                     'flex items-center gap-2 rounded-lg border-2 px-3 py-2 text-sm font-medium transition-colors',
                     category === option.value