docs: complete Stitch frontend replacement

docs/design/ACCESSIBILITY.md

@@ -1,73 +1,42 @@
 # Toegankelijkheid
 
-Doel: WCAG 2.2 AA voor de kernflows.
+Doel: WCAG 2.2 AA voor alle kernflows van de server-rendered Stitch-cockpit.
 
-## Semantiek
+## Productiecontract
 
-- één `h1` per pagina, hiërarchische headings;
-- navigatie in `<nav>` met duidelijke accessible name;
-- lijsten/tabellen voor werkelijke lijst-/tabulaire data;
-- formulieren met expliciete `<label>`;
-- statusmetadata als definition list waar passend;
-- externe links herkenbaar in tekst/accessible label.
+- Skiplink, `aside`/`nav`, `header`, één `main` en één `h1` per pagina.
+- Headingniveaus volgen de visuele hiërarchie; tabulaire data gebruikt echte headers.
+- Formulieren hebben expliciete labels, hints, gekoppelde errors en servervalidatie.
+- Status gebruikt tekst naast kleur; score en datakwaliteit zijn afzonderlijk benoemd.
+- Icon-only controls hebben een toegankelijke naam; lokale decoratieve SVG's zijn verborgen.
+- Externe vacaturetekst is gesanitized; links gebruiken veilige attributen en geen verborgen automatische actie.
 
-## Toetsenbord
+## Toetsenbord en progressive enhancement
 
-Alle functies moeten zonder muis werken. Focusvolgorde volgt visuele volgorde. `:focus-visible` heeft een contrastvolle ring. Geen keyboard traps. Na server-POST landt focus logisch via heading/message; toekomstige modals herstellen focus.
+Alle routes, filters, feedback, dossiers, statuswijzigingen en profiel-/bronforms werken zonder JavaScript. JavaScript verbetert uitsluitend drawer, disclosure, viewtoggle, zoekfocus en thema. De mobiele drawer beheert `aria-expanded`, focus en sluitactie. Focus is zichtbaar; er zijn geen tijdslimieten of keyboard traps. `prefers-reduced-motion` reduceert alle transities.
 
-## Kleur en contrast
+## Contrast, zoom en reflow
 
-- bodytekst minimaal 4,5:1;
-- grote tekst minimaal 3:1;
-- focus en componentgrenzen minimaal 3:1 waar vereist;
-- status nooit alleen via kleur;
-- light/dark afzonderlijk toetsen.
+De donkere en lichte tokensets bewaren tekst-, focus- en componentcontrast. Metadata is gedempt maar niet de enige informatiedrager. Content heeft geen vaste teksthoogte. Op 360 px en bij 200% zoom blijft het document binnen het viewport; alleen intrinsiek brede pipeline-/tabeldata gebruikt een gelabelde interne scroller.
 
-## Zoom en reflow
+## Browservalidatie VR-213
 
-- bruikbaar op 320 CSS px breed;
-- 200% zoom zonder verlies van acties/tekst;
-- geen vaste hoogte voor tekstkaarten;
-- lange URL's en woorden breken;
-- horizontale scroll alleen voor intrinsiek brede data met alternatief.
+Op 22 juli 2026 zijn de negen hoofdervaringen met echte lokale data gecontroleerd:
 
-## Forms en fouten
+- viewports: 1440×900, 1280×800, 1024×768, 768×1024, 390×844 en 360×800;
+- aanvullende widescreencontrole: 1920×1080 en 2560×1440;
+- op iedere gecontroleerde route: één `h1`, skiplink, hoofdlandmark, geen kapotte images en geen documentbrede overflow;
+- mobiele sidebar is gesloten buiten gebruik, opent met `aria-expanded=true` en sluit terug naar `false`;
+- dark/light wisselt met de correcte actienaam; de initiële naam volgt nu ook een opgeslagen voorkeur;
+- pipeline en automationtabellen scrollen lokaal zonder de pagina te verbreden;
+- browserconsole bevatte geen errors of warnings.
 
-- foutsummary bovenaan bij meerdere fouten;
-- inline fout bij veld;
-- `aria-invalid` en `aria-describedby`;
-- voorbeeld en vereiste syntax als hint;
-- geen placeholder als enige label;
-- validatie niet alleen on blur.
+De elf bewijsscreenshots staan onder `artifacts/visual-validation/`. De optionele pytest-Playwrightvariant blijft lokaal overgeslagen wanneer Playwright niet geïnstalleerd is; de HTML/a11y-probe en de geïntegreerde Codex-browseraudit vormen samen het uitgevoerde bewijs.
 
-## Dynamiek
+## Handmatige reviewchecklist
 
-- server-rendering heeft geen verborgen loading state;
-- async updates gebruiken live regions spaarzaam;
-- successmessages niet alleen tijdelijk visueel;
-- motion respecteert reduced motion;
-- tijdslimieten bestaan niet in gebruikersflows.
-
-## Vacaturetekst
-
-Gesanitized HTML behoudt headings, paragraphs, lists en links waar veilig. Verwijder scripts, forms, iframes, eventhandlers en gevaarlijke URL-schema's. Voeg waar nodig `rel="noopener noreferrer"` toe aan externe links.
-
-## Testen
-
-Per zichtbare taak:
-
-1. keyboard-only;
-2. browser zoom/reflow;
-3. automatische HTML/accessibilityscan waar beschikbaar;
-4. screenreader smoke test voor dashboard, vacaturedetail en profiel;
-5. contrastcontrole;
-6. test met lange/lege/unknown content.
-
-## VR-118 browservalidatie
-
-- Dashboard gecontroleerd op 1440×900, 1280×800, 1024×768, 768×1024, 390×844 en 360×800.
-- Op alle zes viewports: exact één `h1`, geen documentbrede horizontale overflow en de juiste desktop/mobile navigatiestatus.
-- Mobiel menu opent met `aria-expanded=true`, sluit met Escape/sluitactie en is buiten de focus-/accessibilityflow wanneer gesloten.
-- Themawisselaar blijft bruikbaar wanneer browseropslag niet beschikbaar is; de UI geeft dan geen consolefout.
-- Dashboard, vacaturelijst/detail, sollicitatiepipeline, profielen/editor, bronnen en systeem zijn met echte seeded data en zonder externe assets gevalideerd.
-- Screenshots staan onder `docs/design/validation/` en zijn via `.dockerignore` uitgesloten van de productiecontainer.
+1. Tabvolgorde en zichtbare focus op dashboard, detail, profiel en pipeline.
+2. Screenreader-smoke voor shelllandmarks, scorelabels en formuliererrors.
+3. Dark/light contrast en status zonder kleur.
+4. 200% zoom, lange titels, lege/unknown states en 360 px reflow.
+5. Fout/success na POST en terugkeer naar een logisch heading- of messagepunt.