fix(a11y): dia-inhoud bewoog mee met het app-thema — codeblok, grafiek-tooltip en projectielabel (#822) #827

Merged

brenno merged 1 commit from fix/dia-inhoud-thema-onafhankelijk-822 into main

2026-07-24 22:34:07 +00:00

brenno commented

2026-07-24 22:30:17 +00:00

Owner

Gemeten

	licht	donker
Grafiek-tooltip: wit op `ink`	17,85	1,18
Codeblok mét taal: `githubTheme` op `ghSurface`	11,87	1,23
PERSOONSGEGEVENS-label: `warningFg` op zwart	2,96 (export!)	14,56

Het label is de ergste: het staat op een zwart projectie-overlay, en de
export schreef de lichte kant van warningFg (#92400E) — 2,96:1 — terwijl de
donkere-modus-preview de amber toonde. Preview en export weken dus uiteen,
precies wat het exportdialoog belooft dat níet gebeurt.

De fix

ghSurface/ghInk/ghBorder → const (de lichte waarden). Ze worden
nergens buiten lib/widgets/slides/ gebruikt, en de syntaxkleurstelling
ernaast (githubTheme) is de vaste lichte — de bak hoort niet mee te bewegen.
Dekt het codeblok én het mermaid-diagram in één keer.
Grafiek-tooltip → chartTooltipBg (#0F172A, de lichte kant van ink),
een vaste donkere bak. Wit leest erop, in beide modi, gelijk aan de export.
PERSOONSGEGEVENS-label → vaste merkgeel in plaats van warningFg.

Draaiend nagekeken (donkere modus)

Het codeblok (```dart): lichte bak, donkere syntax — leest. Precies de tak
mét taalherkenning die 1,23:1 was.
De grafiek-tooltip: "Beta · Reeks 1: 75", wit op donkerblauw.

De poort — en waarom die het echte werk is

app_theme_contrast_test had hier al een toets, maar die somde drie tokens op
(slideInk/slideInkMuted/slideInkSoft). Een tokenlijst bewaakt wat erin
staat; ink, ghSurface, ghInk, ghBorder en warningFg stonden er niet
in.

slide_content_theme_independent_test draait het om: hij leest de
mode-afhankelijke getters uit app_theme.dart zélf (elke get X => _m(…)) en
controleert dat géén ervan in het dia-renderpad voorkomt (previews/ +
mermaid_diagram.dart). Een bronwacht op de gebruiksplek, niet op een lijst
— zo veroudert hij niet bij het volgende token dat mode-afhankelijk wordt. Eén
keer rood gezien door ink terug te zetten.

De chrome eromheen (dialogen, popovers, thumbnail-badges) blijft bewust
mode-afhankelijk: die staat niet op de dia en hoort juist met het thema mee te
bewegen.

Poorten

make check, goldens, secrets en SAST groen. Bewaker overgeslagen, expliciet:
geen formaat/opslag/afhankelijkheid/verkeer/belofte geraakt — kleurtokens en één
toets. (De export-parity die dit herstelt is juist een belofte die het naleeft,
niet breekt.)

Closes #822

Een dia is een vast wit canvas: preview, beamer en de headless export-isolate horen identiek te renderen, en de export schrijft altijd de lichte waarden. Drie dia-onderdelen kleurden zich uit **mode-afhankelijke** `AppTheme`-tokens, en keerden dus om in donkere modus terwijl het canvas wit bleef. ## Gemeten | | licht | donker | |---|---|---| | Grafiek-tooltip: wit op `ink` | 17,85 | **1,18** | | Codeblok mét taal: `githubTheme` op `ghSurface` | 11,87 | **1,23** | | PERSOONSGEGEVENS-label: `warningFg` op zwart | **2,96 (export!)** | 14,56 | Het label is de ergste: het staat op een zwart projectie-overlay, en de *export* schreef de lichte kant van `warningFg` (#92400E) — 2,96:1 — terwijl de donkere-modus-preview de amber toonde. Preview en export weken dus uiteen, precies wat het exportdialoog belooft dat níet gebeurt. ## De fix - **`ghSurface`/`ghInk`/`ghBorder` → `const`** (de lichte waarden). Ze worden nergens buiten `lib/widgets/slides/` gebruikt, en de syntaxkleurstelling ernaast (`githubTheme`) is de vaste lichte — de bak hoort niet mee te bewegen. Dekt het codeblok én het mermaid-diagram in één keer. - **Grafiek-tooltip → `chartTooltipBg`** (`#0F172A`, de lichte kant van `ink`), een vaste donkere bak. Wit leest erop, in beide modi, gelijk aan de export. - **PERSOONSGEGEVENS-label → vaste merkgeel** in plaats van `warningFg`. ## Draaiend nagekeken (donkere modus) - Het codeblok (````dart`): lichte bak, donkere syntax — leest. Precies de tak mét taalherkenning die 1,23:1 was. - De grafiek-tooltip: "Beta · Reeks 1: 75", wit op donkerblauw. ## De poort — en waarom die het echte werk is `app_theme_contrast_test` had hier al een toets, maar die somde drie tokens op (`slideInk`/`slideInkMuted`/`slideInkSoft`). Een tokenlijst bewaakt wat erin staat; `ink`, `ghSurface`, `ghInk`, `ghBorder` en `warningFg` stonden er niet in. `slide_content_theme_independent_test` draait het om: hij leest de mode-afhankelijke getters uit `app_theme.dart` zélf (elke `get X => _m(…)`) en controleert dat géén ervan in het dia-renderpad voorkomt (`previews/` + `mermaid_diagram.dart`). Een bronwacht op de **gebruiksplek**, niet op een lijst — zo veroudert hij niet bij het volgende token dat mode-afhankelijk wordt. Eén keer rood gezien door `ink` terug te zetten. De chrome eromheen (dialogen, popovers, thumbnail-badges) blijft bewust mode-afhankelijk: die staat niet op de dia en hoort juist met het thema mee te bewegen. ## Poorten `make check`, goldens, secrets en SAST groen. Bewaker overgeslagen, expliciet: geen formaat/opslag/afhankelijkheid/verkeer/belofte geraakt — kleurtokens en één toets. (De export-parity die dit herstelt is juist een belofte die het naleeft, niet breekt.) Closes #822

brenno added 1 commit

2026-07-24 22:30:17 +00:00

fix(a11y): dia-inhoud bewoog mee met het app-thema en werd onleesbaar (#822 )

scans / scans (pull_request) Successful in 3m15s

Details

acf4a58e9e

Een dia is een vast wit canvas: preview, beamer en de headless export-isolate
horen identiek te renderen, en de export schrijft altijd de lichte waarden.
Drie dia-onderdelen kleurden zich uit mode-afhankelijke `AppTheme`-tokens, en
keerden dus om in donkere modus terwijl het canvas wit bleef.

Gemeten (op `a5097015`):

  Grafiek-tooltip: wit op `ink`          17,85 licht → 1,18 donker
  Codeblok mét taal: `githubTheme` op    11,87 licht → 1,23 donker
    `ghSurface`
  PERSOONSGEGEVENS-label: `warningFg`     2,96 in de export (!) op zwart

- **`ghSurface`/`ghInk`/`ghBorder`** zijn nu `const` (de lichte waarden). Ze
  worden nergens buiten `lib/widgets/slides/` gebruikt, en de
  syntaxkleurstelling ernaast (`githubTheme`) is de vaste lichte — dus de bak
  hoort niet mee te bewegen. Dit dekt het codeblok én het mermaid-diagram.
- **De grafiek-tooltip** krijgt een vaste donkere bak `chartTooltipBg`
  (`#0F172A`, de lichte kant van `ink`) in plaats van `ink` zelf.
- **Het PERSOONSGEGEVENS-label** op het zwarte projectie-overlay gebruikt de
  vaste merkgeel in plaats van `warningFg`. Dat is de ergste van de drie: de
  export schreef de *lichte* amber (#92400E) op zwart — 2,96:1 — terwijl de
  donkere-modus-preview iets anders liet zien. Eén vaste kleur maakt ze gelijk.

Draaiend nagekeken in donkere modus: het codeblok leest (lichte bak, donkere
syntax) en de tooltip "Beta · Reeks 1: 75" staat wit op donkerblauw.

Bewaakt door `slide_content_theme_independent_test`: het leest de
mode-afhankelijke getters uit `app_theme.dart` zélf en controleert dat géén
ervan in het dia-renderpad (`previews/` + `mermaid_diagram.dart`) voorkomt. Een
bronwacht op de gebruiksplek, niet op een tokenlijst — zo veroudert hij niet bij
het volgende token. Eén keer rood gezien door `ink` terug te zetten.

Closes #822

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>