From 22d554e85b543b4d958daa9a0c06b3cb5393137b Mon Sep 17 00:00:00 2001
From: Jake <jake@corbel.consulting>
Date: Wed, 29 Apr 2026 12:04:51 +0100
Subject: [PATCH] =?UTF-8?q?fix(a11y):=20T4=20/=20T7=20/=20H3=20=E2=80=94?=
 =?UTF-8?q?=20energy=20chip=20+=20filter=20pill=20+=20per-row=20checkbox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase 10a a11y audit (2026-04-29):

T4: Energy radio chip text in dark mode read at 3.48:1 (text-text-tertiary
  on chip bg). Bumped non-selected chips to text-text-secondary so the
  hierarchy still reads but the resting state clears AA.

T7: Selected energy radio (and the match-my-energy toggle next to it)
  used bg-accent/15 — visually indistinguishable from surrounding bg in
  dark theme. Bumped to bg-accent/25 and added a 1px accent/30 border on
  the selected state so the selected pill is unambiguous in both themes.

H3: Per-row bulk-select checkbox in HistoryPage rested at opacity-50,
  which drops the unchecked outline below 3:1 over bg-bg-card. Bumped
  base opacity to 70%; hover/selected states unchanged.

Note on T6 (energy radiogroup arrow keys): verified the keyboard handler
in TasksPage. It is attached to the wrapper element with role=radiogroup,
and arrow-key events on the focused radio child bubble up to the wrapper
because the focused radio sits inside it. The handler reads
settings.currentEnergy (not the focused element) to pick the next index,
then focuses the new radio explicitly via querySelector. ArrowRight /
ArrowLeft / ArrowUp / ArrowDown / Home / End all wired correctly. No
change needed — pattern is sound.

Resolves: T4, T7, H3. T6 verified working as-is.

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

diff --git a/src/lib/pages/HistoryPage.svelte b/src/lib/pages/HistoryPage.svelte
index 20d6a8a..95f6fa2 100644
--- a/src/lib/pages/HistoryPage.svelte
+++ b/src/lib/pages/HistoryPage.svelte
@@ -682,7 +682,7 @@
                        the click off the row-expand toggle. -->
                   <input
                     type="checkbox"
-                    class="w-3.5 h-3.5 flex-shrink-0 accent-accent cursor-pointer opacity-50 hover:opacity-100 {selected.has(item.id) ? 'opacity-100' : ''}"
+                    class="w-3.5 h-3.5 flex-shrink-0 accent-accent cursor-pointer opacity-70 hover:opacity-100 {selected.has(item.id) ? 'opacity-100' : ''}"
                     aria-label={`Select transcript ${item.title || item.id}`}
                     checked={selected.has(item.id)}
                     onclick={(e) => { e.stopPropagation(); toggleSelected(item.id); }}
diff --git a/src/lib/pages/TasksPage.svelte b/src/lib/pages/TasksPage.svelte
index d38c5ec..044e1a8 100644
--- a/src/lib/pages/TasksPage.svelte
+++ b/src/lib/pages/TasksPage.svelte
@@ -333,8 +333,8 @@
           <button
             class="text-[10px] px-2 py-0.5 rounded-md
               {checked
-                ? 'bg-accent/15 text-accent'
-                : 'text-text-tertiary hover:text-text-secondary'}"
+                ? 'bg-accent/25 text-accent border border-accent/30'
+                : 'text-text-secondary hover:text-text'}"
             role="radio"
             aria-checked={checked}
             aria-label={opt.value ? `Set current energy to ${energyLabel(opt.value)}` : 'Clear current energy'}
@@ -346,8 +346,8 @@
       <button
         class="flex items-center gap-1 btn-md rounded-lg text-[10px]
           {settings.matchMyEnergy
-            ? 'bg-accent/15 text-accent border border-accent/30'
-            : 'text-text-tertiary hover:bg-hover hover:text-text border border-transparent'}"
+            ? 'bg-accent/25 text-accent border border-accent/30'
+            : 'text-text-secondary hover:bg-hover hover:text-text border border-transparent'}"
         style="transition-duration: var(--duration-ui)"
         onclick={toggleMatchMyEnergy}
         aria-pressed={settings.matchMyEnergy}