Design system v4.1, licht: de kleine letter en de prijsregel halen WCAG AA, geen donkere modus

[Apolloccrypt]

Herstel na review. De donkere laag is er in zijn geheel uit. Wat overblijft is de gemeten lichte winst, en verder niets: geen nieuwe tokenset, geen componentlaag, geen letterlijke-kleur-sweep over de gedeelde stylesheets. Eén token in frontend/design-system.css verandert van waarde.

Waarom de donkere laag eruit ging

De directie las de vorige stand en trok drie dingen aan:

• de donkere modus stond achter [data-theme] zonder schakelaar in de nav, dus geen bezoeker kon hem bereiken
• in die stand was hij onleesbaar op /security, /pricing en het dashboard: wit op lime, 1.07:1
• hij kostte 31 KB op alle 58 pagina's, en geen enkele nginx-conf in deploy/ zet gzip aan

frontend/design-system.css ging in de vorige stand van 85374 naar 116364 bytes. Nu staat hij op 86270, en die 896 bytes zijn vrijwel volledig het commentaarblok met de gemeten getallen. nav.css, parapear.css en relay-pulse.css staan weer letterlijk op main.

De winst

--ink-dim stond op rgba(11,58,106,.65):

tegen	ratio	AA vraagt
het papier (#F8FAFC)	4.09:1	4.5
de voet (#EEF2F6)	3.96:1	4.5
een witte kaart	4.18:1	4.5

Drie keer net eronder, en drie keer onder de tekst die de prijs, de limiet en de kleine letter draagt. --ink-dim, --lime-dim en --black-dim wijzen nu naar --ink-2, #40505F, 7.95:1 op het papier.

Gemeten met de WCAG 2.1 relatieve-luminantieformule, elke tekstkleur afgevlakt tegen de eerste ondoorzichtige achtergrond erboven, op 390 en 1440, in licht:

	main	deze tak
hele site, uniek onder AA	82	5
/	4	1
/pricing	8	0
/parasign	7	0
/security	8	1
/dashboard	0	0

Gemeten tegen main op 39179f50. Het dashboard staat er als nul tegen nul: #381 heeft die pagina zelf al schoongemaakt terwijl dit liep.

De vijf die overblijven staan met naam en reden in KNOWN_LIGHT in tests/theme-contrast.test.mjs. Geen van de vijf komt uit het ontwerpsysteem: alle vijf staan als letterlijke kleur in het style-blok van een pagina, en alle vijf staan al op main. De statusregel van /parashare stond er ook op en is door #381 opgelost, dus die is van de lijst af: korter mag, langer niet. De twee op de pagina's hierboven:

• / p.hp-kicker op 4.31:1. index.html kreeg met Homepage, the trust round: a letter from the founder, the receipt that stays, and four facts you can check yourself #382 een eigen palet in zijn kritieke CSS, met --hp-ink-3 op #66727F. Op het tweede papier (#F3F0E8) haalt dat 4.31:1, en daar staat de mono-kicker boven elke sectie. Eén hex lost het op, #5F6B78 geeft 4.71:1, maar dat is een wijziging aan de homepage van Homepage, the trust round: a letter from the founder, the receipt that stays, and four facts you can check yourself #382 en hoort in die tak.
• /security span.check op 1.16:1. Het lime vinkje is hier bullet en geen inhoud: de zin ernaast draagt de betekenis volledig. Lime vervangen is een merkbesluit en geen herstel, dus het staat met naam op de lijst in plaats van dat het stil wordt weggepoetst.

Pixeldiff van de homepage

index.html tegen main, dezelfde chromium, animaties en transities uit:

390x844    0 pixels verschil
1440x900   0 pixels verschil
hele pagina, 390    3705 pixels op 46 regels, y 8908..9004
hele pagina, 1440   3705 pixels op 46 regels, y 6084..6180

Die 46 regels zijn de twee voetregels die op --ink-dim staan. Boven de vouw verandert er geen pixel, ook niet in de nav.

De drie testbestanden

tests/theme-contrast.test.mjs meet elk tekstpaar op zestien pagina's op 390 en 1440: 4448 paren, vijf bekende gevallen, nul nieuwe. De lijst mag korter worden en nooit langer.

tests/motion-safety.test.mjs faalt zodra een element verdwijnt, vervaagt of inklapt onder prefers-reduced-motion in plaats van alleen stil te staan. De review meldde dat /parashare er een element bij verloor, 272 tegen 271. Het meetpunt deugde niet.

Hij laadde elke pagina twee keer, een keer met en een keer zonder reduce, en legde de twee lijsten naast elkaar. Dat vergelijkt twee paginaladingen en niet twee instellingen. /parashare start 400ms na het laden een WebGL-globe waarvan het aantal knopen op een vast meetmoment in de ene lading wel en in de andere nog niet staat: gemeten acht keer op rij 272 tegen 267, en op de CI-runner kwam dat binnen twintig seconden nooit tot stilstand.

Elke pagina wordt nu een keer geladen. Na de binnenkomst opname A, dan page.emulateMedia({ reducedMotion: 'reduce' }) en opname B, dan terug en opname C. Dezelfde DOM, dezelfde scripts, dezelfde toestand, en het enige dat tussen A en B verandert is de media query. C is de controle: wat de pagina zelf tussen twee metingen weghaalt is in C ook weg en telt dus niet als schade van reduce. Vergeleken wordt op wat een layoutbox heeft, en op een DOM-pad in plaats van op een volgnummer in een platte lijst.

Dat is een scherpere claim en geen zwakkere: een element dat in A en C een box heeft en in B niet, is nu rood, en was dat eerder alleen als het totaalaantal toevallig meeveranderde. Gesaboteerd met display:none, opacity:0 en visibility:hidden onder reduce, alle drie rood:

DIV section(5)>div(1)>div(2)>div(1)>div(1) stopped being rendered (235x16 without reduce, no layout box with it)
DIV section(5)>div(1)>div(2)>div(1)>div(3) faded from opacity 1 to 0
DIV section(5)>div(1)>div(2)>div(1)>div(1) became visibility:hidden

tests/apply-nav-idempotent.test.mjs is nieuw en dicht de tweede reviewbevinding. frontend/apply-nav.py stempelt de nav, de mobiele la, de voet en de vier cache-bust-verwijzingen in 58 pagina's, en zijn DS_LINK liep achter op wat die pagina's dragen: pagina's op ?v=24, generator op ?v=23. Een onschuldige python3 frontend/apply-nav.py zou 58 pagina's stil hebben teruggezet naar een stylesheet-url die niet meer bestaat, en de nginx-conf serveert CSS als immutable, max-age=1y. De test draait de generator op een kopie van frontend/ en eist een lege diff.

Gesaboteerd om te zien dat hij bijt: DS_LINK terug op ?v=23 geeft rood en noemt bestand, regelnummer en beide waarden.

frontend/apply-nav.py is not idempotent. Running it on a clean checkout rewrites:
  404.html:28
      committed: <link rel="stylesheet" href="/design-system.css?v=24">
      generated: <link rel="stylesheet" href="/design-system.css?v=23">

Alles in dat bestand staat in functiescope. tests/*.mjs is één gedeelde top-level naamruimte waar elke openstaande pull request in schrijft; scripts/check-test-declarations.sh bewaakt dat en dit bestand voegt er geen naam aan toe.

node_modules

De vorige stand droeg een node_modules-symlink als 120000-blob. .gitignore had node_modules/ en **/node_modules/, en een regel met slash matcht alleen een map: een symlink is voor git een bestand en glipte er langs. De blob is weg en .gitignore vangt hem nu ook zonder slash.

Cache-bust

design-system.css naar ?v=24 over 58 pagina's, plus frontend/apply-nav.py en de verwijzing in tests/access-log-visitors.test.mjs. nav.css blijft op ?v=19, want dat bestand is nu byte voor byte gelijk aan main en een bump die niets verandert is 20 KB die elke bezoeker opnieuw ophaalt.

Poorten

Alles op 39179f50, de main van dit moment.

first-screen                9/9     theme-contrast              1/1
pricing-fold                4/4     motion-safety               8/8
frontend-loading-contract   7/7     apply-nav-idempotent        1/1
seo-contract              14/14     access-log-visitors       16/16
site-claims               36/36     navigation-shell    26 checks
ui-truthfulness             1/1     relay pricing-page          1/1
links                 2 + 2 skip
static-sanity   PASS (alle harde checks)   check-cache-bust   340 links OK
check-csp-inline           OK      check-test-declarations  121 suites
apply_seo_head --check   0 pages   eslint                    schoon

Gerebased

Op main van vandaag, drie keer, want er landden tijdens deze ronde vier andere PR's. De botsingen zaten allemaal in de stylesheet-lijst van de <head>, en zijn allemaal op dezelfde regel opgelost: de lijst van main blijft staan, alleen de cache-bust van deze tak gaat mee. De enige regel die deze tak in die 58 pagina's aanraakt is daarmee de cache-bust van design-system.css. Te controleren met:

git diff origin/main..HEAD -- '*.html' | grep '^[+-]' | grep -v '^[+-][+-]' | grep -vc 'design-system.css?v='

Dat geeft 0.