Skip to content

[Improve] Keep shared controls legible across IDE themes - #1333

Merged
edelauna merged 30 commits into
mainfrom
feature/wcag-contrast-snapshots-157cfn81c2ad4
Aug 22, 2026
Merged

[Improve] Keep shared controls legible across IDE themes#1333
edelauna merged 30 commits into
mainfrom
feature/wcag-contrast-snapshots-157cfn81c2ad4

Conversation

@zoomote

@zoomote zoomote Bot commented Aug 21, 2026

Copy link
Copy Markdown
Contributor

​Created by Roomote. Follow up by mentioning @roomote, in the web UI, or in Discord.

What changed

  • Added a reusable Playwright WCAG contrast harness covering RGB and sRGB color functions, alpha composition, OKLab, exact large-text thresholds, SVG opacity, focus indicators, and conservative rejection of unsupported visual effects.
  • Added four-theme production snapshots for the real ChatTextArea and UISettings, including focused chat-composer states and a numeric UI Settings header contrast assertion.
  • Kept the shared-primitives gallery as separate control-state coverage for text, icons, boundaries, checked and selected indicators, sliders, progress, errors, and keyboard focus.
  • Fixed contrast in shared buttons, inputs, textareas, radios, sliders, progress indicators, field focus states, and theme-adaptive error text.
  • Replaced manually maintained theme values with four generated CSS fixtures captured from the real Zoo Code webview in the exact VS Code 1.100 Extension Development Host. themes.ts now contains only theme IDs, classes, and application orchestration.
  • Added deterministic update/check commands, typed and environment-gated capture plumbing, capture validation, serializer tests, and a CI drift job that regenerates the fixtures from pinned VS Code and fails on byte differences.
  • Normalized only runner-dependent font families in the CT harness while retaining runtime-derived font sizes, weights, and all resolved theme colors.
  • Refreshed all affected baselines from the pinned GitHub Actions Playwright container and documented both baseline and generated-theme maintenance workflows.

Why this change was made

Theme-token usage alone does not guarantee sufficient rendered contrast, and copied theme values inevitably drift from the VS Code runtime that injects them. This adds numeric WCAG 2.2 AA gates and makes the pinned VS Code webview itself the source of truth for visual fixtures.

Impact

Shared controls, chat composition, and UI Settings remain identifiable across maintained light, dark, and high-contrast themes. Future VS Code upgrades cannot silently stale the fixture colors: the real-runtime drift job and pinned visual snapshots must both pass before merge.

Related PRs

@codecov

codecov Bot commented Aug 21, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 98.38710% with 1 line in your changes missing coverage. Please review.

Files with missing lines Patch % Lines
src/core/webview/ClineProvider.ts 95.83% 0 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

@zoomote

zoomote Bot commented Aug 21, 2026

Copy link
Copy Markdown
Contributor Author

Addressing the Codecov patch gap by excluding Playwright visual fixtures from the Vitest/JSDOM coverage flag; those fixtures are executed and reported by the dedicated Playwright CT coverage job.

edelauna
edelauna previously approved these changes Aug 22, 2026
@edelauna
edelauna force-pushed the feature/wcag-contrast-snapshots-157cfn81c2ad4 branch from 61f84fa to 662a14f Compare August 22, 2026 01:19
@edelauna
edelauna force-pushed the feature/wcag-contrast-snapshots-157cfn81c2ad4 branch from 662a14f to d122f42 Compare August 22, 2026 01:37
@edelauna
edelauna force-pushed the feature/wcag-contrast-snapshots-157cfn81c2ad4 branch from c90d038 to 46f3510 Compare August 22, 2026 01:58
@edelauna
edelauna marked this pull request as ready for review August 22, 2026 04:20
@edelauna
edelauna added this pull request to the merge queue Aug 22, 2026
Merged via the queue into main with commit fec4e13 Aug 22, 2026
28 checks passed
@edelauna
edelauna deleted the feature/wcag-contrast-snapshots-157cfn81c2ad4 branch August 22, 2026 04:34
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.

2 participants