jake/Lumotia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(a11y): P3 — drop focus:outline-none on inputs; restore global :focus-visible

Browse Source 
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>
This commit is contained in:
Jake
2026-04-29 12:04:23 +01:00
parent 2da0a5bab8
commit d089fdb37f
6 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/components/ImplementationRulesEditor.svelte
View File

@@ -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}
/>

2
src/lib/components/TaskSidebar.svelte
View File

@@ -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}

2
src/lib/components/WipTaskList.svelte
View File

@@ -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>

2
src/lib/pages/FilesPage.svelte
View File

@@ -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

6
src/lib/pages/HistoryPage.svelte
View File

@@ -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

8
src/lib/pages/TasksPage.svelte
View File

@@ -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}