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

オープン
  • 何か問題がありますか？
#373 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
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分
マージ済み PR（30日）
98

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

nevridge/TaskFlow のほかの issue

nevridge/TaskFlow の issue をすべて見る

似ている issue

C# の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。