From 68a2240aae36b5be5e63d592c3372461b9e2956b Mon Sep 17 00:00:00 2001
From: Kjell Tore Guttormsen <hello@fromaitochitta.com>
Date: Sun, 3 May 2026 20:12:00 +0200
Subject: [PATCH] docs(ms-ai-architect): playground v3 A11Y-RAPPORT +
 MANUAL-CHECKLIST [skip-docs]

Step 16 (Wave 5).

playground/A11Y-RAPPORT.md (new, 60 lines):
- Skeleton with test setup, 4 surface rows (pending), known violations
  (empty), contrast notes (light + dark mode), keyboard navigation
  notes, screen-reader landmark map, axe-core run instructions.
- Filled in by tester after MANUAL-CHECKLIST.md execution.

playground/MANUAL-CHECKLIST.md (new, 115 lines):
- 10 sections per test-strategist output:
  1. Onboarding round-trip (shared state)
  2. Schema-migration (downgrade + reload)
  3. Project CRUD
  4. Command form prefill from shared state
  5. Paste-import per report type (17 commands enumerated)
  6. Parse error (corrupt markdown)
  7. Export/import cycle
  8. Theme-toggle persistence (Step 13)
  9. file://-standalone verification
  10. axe-core a11y per surface (CDN injection + axe.run + table)
- Each section has a concrete pass/fail criterion with a DevTools-console
  assertion. Section 10 includes axe.run paste-and-execute snippet.
---
 .../playground/A11Y-RAPPORT.md                |  60 +++++++++
 .../playground/MANUAL-CHECKLIST.md            | 115 ++++++++++++++++++
 2 files changed, 175 insertions(+)
 create mode 100644 plugins/ms-ai-architect/playground/A11Y-RAPPORT.md
 create mode 100644 plugins/ms-ai-architect/playground/MANUAL-CHECKLIST.md

