From d089fdb37f7ac901c5c71e3f3c3fc794f24047a7 Mon Sep 17 00:00:00 2001
From: Jake <jake@corbel.consulting>
Date: Wed, 29 Apr 2026 12:04:23 +0100
Subject: [PATCH] =?UTF-8?q?fix(a11y):=20P3=20=E2=80=94=20drop=20focus:outl?=
 =?UTF-8?q?ine-none=20on=20inputs;=20restore=20global=20:focus-visible?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase 10a a11y audit (2026-04-29) flagged seven inputs across the app
that strip the global 2px :focus-visible outline (defined in app.css:251)
without providing a comparable replacement. Net effect: keyboard users
see at most a 1px border-colour shift on focus, sometimes nothing.

The fix removes the focus:outline-none override so the global rule
applies. Affected inputs:

- FilesPage: file-transcript textarea (F2).
- TasksPage: search input, quick-add input, inline list-edit, new-list
  input (T1, T2, T3, plus the new-list rename input).
- HistoryPage: top search, inline title rename, tag-add (H1).
- ImplementationRulesEditor: trigger/surface/task selects + speak-line
  input (S7).
- TaskSidebar, WipTaskList: quick-add inputs (S8).

The 1px focus:border-accent on inputs that had it is retained as a
secondary cue; the global 2px ring is now the primary indicator and
matches button focus across the app.

Resolves: F2, T1, T2, T3, H1, S7, S8.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/ImplementationRulesEditor.svelte | 10 +++++-----
 src/lib/components/TaskSidebar.svelte               |  2 +-
 src/lib/components/WipTaskList.svelte               |  2 +-
 src/lib/pages/FilesPage.svelte                      |  2 +-
 src/lib/pages/HistoryPage.svelte                    |  6 +++---
 src/lib/pages/TasksPage.svelte                      |  8 ++++----
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/ImplementationRulesEditor.svelte b/src/lib/components/ImplementationRulesEditor.svelte
index 65ac8a2..f88a467 100644
--- a/src/lib/components/ImplementationRulesEditor.svelte
+++ b/src/lib/components/ImplementationRulesEditor.svelte
@@ -131,7 +131,7 @@
         <p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider pt-2">If</p>
         <div class="flex flex-wrap gap-2">
           <select
-            class="bg-bg border border-border rounded-lg px-3 py-2 text-[12px] text-text focus:border-accent focus:outline-none"
+            class="bg-bg border border-border rounded-lg px-3 py-2 text-[12px] text-text focus:border-accent"
             bind:value={triggerKind}
           >
             <option value="time_of_day">time of day</option>
@@ -141,7 +141,7 @@
           {#if triggerKind === "time_of_day"}
             <input
               type="time"
-              class="bg-bg border border-border rounded-lg px-3 py-2 text-[12px] text-text focus:border-accent focus:outline-none"
+              class="bg-bg border border-border rounded-lg px-3 py-2 text-[12px] text-text focus:border-accent"
               bind:value={triggerTime}
             />
           {/if}
@@ -158,7 +158,7 @@
             {#if surfaceEnabled}
               <div class="flex flex-wrap gap-2 pl-1">
                 <select
-                  class="bg-bg border border-border rounded-lg px-3 py-2 text-[12px] text-text focus:border-accent focus:outline-none"
+                  class="bg-bg border border-border rounded-lg px-3 py-2 text-[12px] text-text focus:border-accent"
                   bind:value={surfaceTarget}
                 >
                   <option value="inbox">Inbox</option>
@@ -168,7 +168,7 @@
                 </select>
                 {#if surfaceTarget === "task"}
                   <select
-                    class="min-w-[220px] bg-bg border border-border rounded-lg px-3 py-2 text-[12px] text-text focus:border-accent focus:outline-none"
+                    class="min-w-[220px] bg-bg border border-border rounded-lg px-3 py-2 text-[12px] text-text focus:border-accent"
                     bind:value={surfaceTaskId}
                   >
                     <option value="">Choose task…</option>
@@ -195,7 +195,7 @@
               id="rule-speak-line"
               type="text"
               maxlength="240"
-              class="w-full bg-bg border border-border rounded-lg px-3 py-2 text-[12px] text-text placeholder:text-text-tertiary focus:border-accent focus:outline-none"
+              class="w-full bg-bg border border-border rounded-lg px-3 py-2 text-[12px] text-text placeholder:text-text-tertiary focus:border-accent"
               placeholder="Optional line, e.g. time to plan the day"
               bind:value={speakLine}
             />
diff --git a/src/lib/components/TaskSidebar.svelte b/src/lib/components/TaskSidebar.svelte
index 6b4e386..62199fa 100644
--- a/src/lib/components/TaskSidebar.svelte
+++ b/src/lib/components/TaskSidebar.svelte
@@ -63,7 +63,7 @@
     <input
       type="text"
       class="w-full bg-bg-input border border-border rounded-lg px-3 py-1.5 text-[12px] text-text
-             placeholder:text-text-tertiary focus:outline-none focus:border-accent"
+             placeholder:text-text-tertiary focus:border-accent"
       placeholder="Add task..."
       bind:value={quickInput}
       onkeydown={handleQuickAdd}
diff --git a/src/lib/components/WipTaskList.svelte b/src/lib/components/WipTaskList.svelte
index b20379d..84b1d80 100644
--- a/src/lib/components/WipTaskList.svelte
+++ b/src/lib/components/WipTaskList.svelte
@@ -53,7 +53,7 @@
       onkeydown={handleKeydown}
       placeholder="Add a task…"
       class="flex-1 px-3 py-2 rounded-lg bg-bg-input border border-border-subtle text-text text-[13px]
-        placeholder:text-text-tertiary focus:border-accent focus:outline-none"
+        placeholder:text-text-tertiary focus:border-accent"
       data-no-transition
     />
   </div>
diff --git a/src/lib/pages/FilesPage.svelte b/src/lib/pages/FilesPage.svelte
index 70084e4..b5ecd89 100644
--- a/src/lib/pages/FilesPage.svelte
+++ b/src/lib/pages/FilesPage.svelte
@@ -241,7 +241,7 @@
     <Card classes="h-full flex flex-col">
       <textarea
         class="font-transcript flex-1 w-full bg-transparent text-text p-6
-               resize-none focus:outline-none placeholder:text-text-tertiary"
+               resize-none placeholder:text-text-tertiary"
         placeholder="Transcribed text will appear here..."
         bind:value={fileTranscript}
         data-no-transition
diff --git a/src/lib/pages/HistoryPage.svelte b/src/lib/pages/HistoryPage.svelte
index 61bbafb..20d6a8a 100644
--- a/src/lib/pages/HistoryPage.svelte
+++ b/src/lib/pages/HistoryPage.svelte
@@ -581,7 +581,7 @@
       <div class="flex items-center gap-3 px-4 py-2.5">
         <Search size={16} class="text-text-tertiary flex-shrink-0" aria-hidden="true" />
         <input
-          class="flex-1 bg-transparent text-text text-[13px] placeholder:text-text-tertiary focus:outline-none"
+          class="flex-1 bg-transparent text-text text-[13px] placeholder:text-text-tertiary"
           placeholder="Search all transcripts... (try tag:meetings)"
           bind:value={searchQuery}
           data-no-transition
@@ -786,7 +786,7 @@
                     <input
                       type="text"
                       class="w-full bg-bg-input border border-border rounded-lg px-3 py-2 text-[12px]
-                             text-text placeholder:text-text-tertiary focus:outline-none focus:border-accent mb-3"
+                             text-text placeholder:text-text-tertiary focus:border-accent mb-3"
                       placeholder="Name this transcript..."
                       value={item.title || ""}
                       oninput={(e) => { item.title = e.target.value; }}
@@ -828,7 +828,7 @@
                       <input
                         type="text"
                         class="bg-bg-input border border-border rounded-full px-2 py-0.5 text-[10px]
-                               text-text placeholder:text-text-tertiary focus:outline-none focus:border-accent w-[110px]"
+                               text-text placeholder:text-text-tertiary focus:border-accent w-[110px]"
                         placeholder="+ add tag"
                         onkeydown={(e) => handleAddTagKey(e, item)}
                         data-no-transition
diff --git a/src/lib/pages/TasksPage.svelte b/src/lib/pages/TasksPage.svelte
index e6e7eda..d38c5ec 100644
--- a/src/lib/pages/TasksPage.svelte
+++ b/src/lib/pages/TasksPage.svelte
@@ -377,7 +377,7 @@
       <Search size={14} class="text-text-tertiary flex-shrink-0" aria-hidden="true" />
       <input
         type="text"
-        class="flex-1 bg-transparent text-[12px] text-text placeholder:text-text-tertiary focus:outline-none"
+        class="flex-1 bg-transparent text-[12px] text-text placeholder:text-text-tertiary"
         placeholder="Search tasks..."
         bind:value={searchQuery}
         data-no-transition
@@ -395,7 +395,7 @@
       <Plus size={16} class="text-text-tertiary flex-shrink-0" aria-hidden="true" />
       <input
         type="text"
-        class="flex-1 bg-transparent text-[13px] text-text placeholder:text-text-tertiary focus:outline-none"
+        class="flex-1 bg-transparent text-[13px] text-text placeholder:text-text-tertiary"
         placeholder="Add a task to {activeListName}{activeBucket !== 'all' ? ` (${activeBucket})` : ''}... (Enter to save)"
         bind:value={quickInput}
         onkeydown={handleQuickAdd}
@@ -485,7 +485,7 @@
               <input
                 bind:this={editingInputEl}
                 type="text"
-                class="w-full bg-bg-input border border-accent rounded px-2 py-1 text-[10px] text-text focus:outline-none"
+                class="w-full bg-bg-input border border-accent rounded px-2 py-1 text-[10px] text-text"
                 bind:value={editingName}
                 onkeydown={(e) => { if (e.key === "Enter") finishRenaming(); if (e.key === "Escape") { editingListId = null; } }}
                 onblur={finishRenaming}
@@ -545,7 +545,7 @@
               bind:this={newListInputEl}
               type="text"
               class="w-full bg-bg-input border border-border rounded px-2 py-1 text-[10px] text-text
-                     placeholder:text-text-tertiary focus:outline-none focus:border-accent"
+                     placeholder:text-text-tertiary focus:border-accent"
               placeholder="List name..."
               bind:value={newListName}
               onkeydown={handleCreateList}