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