diff --git a/plugins/ms-ai-architect/playground/A11Y-RAPPORT.md b/plugins/ms-ai-architect/playground/A11Y-RAPPORT.md
new file mode 100644
index 0000000..cc71bc8
--- /dev/null
+++ b/plugins/ms-ai-architect/playground/A11Y-RAPPORT.md
@@ -0,0 +1,60 @@
+# A11Y-rapport — ms-ai-architect Playground v3
+
+**Status:** Skjelett — fylles ut etter manuell QA (se MANUAL-CHECKLIST.md)
+**Sist oppdatert:** 2026-05-03
+**Versjon:** v3 (single-file `ms-ai-architect-v3.html`)
+**Standard:** WCAG 2.2 AA + Aksel/Digdir-anbefalinger
+
+---
+
+## Test-oppsett
+
+| Felt | Verdi |
+|------|-------|
+| Test-dato | _Fyll inn ved kjøring_ |
+| Tester | _Navn_ |
+| Browser | _Chrome xx / Firefox xx / Safari xx_ |
+| OS | _macOS xx_ |
+| Verktøy | axe-core (latest CDN) + manuell tab-test |
+| Tema testet | Begge (lys + mørk) |
+
+## Surfaces testet
+
+| Surface | Status | Fokus-rekkefølge | Kontrast | Kommentar |
+|---------|--------|-------------------|----------|-----------|
+| Onboarding | _pending_ | _pending_ | _pending_ | 5 grupper, 18 felter |
+| Home | _pending_ | _pending_ | _pending_ | 3 entry-tracks + prosjekt-liste |
+| Catalog | _pending_ | _pending_ | _pending_ | Søk + 5 expansion-grupper, 24 commands |
+| Project | _pending_ | _pending_ | _pending_ | Tabs, paste-import, rapport-slots |
+
+## Kjente avvik
+
+_Ingen registrert ennå (skjelett-rapport)._
+
+## Notater på kontrast
+
+- **Mørk modus (default):** `--color-text-primary` mot `--color-bg`-tokens. Forventet ratio ≥ 4.5:1 (WCAG AA).
+- **Lys modus (Step 13):** Aktiveres via theme-toggle, persistert i `localStorage('ms-ai-architect-theme')`. Krever separat axe-run i lys modus.
+- **Severity-farger** (`--color-severity-critical/high/medium/low`): testet for 3:1 mot bakgrunn (UI-ikon-grense).
+
+## Notater på keyboard-navigasjon
+
+- **Tab-rekkefølge:** Topbar → main-surface → modaler. Onboarding-flyt: form-progress sidebar er sticky men reserveres for klikk-hopp (ikke tab).
+- **Modal:** Forventer fokus-trap (esc lukker, tab sirkulerer innen modalen). Wires opp i `mountModal`/`unmountModal` (Step 7).
+- **Theme-toggle:** Aktiverbar med Enter/Space.
+- **Pyramide-rapport (classify):** `aria-current="true"` på aktiv tier; resten leselig som listepunkter.
+
+## Notater på skjermleser
+
+- **Landmarks:** `<header class="topbar">`, `<main id="app">`, `<nav class="topbar__nav" aria-label="Hovednavigasjon">`.
+- **Surfaces:** Skjules med `hidden`-attributtet (ikke `display: none` i style) — beholder semantisk skjuling for skjermleser.
+- **Labels:** Alle form-felter har `<label for="...">` paret (form-renderer Step 8).
+- **Live regions:** Paste-import-feedback uses `[data-paste-error]` med `role="alert"` etter behov.
+
+## axe-core-kjøring
+
+Se MANUAL-CHECKLIST.md seksjon 9 for nøyaktig kjøre-procedure. Resultatet limes inn her som JSON-utdrag etter første gjennomkjøring.
+
+## Sammendrag
+
+_Fylles ut etter første gjennomkjøring. Forventet utgangspunkt: ≤ 5 violations på alle surfaces samlet, ingen "critical"._
diff --git a/plugins/ms-ai-architect/playground/MANUAL-CHECKLIST.md b/plugins/ms-ai-architect/playground/MANUAL-CHECKLIST.md
new file mode 100644
index 0000000..6f602b5
--- /dev/null
+++ b/plugins/ms-ai-architect/playground/MANUAL-CHECKLIST.md
@@ -0,0 +1,115 @@
+# Manuell QA-sjekkliste — ms-ai-architect Playground v3
+
+**Versjon:** v3 (single-file `ms-ai-architect-v3.html`)
+**Sist oppdatert:** 2026-05-03
+**Bruk:** Krysser av når seksjonen er verifisert. Bruk DevTools-konsoll for assertions.
+
+Åpne `playground/ms-ai-architect-v3.html` direkte fra filsystemet (`file://`). Ingen server kreves. Kjør hver seksjon i rekkefølge — flere tester forutsetter state fra tidligere seksjoner.
+
+---
+
+## 1. Onboarding round-trip (felles state)
+
+- [ ] Åpne playground i tom state (slett `localStorage` først hvis nødvendig: `localStorage.clear()`)
+- [ ] Forventet redirect til onboarding-surface (siden ingen organization.name finnes)
+- [ ] Fyll inn alle 5 grupper (organization, technology, security, architecture, business)
+- [ ] Klikk "Lagre og fortsett"
+- [ ] **Assertion:** `JSON.parse(localStorage.getItem('ms-ai-architect-state-v1')).shared.organization.name` returnerer det du skrev inn
+- [ ] Re-onboard via topbar — verifiser at felter er forhåndsutfylt fra forrige runde
+
+## 2. Schema-migrasjon
+
+- [ ] **Assertion:** `__store.state.__schema_version` er satt til siste SCHEMA_VERSION-verdi
+- [ ] Manuelt nedgrader: `localStorage.setItem('ms-ai-architect-state-v1', JSON.stringify({__schema_version: 0, projects: []}))`
+- [ ] Reload — forventet at MIGRATIONS-pipeline kjører og oppdaterer `__schema_version` til siste versjon
+- [ ] Ingen console.error-meldinger underveis
+
+## 3. Prosjekt-CRUD
+
+- [ ] Fra Home-surface: klikk "Nytt prosjekt"
+- [ ] Modal vises — fyll inn navn + beskrivelse → "Opprett"
+- [ ] **Assertion:** `__store.state.projects.length === 1`
+- [ ] Naviger til prosjektet (klikk fleet-tile)
+- [ ] Klikk "Slett" → bekreft → tilbake til Home med 0 prosjekter
+- [ ] **Assertion:** `__store.state.projects.length === 0`
+
+## 4. Command-skjema-prefill
+
+- [ ] Opprett et nytt prosjekt
+- [ ] Åpne en command (f.eks. "classify") fra prosjekt-tab
+- [ ] Verifiser at felter med `from: 'shared'` er forhåndsutfylt fra onboarding
+- [ ] **Assertion:** `__buildCommand('classify', {})` returnerer en streng som starter med `/architect:classify`
+- [ ] Endre et felt → "Forhåndsvis" → bekreft pipeline-streng oppdateres
+
+## 5. Paste-import per rapport-type (17 commands)
+
+For hver av de 17 rapport-produserende commands:
+
+- [ ] Åpne fixture-fila under `playground/test-fixtures/<command>.md`
+- [ ] Kopier hele innholdet
+- [ ] I prosjekt-tabben: lim inn i textarea → klikk "Analyser rapport"
+- [ ] Verifiser at `[data-report-slot="<command>"]` rendrer rapport (ikke "Kunne ikke parse")
+- [ ] **Assertion:** `__handlePasteImport('<cmd>', '<paste>')` returnerer uten feil
+
+Commands å teste: classify, requirements, transparency, frimpact, conformity, dpia, security, ros, review, cost, license, migrate, adr, summary, poc, utredning, compare.
+
+## 6. Parse-feil — skadet markdown
+
+- [ ] Lim inn ufullstendig markdown (slett en seksjon-overskrift fra fixture)
+- [ ] Verifiser at `[data-report-slot]` rendrer en synlig feil-melding (ikke crash)
+- [ ] **Assertion:** Console viser ingen uncaught exceptions
+- [ ] Feil-meldingen identifiserer hvilken seksjon som mangler
+
+## 7. Eksport/import-syklus
+
+- [ ] Etter onboarding + 1+ prosjekt + 1+ rapport: klikk "Eksporter" i topbar
+- [ ] JSON-fil lastes ned (Blob via URL.createObjectURL)
+- [ ] Slett alt: `localStorage.clear()` + reload
+- [ ] Klikk "Importer" → velg den eksporterte fila
+- [ ] **Assertion:** Alle prosjekter, rapporter og onboarding-svar er gjenopprettet
+
+## 8. Theme-toggle (Step 13)
+
+- [ ] Klikk theme-toggle (text "Mørk" eller "Lys" i topbar)
+- [ ] **Assertion:** `document.documentElement.getAttribute('data-theme')` matcher `localStorage.getItem('ms-ai-architect-theme')`
+- [ ] Reload siden — bekreft tema overlever
+- [ ] Verifiser ingen flash-of-wrong-theme (FOUC) ved reload (theme-bootstrap-script i `<head>`)
+- [ ] Bytt tema flere ganger — alle surfaces bytter farge konsistent
+
+## 9. file://-standalone
+
+- [ ] Kopier mappen `plugins/ms-ai-architect/` til en helt ny lokasjon (f.eks. `/tmp/standalone-test/`)
+- [ ] Åpne `playground/ms-ai-architect-v3.html` derfra med `open` eller direkte i nettleser
+- [ ] Verifiser ingen console-errors ved load
+- [ ] Alle 4 surfaces fungerer (onboarding, home, catalog, project)
+- [ ] Vendored CSS lastes (`vendor/playground-design-system/*.css`)
+
+## 10. axe-core a11y per surface
+
+For hver surface (onboarding, home, catalog, project):
+
+1. Naviger til surfacen
+2. Åpne DevTools-konsollen
+3. Lim inn:
+   ```js
+   var s = document.createElement('script');
+   s.src = 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.0/axe.min.js';
+   document.head.appendChild(s);
+   ```
+4. Vent til axe lastes (~1 sek), så kjør:
+   ```js
+   axe.run().then(r => console.log(JSON.stringify({violations: r.violations.length, byImpact: r.violations.reduce((a,v)=>{a[v.impact]=(a[v.impact]||0)+1;return a;},{})}, null, 2)));
+   ```
+5. Hvis violations: kjør `axe.run().then(r => console.table(r.violations.map(v => ({id:v.id, impact:v.impact, nodes:v.nodes.length, help:v.help}))))` for detaljert tabell
+6. Lim inn JSON-resultatet i A11Y-RAPPORT.md (seksjon "axe-core-kjøring")
+
+**Forventet baseline:** 0 critical, ≤ 3 serious totalt, ≤ 5 moderate. Alle skal logges i A11Y-RAPPORT.md selv om de er innenfor toleranse.
+
+**Tab-test:** Etter axe — naviger hele surfacen kun med Tab/Shift+Tab/Enter. Notér i rapporten hvis fokus-rekkefølge føles uintuitiv eller hvis en interaktiv element ikke er nåbar.
+
+## Avslutning
+
+- [ ] Alle seksjoner ovenfor avkrysset
+- [ ] A11Y-RAPPORT.md oppdatert med browser-versjon, tester-navn, dato
+- [ ] axe-core JSON limt inn i rapporten
+- [ ] Avvik dokumentert med severity og handlingsplan