129 lines
9.1 KiB
Markdown
129 lines
9.1 KiB
Markdown
# 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 | Group A test SC1.4 + Group B fleet-grid CSS parity-test (99707f51) verifiserer at vendored DS `components-tier3-supplement.css` `.fleet-grid` block fortsatt har `grid-template-columns: repeat(4, 1fr)` + `gap: var(--space-3)`. 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 | PASS | Group D test SC1.6; `loadProjectDirectory` leser `docs/screenshots/**/*.png` via `readAsDataURL` (2 MB cap) og `renderScreenshotGallery` mounter en `<figure>`-grid i dashboardet. Erstatter scope-guardian SC-GAP-2 PASS-redef med faktisk inline gallery (v4.3 Step 8, finding 31d28f65). |
|
||
| 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` + Group B `SC1.4 fleet-grid CSS parity vs vendored DS (99707f51)` som verifiserer at `components-tier3-supplement.css` `.fleet-grid` block fortsatt har `grid-template-columns: repeat(4, 1fr)` + `gap: var(--space-3)`
|
||
- **Status:** PASS (fleet-grid CSS parity verifisert via Group B strukturell test mot vendored DS; scope-guardian SC-GAP-1 lukket via /trekreview Sesjon 13, Assumption #21 operatør-sign-off står)
|
||
|
||
### 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
|
||
- **Bokstavelig krav:** llm-security har inline gallery med thumbnail-grid for case-studies
|
||
- **Voyage-implementering (v4.3 Step 8, finding 31d28f65):** `loadProjectDirectory` detekterer `docs/screenshots/**/*.png` via path-prefix-match, leser dem via `FileReader.readAsDataURL()` med 2 MB per-bilde cap (overskridelse annonseres via aria-live). `renderScreenshotGallery(screenshots)` bygger en `<figure>`-grid med `<img src="<dataUrl>" alt="<filename>">` som mountes under `fleet-grid` i `renderDashboard`. Erstatter den tidligere PASS-redef-tolkningen — voyage har nå et faktisk inline gallery.
|
||
- **Beholder:** `window.__voyage` hooks fra Wave 5 Step 23 (`navigate`, `scheduleRender`, `getProjectArtifacts`) + `docs/screenshots/README.md` mappe-konvensjon — fortsatt brukt av Playwright-spec og av operatør for manuell screenshot-prosedyre.
|
||
- **Test:** Group D Playwright-test `SC1.6 inline gallery — data:image PNGs rendered (31d28f65)` injiserer en fixture-artifact via `scheduleRender` og asserter `#voyage-dashboard img[src^="data:image/png"]` count > 0.
|
||
- **Status:** PASS (inline gallery implementert; scope-guardian SC-GAP-2 lukket).
|
||
|
||
### 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)
|