Interface review HIGH fixes: keyboard rows, dock focus, chord/accent contrast, sticky error toasts (v2026.09.18.001)

[cdburgess75]

What changed

Fixes the five HIGH findings from a cross-discipline interface review of the performance flow (home → set → song view + dock).

1. Rows and chord pills are real buttons. Setlist rows, song rows (set view and library) and chord pills were click-handled <div>/<span>s, so a keyboard could never open a set, a song or a chord diagram. They are now <button>s. .card .meta inherits font/colour/alignment and keeps min-width:0 + overflow:hidden so titles still ellipsise. The long-press guard now skips only non-row buttons (button:not(.meta)) so the context menu still works on a row. The drag handle drops role="button" (it was never focusable) and is aria-hidden.
2. Hidden dock reveals on keyboard focus. After the 4 s auto-hide, Tab landed on dock controls translated off-screen (y=789 in a 768 px viewport). .dock.away:has(:focus-visible){transform:none} brings it back, and dismissDock() defers while keyboard focus is inside it.
3. Chord pill contrast. keyColor() uses lightness 30% for hues 30–180 (C♯ D D♯ E F F♯). White 12.5 px pill text measured 2.68–4.46:1 on those fills; now 4.92–7.42:1. The other six roots were already 5.57–9.80 and are unchanged.
4. Accent text contrast. New --accent-text token (#e04a34 dark = --accent2, #c8342a light) for accent-coloured text: section labels, .ctl on-state, banter bar, capo badge, hint code, file label, danger button. The button coral #cf3c28 measures 4.33:1 on black / 3.98 on panel, under the 4.5 body-text bar. Filled buttons keep --accent (white on it is 4.85).
5. Sticky error toasts. toast() now keeps messages that start with ⚠, or are passed {sticky:true}, until tapped instead of clearing in 1.9 s. Applied to storage-blocked, unreadable-file, invalid-backup, parse-failure and link-failure toasts. "Saved"/"Deleted" still auto-clear.

Version bumped to v2026.09.18.001 in the HTML changelog, brand tag and sw.js CACHE. CLAUDE.md gets the keyColor rule, the --accent-text bullet and the changelog entry.

Why

Reliability at the gig includes a player who can't use a pointer, and chord names are the most-read text on stage. Contrast numbers are WCAG 2.x ratios computed from the token values and confirmed against computed styles in Chromium.

Verified

• CI checks locally: extracted script and sw.js pass node --check, 179 unique ids, brand version matches CACHE.
• Chromium: rows are BUTTON at 16 px, in tab order, 2 px focus ring; Tab from the last pill lands on "Previous song" on-screen with the dock revealed, and it hides ~4 s after focus leaves; pills are buttons with aria-label and open the diagram; D pill renders rgb(116,116,37); .comment and banter render #e04a34 dark / #c8342a light; a ⚠ toast is still shown after 2.3 s and hides on tap, "Saved" clears in 1.9 s; at 320 px titles ellipsise inside the row button with no horizontal overflow.

Reviewer notes

• Visual change: the yellow/green/cyan key colours (C♯–F♯) are noticeably darker in pills, key badges and the chord chart. Deliberate, for contrast.
• Native Enter/Space activation of the new row buttons could not be exercised through the browser automation (its key events carry no code/keypress, and the pre-existing New Song button didn't activate either). Worth one real keyboard tap on a desktop browser.
• Long-press on a row, drag-to-reorder and the dock's tap-to-summon are touch behaviours: please run the usual device pass.

🤖 Generated with Claude Code

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.