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.
This commit is contained in:
parent
e85f3fc9e9
commit
68a2240aae
2 changed files with 175 additions and 0 deletions
60
plugins/ms-ai-architect/playground/A11Y-RAPPORT.md
Normal file
60
plugins/ms-ai-architect/playground/A11Y-RAPPORT.md
Normal file
|
|
@ -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"._
|
||||
115
plugins/ms-ai-architect/playground/MANUAL-CHECKLIST.md
Normal file
115
plugins/ms-ai-architect/playground/MANUAL-CHECKLIST.md
Normal file
|
|
@ -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
|
||||
Loading…
Add table
Add a link
Reference in a new issue