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

fix(a11y): T4 / T7 / H3 — energy chip + filter pill + per-row checkbox

Browse Source 
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>
This commit is contained in:
Jake
2026-04-29 12:04:51 +01:00
parent fa734c869f
commit 22d554e85b
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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