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

Aperta
  • Qualcosa non va?
#373 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
50/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
css
Ambito
accessibility

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.
Lingua principale
C#
Stelle
1
Fork
0
Merge medio
2h 2m
PR unite (30g)
98

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di nevridge/TaskFlow

Tutte le issue di nevridge/TaskFlow

Issue simili

Altre issue su C#

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.