verify(voyage): SC1 10-element checklist + Playwright baseline screenshots

Step 31 of v4.3 plan — Wave 7 SC1 authoritative verification: - docs/sc1-checklist-verification.md: per-element pass/fail med evidens (Group A test referanser + manuell side-by-side mot llm-security- playground). 8 av 10 PASS bokstavelig, 2 PASS-redef (Element 4 onboarding-grid -> fleet-grid, Element 6 screenshots-spor -> hooks + docs-konvensjon) per scope-guardian Assumptions 21+22 (operator- signed-off ved sesjon-start). - tests/e2e/snapshots/voyage-playground-light.png (1280x900 light theme) - tests/e2e/snapshots/voyage-playground-dark.png (1280x900 dark theme) - tests/e2e/snapshots/a11y-baseline.json: WCAG-violations baseline (aria-hidden-focus + color-contrast) defer-til-v4.4 Pixel-diff-spec (Step 30) sammenlikner mot baseline med maxDiffPixelRatio 0.02. Wave 7 = VERIFICATION ONLY; HTML FROZEN; faktisk a11y-fix deferred til v4.4.
2026-05-10 18:24:29 +02:00 · 2026-05-10 18:24:29 +02:00 · 59cab69bf4
commit 59cab69bf4
parent 067d9ab245
4 changed files with 140 additions and 0 deletions
--- a/plugins/voyage/docs/sc1-checklist-verification.md
+++ b/plugins/voyage/docs/sc1-checklist-verification.md
@ -0,0 +1,131 @@
+# SC1 10-element Checklist Verification — voyage v4.3 playground
+
+**Verifisert:** 2026-05-10 (Sesjon 6, Wave 7)
+**Referanse:** `plugins/llm-security/playground/llm-security-playground.html` (visuell paritet)
+**Metode:** Static-grep (Group A tester, Step 28) + manuell side-by-side + Playwright pixel-diff (Step 30)
+**Status:** 8 av 10 PASS ved bokstavelig criteria, 2 redefinert per scope-guardian Assumptions (operatør-sign-off)
+
+## Sammendrag
+
+| # | Element | Status | Evidens |
+|---|---------|--------|---------|
+| 1 | Header + breadcrumb | PASS | Group A test SC1.1; `app-header__breadcrumb` + `aria-label="Brødsmuler"` |
+| 2 | Breadcrumb retur-bane | PASS | Group A test SC1.2; `breadcrumb-click` handler i `voyage-playground.html:1830` |
+| 3 | Theme bootstrap IIFE | PASS | Group A test SC1.3; `data-theme` + `prefers-color-scheme` IIFE i HTML head |
+| 4 | Onboarding-grid (redefinert) | PASS-redef | Group A test SC1.4; voyage bruker `fleet-grid` + `fleet-tile` istedenfor onboarding-grid (scope-guardian SC-GAP-1, Assumption #21) |
+| 5 | A11Y-panel | PASS | Group A test SC1.5; `guide-panel--info` + `key-stats` + `findings__items` (Wave 5 Step 22) |
+| 6 | Screenshots-spor (redefinert) | PASS-redef | Group A test SC1.6; `window.__voyage` hooks + `docs/screenshots/README.md` istedenfor inline gallery (scope-guardian SC-GAP-2, Assumption #22) |
+| 7 | Body typografi | PASS | Group A test SC1.7; `var(--font-size-*)` + `var(--font-family-mono)` brukt gjennomgående |
+| 8 | Spacing rhythm | PASS | Group A test SC1.8; ≥5 distinkte `var(--space-N)` referanser |
+| 9 | Color-token fidelity | PASS | Group A test SC1.9; `badge--scope-voyage` + `--color-scope-voyage` brukt |
+| 10 | Dark-mode parity | PASS | Group A test SC1.10; `data-theme="dark"` default + persistens via `voyage-theme` localStorage |
+
+**Nettoresultat:** 10/10 verifisert (8 bokstavelig + 2 redefinert med operatør-sign-off i Assumptions #21 og #22). Ingen revisjons-loop til Wave 1-5 utløst.
+
+## Detaljer per element
+
+### Element 1 — Header med breadcrumb
+- **Bokstavelig krav:** sticky topbar med breadcrumb-navigasjon
+- **Implementering:** `class="app-header__breadcrumb"` + `aria-label="Brødsmuler"` i `renderTopbar` (Step 8)
+- **Test:** `tests/playground/voyage-playground.test.mjs` — `SC1.1 header — app-shell topbar with breadcrumb`
+- **Status:** PASS
+
+### Element 2 — Breadcrumb klikkbar retur-bane
+- **Bokstavelig krav:** klikk på "Dashboard" i breadcrumb returnerer til hovedoversikt
+- **Implementering:** `breadcrumb-click` handler renderer dashboard-fleet-grid via `renderDashboard()`
+- **Test:** `SC1.2 breadcrumb — clickable returns to dashboard`
+- **Status:** PASS
+
+### Element 3 — Theme bootstrap IIFE
+- **Bokstavelig krav:** sync IIFE i `<head>` setter `data-theme` før første paint, leser bruker-pref + OS-pref
+- **Implementering:** Linje 22-26 i HTML; sjekker `localStorage('voyage-theme')` → `prefers-color-scheme: dark` matchMedia → fallback `dark`
+- **Test:** `SC1.3 theme bootstrap — IIFE sets data-theme + colorScheme`
+- **Status:** PASS
+
+### Element 4 — Onboarding-grid (REDEFINERT)
+- **Bokstavelig krav:** llm-security har 4 onboarding-tiles (Quickstart / Latest scan / Threats / Roadmap)
+- **Voyage-tolkning:** voyage-domain har én plugin uten onboarding-flow. Redefinerer onboarding-grid som "fleet-grid + recommendation-card-pattern matcher samme grid-system" (Alternatives Considered, plan.md linje 1081)
+- **Implementering:** `fleet-grid` med `fleet-tile`-children, én tile per artifact (brief/plan/research/review)
+- **Test:** `SC1.4 onboarding-grid equivalent — fleet-grid pattern`
+- **Status:** PASS-redef (scope-guardian SC-GAP-1, Assumption #21 — operatør-sign-off ved sesjon-start)
+- **Risk:** `/trekreview` (Sesjon 13) kan flagge dette som BLOCKER og kreve revisjon. Hvis det skjer: revisit som plan-revision.
+
+### Element 5 — A11Y-panel
+- **Bokstavelig krav:** tilgjengelighets-panel viser severity-counters + findings-list
+- **Implementering:** `guide-panel guide-panel--info` container med `key-stats` severity-grid + `findings__items` ordered list. `wireA11yToggle` kobler topbar-button til toggle. Built fra DS-primitives (Wave 5 Step 22)
+- **Hooks:** `window.__voyage.scheduleRender({ a11yViolations })` populerer panelet fra Playwright-spec
+- **Test:** `SC1.5 A11Y panel — guide-panel--info + key-stats + findings`
+- **Status:** PASS
+
+### Element 6 — Screenshots-spor (REDEFINERT)
+- **Bokstavelig krav:** llm-security har inline gallery med thumbnail-grid for case-studies
+- **Voyage-tolkning:** Inline gallery deferret. Wave 5 Step 23 leverer `window.__voyage` hooks-spor (`navigate`, `scheduleRender`, `getProjectArtifacts`) + `docs/screenshots/README.md` mappe-konvensjon
+- **Implementering:** Hooks brukes av Playwright-spec (Step 30); manuell screenshot-prosedyre dokumentert i `docs/screenshots/README.md`
+- **Test:** `SC1.6 screenshots-spor — window.__voyage hooks + docs convention`
+- **Status:** PASS-redef (scope-guardian SC-GAP-2, Assumption #22 — operatør-sign-off ved sesjon-start)
+- **Risk:** Samme som Element 4 — `/trekreview` kan kreve faktisk gallery-komponent.
+
+### Element 7 — Body typografi
+- **Bokstavelig krav:** typografi-skala bruker DS-tokens, ikke literal pixel-verdier
+- **Implementering:** `var(--font-size-{xs,sm,md,lg,xl})` + `var(--font-family-mono)` brukt gjennomgående. Wave 1 Step 5 fjernet literal pixel font-sizes.
+- **Test:** `SC1.7 body typography — DS font-size + family tokens`
+- **Note:** En enkelt `font-size: 0.7rem` literal eksisterer i HTML (linje ~361) — dokumentert i Wave 1; ikke blocker.
+- **Status:** PASS
+
+### Element 8 — Spacing rhythm
+- **Bokstavelig krav:** ≥5 distinkte `--space-N` token-referanser for konsistent spacing
+- **Implementering:** Verifisert via grep-count i Group A test
+- **Test:** `SC1.8 spacing rhythm — DS --space-N tokens used`
+- **Status:** PASS
+
+### Element 9 — Color-token fidelity
+- **Bokstavelig krav:** voyage-scope tokens definert + brukt
+- **Implementering:** Wave 0 Step 1 la til `--color-scope-voyage` + `badge--scope-voyage` i DS `base.css`. Brukt i playground via `class="badge badge--scope-voyage"` i topbar.
+- **Test:** `SC1.9 color-token fidelity — voyage-scope tokens + DS colors`
+- **Status:** PASS
+
+### Element 10 — Dark-mode parity
+- **Bokstavelig krav:** dark mode er førsteklasses borger (ikke lag-på), default-teme følger system-pref
+- **Implementering:** `<html data-theme="dark">` som default; bootstrap-IIFE respekterer `voyage-theme` localStorage, deretter `prefers-color-scheme: dark`, deretter fallback `dark`
+- **Test:** `SC1.10 dark-mode parity — explicit dark default + bootstrap`
+- **Pixel-diff baseline:** `tests/e2e/snapshots/voyage-playground-dark.png` (Step 30 spec)
+- **Status:** PASS
+
+## Baseline-screenshots (Playwright)
+
+Etablert via `npx playwright test --update-snapshots` 2026-05-10. Lagret under
+`tests/e2e/snapshots/`:
+
+- `voyage-playground-light.png` (1280×900, light theme)
+- `voyage-playground-dark.png` (1280×900, dark theme)
+
+Pixel-diff-spec (`tests/e2e/voyage-playground-a11y.spec.mjs`) sammenlikner mot
+disse baselines med `maxDiffPixelRatio: 0.02`. Avvik > 2% utløser test-fail.
+
+## Kjente WCAG-violations (baseline'd, defer til v4.4)
+
+Wave 7 = VERIFICATION ONLY. HTML er FROZEN i Sesjon 6 — ingen fix. Existing
+critical/serious violations er recorded i `tests/e2e/snapshots/a11y-baseline.json`
+som delta-baseline:
+
+```json
+{
+  "light": { "aria-hidden-focus": 1, "color-contrast": 4 },
+  "dark": { "aria-hidden-focus": 1 }
+}
+```
+
+- **`aria-hidden-focus`** (1 forekomst, light + dark): aria-hidden element inneholder fokuserbart innhold
+- **`color-contrast`** (4 forekomster, kun light theme): `.key-stat--critical > .key-stat__label` har kontrast 3.85:1 (WCAG AA krever 4.5:1)
+
+**Defer-rationale:** v4.3 brief Wave 7 mandat er `test_strategy.coverage`-utvidelse, ikke
+WCAG-fixing. v4.4 skal unfreeze HTML og adressere disse via DS-token-justering.
+
+## Verifikasjon-sjekkliste (Steg-for-steg)
+
+- [x] Group A static-grep tester (Step 28) passerer alle 17 SC1-elementer
+- [x] Manuell side-by-side mot llm-security-playground (operatør, dette dokument)
+- [x] Playwright PNG-baselines etablert for light + dark theme
+- [x] axe-core delta-baseline JSON committed
+- [x] Pixel-diff spec passerer 2% terskel
+- [x] WCAG-violations dokumentert som baseline (defer til v4.4)
--- a/plugins/voyage/tests/e2e/snapshots/a11y-baseline.json
+++ b/plugins/voyage/tests/e2e/snapshots/a11y-baseline.json
@ -0,0 +1,9 @@
+{
+  "light": {
+    "aria-hidden-focus": 1,
+    "color-contrast": 4
+  },
+  "dark": {
+    "aria-hidden-focus": 1
+  }
+}
--- a/plugins/voyage/tests/e2e/snapshots/voyage-playground-dark.png
+++ b/plugins/voyage/tests/e2e/snapshots/voyage-playground-dark.png
--- a/plugins/voyage/tests/e2e/snapshots/voyage-playground-light.png
+++ b/plugins/voyage/tests/e2e/snapshots/voyage-playground-light.png