Skip to content

polish(renderer): captionStyle variants, wired track colors, token cleanup, dead CSS, a11y#57

Merged
thisiscsim merged 1 commit into
mainfrom
polish/css-a11y-captions
Jul 20, 2026
Merged

polish(renderer): captionStyle variants, wired track colors, token cleanup, dead CSS, a11y#57
thisiscsim merged 1 commit into
mainfrom
polish/css-a11y-captions

Conversation

@thisiscsim

Copy link
Copy Markdown
Owner

Summary

Audit roadmap Phase 6 (final polish).

  • captionStyle variants — the theme's caption style was decorative: karaoke/block/word all rendered the single active word. Now word keeps the single-word look, block shows the current phrase, and karaoke shows the phrase with the active word highlighted in the accent color. Phrase grouping breaks on a speech pause (>0.6s) or a length cap. captionLineAt/activeWordIndexAt are pure and unit-tested (6 cases).
  • Wired timeline track colors — the markup emitted tl-chip-video/-text/-audio but no CSS consumed the --action-* design tokens (chips all rendered generic gray). Now tinted per type from the tokens.
  • Raw hex → token — the recording button's inline #c0392b--foreground-danger.
  • Dead CSS removed (~120 lines from styles.css: .kv, .prompt, .dropzone*, .audio-actions, .swatch*, .style-row*, .critique*, .field(s)/.field-row, .mt) — each verified to have zero JSX references (.input.compact, .field-label, .section-h are still used and kept).
  • Accessibilityui/Modal gains aria-modal, initial focus into the dialog, a Tab focus trap, and focus restore to the opener on close; Home project/album tiles and timeline clips are keyboard-operable (Enter/Space activate; clips expose role/aria-label/aria-pressed).

Renderer-only — no dev-server restart needed.

Deferred (noted, not blocking): full arrow-key clip nudging on the timeline, and merging ExportModal/SettingsModal's bespoke overlays onto ui/Modal (both are larger and carry more visual-regression risk than the rest of this PR).

Test plan

  • 6 caption-grouping tests (word index binary search + phrase grouping/pause-break); 126 total
  • typecheck / lint / format / build green
  • Removed CSS selectors confirmed unreferenced across components/ + App.tsx
  • Manual (post-merge): switch captionStyle in the Inspector and scrub — word vs phrase vs karaoke differ; video/text/audio chips are tinted; Tab is trapped in dialogs and returns to the opener on close

Made with Cursor

…dead CSS, a11y

Closes the Phase 6 polish items:

- captionStyle now actually varies (it was decorative — karaoke/block/word
  all rendered the single active word). "word" keeps the single-word look;
  "block" shows the current phrase; "karaoke" shows the phrase with the
  active word in the accent color. Phrase grouping breaks on a speech pause
  or a length cap. captionLineAt/activeWordIndexAt are pure + unit-tested.
- Timeline track colors wired: the markup emitted tl-chip-video/-text/-audio
  but no CSS consumed the --action-* design tokens; now tinted per type.
- Raw hex -> token: the recording button's #c0392b -> --foreground-danger.
- Dead CSS removed from styles.css (~120 lines: .kv/.prompt/.dropzone*/
  .audio-actions/.swatch*/.style-row*/.critique*/.field(s)/.mt), each
  verified to have zero JSX references.
- a11y: ui/Modal gains aria-modal, initial focus, a Tab focus trap, and
  focus restore on close; Home tiles and timeline clips are keyboard-
  operable (Enter/Space activate; clips expose role/aria-label/selected).

captionStyle grouping tests added (6). Deferred (noted): full arrow-key
clip nudging and merging ExportModal/SettingsModal onto ui/Modal.

Co-authored-by: Cursor <cursoragent@cursor.com>
@thisiscsim
thisiscsim merged commit e48c0e4 into main Jul 20, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant