Fix white-on-accent text contrast across the app (apply --on-accent)

未关闭
  • 哪里不对？
#373 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
50/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
活跃
技术栈
css
领域
accessibility

调研方向

First check #326, which this issue depends on, for the --on-accent token and Save-button changes. Then inspect the listed sites in index.css, journal.css, projects.css and tasks.css, and measure their computed contrast across all 16 theme and mode combinations. Done means every failing site uses the token, passing sites remain unchanged, and the specified contrast, visual checks and project checks pass.

由索引模型根据 Issue 内容生成。

描述

bug

Split from #326 (audit half).

Blocked by #326 (it adds the per-theme text-on-accent token --on-accent and fixes the Save button). This story applies the token to the other white-on-accent sites that fail contrast. It changes how highly visible shared controls look (nav link, primary buttons) in the failing theme and mode combinations, so it is reviewed on its own.

Problem

Other places set color: #fff or white on the theme's accent colour. White on --accent fails 4.5:1 in the same 11 of 16 theme and mode combinations as the Save button (#326): dark mode in all themes except Default, and light mode in Rosé Pine, Tokyo Night, Nord and Kanagawa. The figures below are hand-computed and must be re-measured with computed colours.

User Story

As a TaskFlow user, I want text and glyphs on accent-coloured controls to be readable in every theme and in both light and dark mode, so that I can read the active nav link, primary buttons and other accent controls.

Audit sites (corrected locations, at main 5405774)

Site Element Notes
index.css:496 .app-nav-link.is-active White on accent.
index.css:702 .settings-seg-btn.is-active White on accent. In dark mode the accent background is currently overridden by a specificity bug (see Out of Scope), so the contrast check applies only where the accent background is actually applied.
journal.css:97 Listed in the original description White on accent.
journal.css:334 .todo.is-done .todo-check The check glyph is non-text (3:1 threshold). Seven dark combinations fail even 3:1.
journal.css:711 .log-add-btn Touch only.
journal.css:808 .note-action-save
projects.css:139 Listed in the original description White on accent. The comment at projects.css:138 ("No on-accent token exists in index.css; white is intentional.") must be updated.
tasks.css:501 .t-btn-primary
journal.css:667 .task-typeahead-option.active White on var(--color-accent, #6b4fbb); --color-accent is undefined, so the fallback gives about 6.1:1 and it passes. No change needed.

Acceptance Criteria

  1. Given each audit site above, when it is measured with computed colours in all 16 combinations (8 themes × light/dark), then every failing site adopts the --on-accent token from #326 and every passing site is left alone. Text must reach 4.5:1 and non-text glyphs (the check) 3:1.
  2. Given the default theme, then every site that passes today still passes.
  3. Given a changed site, then its layout, size, states (hover, active, focus, disabled) and any touch-only scope are unchanged.
  4. Given the CSS source, then a source-contract test per changed file asserts the site no longer pairs color: #fff (or white) with var(--accent).
  5. Given the finished change, then a search of the CSS for other color: #fff / white rules on accent backgrounds finds no site missing from this list that fails contrast.
  6. Given each shared control (nav link, settings segment button, tasks primary button), when the change is made, then it is checked visually on every page that uses it, in the 11 failing combinations.
  7. Given the existing tokens, then the values of --accent, --accent-soft, --accent-ink and --on-accent are unchanged by this story.
  8. Given the finished change, then npm run type-check, npm run test -- --run --coverage (80% line threshold) and npm run lint pass.

Edge Cases

  • Hover, active and focus states of each changed site keep contrast.
  • The specificity of changed journal.css buttons must still beat the .journal-page button reset (0-1-1): scoped as .journal-page .classname (0-2-0).
  • Where a dark text colour is needed on pastel accents, check that the check glyph and the done-state border still look coherent.
  • #349, #367 and #369 add journal styles and a disabled checkbox state. If any of those uses an accent background, it uses --on-accent.
  • Any other site on --accent missing from this list would fail the same way (criterion 5).

Out of Scope

  • The --muted token (separate app-wide decision).
  • Changing the existing values of --accent, --accent-soft or --accent-ink.
  • Sites that already pass (for example journal.css:667).
  • The dark-mode specificity bug on .settings-seg-btn (#374).
  • The swatch data in lib/themes.ts drifting from the CSS.
  • Any redesign of the controls beyond what is needed to meet contrast.
主要语言
C#
星标
1
派生
0
平均合并
2 小时 2 分钟
30 天内合并 PR
98

环境准备

  • 提供 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

nevridge/TaskFlow 的其他 Issue

查看 nevridge/TaskFlow 的全部 Issue

相似的 Issue

更多 C# Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。