From f92ac7a5094eaddd7a21227f4a6d1eec3f1eabbf Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Mon, 13 Apr 2026 11:48:57 -0700
Subject: [PATCH] fix: publish modal a11y -- dialog-scoped Tab guard + correct
 first-focus in OutcomeModal

---
 frontend/src/components/PublishOutcomeModal.vue | 6 ++++--
 frontend/src/components/PublishPlanModal.vue    | 2 ++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/PublishOutcomeModal.vue b/frontend/src/components/PublishOutcomeModal.vue
index b1810d1..0154581 100644
--- a/frontend/src/components/PublishOutcomeModal.vue
+++ b/frontend/src/components/PublishOutcomeModal.vue
@@ -33,6 +33,7 @@
             <legend class="form-label">What kind of story is this?</legend>
             <div class="type-toggle flex gap-sm">
               <button
+                ref="firstFocusRef"
                 :class="['btn', 'type-btn', postType === 'recipe_success' ? 'type-btn-active' : 'btn-secondary']"
                 :aria-pressed="postType === 'recipe_success'"
                 @click="postType = 'recipe_success'"
@@ -57,7 +58,6 @@
           </label>
           <input
             id="outcome-title"
-            ref="firstFocusRef"
             v-model="title"
             class="form-input"
             type="text"
@@ -163,7 +163,7 @@ const submitError = ref<string | null>(null)
 const submitSuccess = ref<string | null>(null)
 
 const dialogRef = ref<HTMLElement | null>(null)
-const firstFocusRef = ref<HTMLInputElement | null>(null)
+const firstFocusRef = ref<HTMLButtonElement | null>(null)
 let previousFocus: HTMLElement | null = null
 
 function getFocusables(): HTMLElement[] {
@@ -181,6 +181,8 @@ function handleKeydown(e: KeyboardEvent) {
     return
   }
   if (e.key !== 'Tab') return
+  // Only intercept Tab when focus is inside this dialog
+  if (!dialogRef.value?.contains(document.activeElement)) return
 
   const focusables = getFocusables()
   if (focusables.length === 0) return
diff --git a/frontend/src/components/PublishPlanModal.vue b/frontend/src/components/PublishPlanModal.vue
index 62ff54d..604c71f 100644
--- a/frontend/src/components/PublishPlanModal.vue
+++ b/frontend/src/components/PublishPlanModal.vue
@@ -155,6 +155,8 @@ function handleKeydown(e: KeyboardEvent) {
     return
   }
   if (e.key !== 'Tab') return
+  // Only intercept Tab when focus is inside this dialog
+  if (!dialogRef.value?.contains(document.activeElement)) return
 
   const focusables = getFocusables()
   if (focusables.length === 0) return