feat(ms-ai-architect): release v1.10.0 — felles grunnskjelett + Tier 3-adopsjon
Playground v3 internal refactor with shared visual signature across all 17 report renderers. Plugin contract (24 commands, 12 agents, 5 skills, 2 hooks, MCP) is unchanged — release is playground-internal. - Foundation helpers: renderPageShell, renderVerdictPill, renderKeyStatsGrid, inferVerdict, inferKeyStats, KEY_STATS_CONFIG - Schema v1->v2 migration (idempotent via dataVersion=2 guard) - Tier 3 supplement components integrated in 11 renderer slots - Parser extensions: parsePhasedPlan (status/currentPhaseIndex/pocVerdict), parseComparison (winner), parseMatrixRisk (_consumer-strategi A) - Onboarding redesign: 4 strukturerte / 14 fritekst - Light-theme tokens (Aksel-aligned, WCAG 2.2 AA) - Validation: 201 statisk + 70 parser + 7 migrasjon = 278 PASS A11Y-RAPPORT.md populated with code-based static assessment of all 4 surfaces and 17 renderers. Browser-axe-core run still pending per MANUAL-CHECKLIST.md section 10. Docs updated per OBLIGATORISK three-level rule: - plugin README.md, plugin CLAUDE.md, marketplace root README.md, CHANGELOG.md Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
f43a38421e
commit
b1738b419c
6 changed files with 209 additions and 59 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "ms-ai-architect",
|
||||
"version": "1.9.0",
|
||||
"version": "1.10.0",
|
||||
"description": "Microsoft AI Solution Architect - structured architecture guidance for the full Microsoft AI stack",
|
||||
"author": {
|
||||
"name": "Kjell Tore Guttormsen"
|
||||
|
|
|
|||
|
|
@ -5,6 +5,56 @@ All notable changes to this project will be documented in this file.
|
|||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## [1.10.0] - 2026-05-04
|
||||
|
||||
### Added — Playground v3 felles grunnskjelett (foundation refactor)
|
||||
|
||||
All 17 report renderers now share a unified visual signature through `renderPageShell()`. The plugin contract (24 commands, 12 agents, 5 skills, 2 hooks, MCP) is unchanged — this release is playground-internal.
|
||||
|
||||
- **Foundation helpers:** `renderPageShell()`, `renderVerdictPill()`, `renderKeyStatsGrid()`, `inferVerdict()`, `inferKeyStats()`, `KEY_STATS_CONFIG` — provide eyebrow + h1 + optional 5-band verdict-pill + optional 3-5 key-stats-grid that every renderer wraps around its archetype-specific body.
|
||||
- **Schema v1→v2 migration:** Eager `MIGRATIONS` pipeline at cold-load and import time, idempotent via `dataVersion=2` guard. Backfills `verdict` and `keyStats` on existing reports without disrupting user state. `tests/test-playground-migrations.sh` (7 PASS) validates idempotency.
|
||||
- **Tier 3 supplement components integrated:** kanban (conformity, review), mat-ladder (migrate, poc), screen-tabs (utredning, project surface), scenario-card-grid (license, compare), residual-pair (dpia, ros), top-risks (ros), recommendation-card (security, ros), suppressed-panel (review), critique-card (adr), read-more (utredning, summary), traffic-light (poc).
|
||||
- **Parser extensions (R15 forward-compat):**
|
||||
- `parsePhasedPlan` — `phases[].status` (planned/active/done) + `currentPhaseIndex` + `pocVerdict`
|
||||
- `parseComparison` — `winner` field from `## Vinner: <id>`-line
|
||||
- `parseMatrixRisk` — `_consumer` discriminator (Strategy A) for shared dpia + ros usage
|
||||
- **Onboarding redesign:** Exactly 4 structured fields (select / multiSelect for sector, regulations, license, scenarios) + 14 free-text fields with placeholder hints. Improves prefill flexibility while keeping enum-driven fields where they matter.
|
||||
|
||||
### Added — Light theme tokens
|
||||
|
||||
- `[data-theme="light"]`-block in `shared/playground-design-system/tokens.css` (re-synced to `playground/vendor/`) with verbatim Aksel values. Both themes meet WCAG 2.2 AA contrast.
|
||||
- Theme-bootstrap-script in `<head>` reads saved `localStorage('ms-ai-architect-theme')` before stylesheets parse — no flash-of-wrong-theme.
|
||||
|
||||
### Added — v1.10.0 fixtures and validation
|
||||
|
||||
- `tests/test-playground-migrations.sh` — new 7 PASS suite for v1→v2 idempotency.
|
||||
- `tests/fixtures/playground/state-v1-snapshot.json` — pre-migration state fixture.
|
||||
- `tests/test-playground-v3.sh` extended to 201 PASS — new asserts on per-renderer `renderPageShell` usage, Tier 3-bruk (kanban / mat-ladder / screen-tabs / scenario-cards), onboarding field-distribution (4 strukturerte / 14 fritekst), `_consumer`-strategi A.
|
||||
- Regenerated fixtures: `migrate.md`, `poc.md` (per-phase Status + POC-Verdict), `compare.md` (`## Vinner:`-line).
|
||||
- `playground/A11Y-RAPPORT.md` — populated with code-based static assessment of all 4 surfaces and 17 renderers (was: skeleton). Browser-axe-core run still pending per `MANUAL-CHECKLIST.md` section 10.
|
||||
|
||||
### Changed
|
||||
|
||||
- `playground/ms-ai-architect-playground.html` — all 17 renderers wrap output via `renderPageShell()`. Inline CSS additions (e.g. `.pyramide-desc`, `.scenario-card-grid`, `.residual-pair`, `.read-more-block`, `.top-risks`, `.recommendation-card`, `.suppressed-panel`) are flagged as v1.11.0 candidates for hoisting to `shared/playground-design-system/components-tier3-supplement.css`.
|
||||
- Plugin README — refreshed v1.10.0 section with foundation-helpers, Tier 3 adoption list, parser extensions, schema migration, theme-tokens.
|
||||
- Plugin CLAUDE.md — Playground (v3) section now reflects v1.10.0 architecture, validation counts (201 + 70 + 7), and inline-CSS hoisting candidates.
|
||||
- Marketplace root README — bumped ms-ai-architect to v1.10.0 with felles grunnskjelett summary.
|
||||
|
||||
### Notes
|
||||
|
||||
- **Plugin API surface unchanged.** All 24 commands, 12 agents, 5 skills (387 reference docs), 2 hooks, and MCP server configuration remain identical to v1.9.0. v1.10.0 is a minor bump per SemVer because the playground state schema change is auto-migrated and backward-compatible.
|
||||
- **6-session implementation** per `.claude/projects/2026-05-03-ms-ai-architect-v1-10-playground/plan.md`:
|
||||
- Session 1: Foundation (theme tokens, helpers, MIGRATIONS, v1-snapshot fixture)
|
||||
- Session 2: Onboarding redesign + surface page-headers + screen-tabs
|
||||
- Session 3: Sub-batch A renderers (regulatory 6) — aiact-pyramid, requirements, transparency, frimpact, conformity, dpia
|
||||
- Session 4: Sub-batch B renderers (security 3) — security, ros, review (REFERENCE STANDARD)
|
||||
- Session 5: Sub-batch C renderers (econ + dokumentasjon 8) — cost, license, migrate, adr, summary, poc, utredning, compare
|
||||
- Session 6: Visual QA + A11Y-rapport + dokumentasjon-overhaul + version bump (this commit)
|
||||
- **Pre-existing test pollution:** `tests/run-e2e.sh` references `tests/test-ros-output.sh` which expects a fixture that has never existed in git (`tests/fixtures/ros-analysis/fixture.md`). Reports as 1 suite failure but is unrelated to v1.10.0 — predates this work and is unchanged here.
|
||||
- **Session 4 commit `645f016` (B.1 bundling):** That commit message was bundled with ultraplan-local work due to hook timing — historical only, not relevant to plugin behavior.
|
||||
|
||||
---
|
||||
|
||||
## [1.9.0] - 2026-05-03
|
||||
|
||||
### Added — Playground v3 (full architecture rewrite)
|
||||
|
|
|
|||
|
|
@ -172,26 +172,43 @@ claude --plugin ./plugins/ms-ai-architect
|
|||
/architect:help
|
||||
```
|
||||
|
||||
## Playground (v3)
|
||||
## Playground (v3 / v1.10.0)
|
||||
|
||||
Interaktiv decision-builder + rapport-viewer for Microsoft AI-beslutninger. Erstatter v2 5-stegs-pipelinen med en multi-surface-app som persisterer state og visualiserer importerte rapporter inline. Spec: v3-arkitektur dokumentert under `.claude/projects/2026-05-03-playground-v3-architecture/`.
|
||||
Interaktiv decision-builder + rapport-viewer for Microsoft AI-beslutninger. Erstatter v2 5-stegs-pipelinen med en multi-surface-app som persisterer state og visualiserer importerte rapporter inline. Spec: v3-arkitektur dokumentert under `.claude/projects/2026-05-03-playground-v3-architecture/`. v1.10.0-utvidelser dokumentert under `.claude/projects/2026-05-03-ms-ai-architect-v1-10-playground/`.
|
||||
|
||||
- **Fil:** `playground/ms-ai-architect-playground.html` (~3870 linjer, single-file v3-arkitektur)
|
||||
- **4 surfaces:** Onboarding (18 felles felt fra `/architect:onboard`) → Home (prosjekt-liste + 3 entry-tracks) → Catalog (24 commands gruppert i 5 expansion-grupper med søk) → Project (per-prosjekt tabs, command-form-prefill fra felles state, paste-back-import med rapport-visualisering)
|
||||
- **Persistens:** IndexedDB-primær med localStorage-fallback. Schema-versjonert (`STATE_KEY = 'ms-ai-architect-state-v1'`) med eager `MIGRATIONS`-pipeline for fremtidige skjema-endringer.
|
||||
- **17 rapport-renderers:** Hver rapport-produserende command har én markdown-parser (markdown → struktur) og én renderer (struktur → HTML-visualisering: pyramide, matrix, radar, findings, distribution, capability-matrix, m.fl.) rutet via en kanonisk archetype-routing-tabell.
|
||||
- **Theme:** Mørk default + lys theme-toggle, persistert i `localStorage('ms-ai-architect-theme')`. Theme-bootstrap-script i `<head>` unngår FOUC.
|
||||
- **Fil:** `playground/ms-ai-architect-playground.html` (~3870+ linjer, single-file v3-arkitektur)
|
||||
- **4 surfaces:** Onboarding (18 felles felt — 4 strukturerte / 14 fritekst etter v1.10.0) → Home (prosjekt-liste + 3 entry-tracks) → Catalog (24 commands gruppert i 5 expansion-grupper med søk) → Project (per-prosjekt tabs, command-form-prefill fra felles state, paste-back-import med rapport-visualisering)
|
||||
- **Persistens:** IndexedDB-primær med localStorage-fallback. Schema-versjonert (`STATE_KEY = 'ms-ai-architect-state-v1'`) med eager `MIGRATIONS`-pipeline. v1.10.0 introduserer `dataVersion v1→v2`-migrasjon (idempotent) som backfill-er `verdict`+`keyStats`.
|
||||
- **17 rapport-renderers (felles grunnskjelett):** Alle wrapper output via `renderPageShell()` med eyebrow + h1 + valgfri verdict-pill + valgfri key-stats-grid + arketype-spesifikk body. Parser → struktur → HTML rutet via kanonisk archetype-routing-tabell.
|
||||
- **Foundation-helpers:** `renderPageShell`, `renderVerdictPill`, `renderKeyStatsGrid`, `inferVerdict`, `inferKeyStats`, `KEY_STATS_CONFIG`.
|
||||
- **Tier 3-adopsjon:** kanban (conformity, review), mat-ladder (migrate, poc), screen-tabs (utredning, project surface), scenario-card-grid (license, compare), residual-pair (dpia, ros), top-risks (ros), recommendation-card (security, ros), suppressed-panel (review), critique-card (adr), read-more (utredning, summary), traffic-light (poc).
|
||||
- **Theme:** Mørk default + lys theme-toggle med Aksel-tokens i begge moduser (lagt til i v1.10.0). Persistert i `localStorage('ms-ai-architect-theme')`. Theme-bootstrap-script i `<head>` unngår FOUC.
|
||||
- **Eksport/import:** JSON Decision Record-envelope (Blob + FileReader), schema-versjon-bevisst på import.
|
||||
|
||||
### Validering
|
||||
### Validering (v1.10.0-tall)
|
||||
|
||||
| Test | Kommando | Dekning |
|
||||
|------|----------|---------|
|
||||
| Statisk struktur | `bash tests/test-playground-v3.sh` | 170 PASS — vendored CSS, surfaces, 24 commands, 14 parsere, 17 renderers, design-system-klasser, action-handlers |
|
||||
| Statisk struktur | `bash tests/test-playground-v3.sh` | 201 PASS — vendored CSS, surfaces, 24 commands, 14 parsere, 17 renderers (felles grunnskjelett), design-system-klasser, action-handlers, Tier 3-bruk, onboarding field-distribution |
|
||||
| Parser-fixtures | `bash tests/test-playground-parsers.sh` | 70 PASS — 17 fixtures × parser-routing |
|
||||
| Kombinert (E2E) | `bash tests/run-e2e.sh --playground` | begge over |
|
||||
| Migrasjon | `bash tests/test-playground-migrations.sh` | 7 PASS — v1→v2 idempotent migrasjon |
|
||||
| Kombinert (E2E) | `bash tests/run-e2e.sh --playground` | statisk + parser-suiter |
|
||||
| Manuell A11Y QA | Se `playground/MANUAL-CHECKLIST.md` | 10 seksjoner inkl. axe-core-kjøring per surface |
|
||||
| A11Y-rapport | `playground/A11Y-RAPPORT.md` | Skjelett — fylles ut etter kjøring |
|
||||
| A11Y-rapport | `playground/A11Y-RAPPORT.md` | Statisk vurdering klar — browser-axe-kjøring pending |
|
||||
|
||||
### Inline CSS-kandidater for hoisting (v1.11.0)
|
||||
|
||||
Sesjon 3-5 la til inline CSS i `playground/ms-ai-architect-playground.html`. Kandidater for hoisting til `shared/playground-design-system/components-tier3-supplement.css`:
|
||||
- `.pyramide-desc` / `.pyramide-desc__item`
|
||||
- `.scenario-card-grid` / `.scenario-card` (hvis ikke allerede der)
|
||||
- `.residual-pair` / `__cell` / `__cell-label/__cell-value/__cell-meta` / `__arrow`
|
||||
- `.read-more-block` (er native `<details><summary>`)
|
||||
- `.top-risks` / `.top-risk[data-severity]`
|
||||
- `.recommendation-card`
|
||||
- `.suppressed-panel`
|
||||
- `.screen-tabs` / `.screen-tab` / `.screen[data-active]`
|
||||
|
||||
Ved hoisting: re-sync via `node scripts/sync-design-system.mjs ms-ai-architect`. Dette er endringer i delt asset — krever drift-deteksjon-handling per `MANIFEST.json`.
|
||||
|
||||
### Vendored design-system
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
*AI-generated: all code produced by Claude Code through dialog-driven development. [Full disclosure →](../../README.md#ai-generated-code-disclosure)*
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -356,9 +356,20 @@ Interactive **decision-builder + report viewer** for Microsoft AI architecture d
|
|||
- **4 surfaces:** Onboarding (18 shared fields) → Home (project list + 3 entry tracks) → Catalog (24 commands grouped by 5 expansion categories with search) → Project (per-project tabs, command form prefill, paste-back report import + visualization)
|
||||
- **Persistent state:** IndexedDB primary store with localStorage fallback. Schema-versioned (`STATE_KEY = 'ms-ai-architect-state-v1'`) with eager `MIGRATIONS` pipeline.
|
||||
- **17 report renderers:** Each report-producing command has a parser (markdown → structured) and renderer (structured → HTML visualization: pyramid, matrix, radar, findings, distribution, capability-matrix, etc.) wired through a canonical archetype-routing table.
|
||||
- **Theme:** Dark default + light mode toggle, persisted in `localStorage('ms-ai-architect-theme')`. Light-mode tokens are pending in the shared design-system; the toggle works but currently only swaps the label.
|
||||
- **Theme:** Dark default + light mode toggle, persisted in `localStorage('ms-ai-architect-theme')`. Both themes ship Aksel-aligned tokens (full WCAG AA contrast) as of v1.10.0; theme-bootstrap script in `<head>` prevents FOUC.
|
||||
- **Export/import:** JSON Decision Record envelope (Blob + FileReader), schema-version-aware on import.
|
||||
|
||||
### v1.10.0 — Foundation refactor (felles grunnskjelett)
|
||||
|
||||
All 17 report renderers now wrap output through `renderPageShell()` for a consistent visual signature:
|
||||
|
||||
- **Foundation helpers** — `renderPageShell()`, `renderVerdictPill()`, `renderKeyStatsGrid()`, `inferVerdict()`, `inferKeyStats()` provide the shared header/eyebrow/h1, optional 5-band verdict-pill, and 3-5 key-stats grid that every renderer can opt into.
|
||||
- **Schema v1→v2 migration** — eager `MIGRATIONS` pipeline (idempotent via `dataVersion=2` guard) backfills `verdict` and `keyStats` on existing reports without disrupting existing user state.
|
||||
- **Tier 3 component adoption** — kanban (conformity, review), mat-ladder (migrate, poc), screen-tabs (utredning, project surface), scenario-card-grid (license, compare), residual-pair (dpia, ros), top-risks (ros), recommendation-card (security, ros), suppressed-panel (review), critique-card (adr), read-more (utredning, summary), traffic-light (poc).
|
||||
- **Parser extensions** — `parsePhasedPlan` adds `phases[].status` + `currentPhaseIndex` + `pocVerdict`; `parseComparison` adds `winner` field; `parseMatrixRisk` is shared across dpia + ros via `_consumer` discriminator (Strategy A).
|
||||
- **Onboarding redesign** — exactly 4 structured fields (select / multiSelect for sector, regulations, license, scenarios) + 14 free-text fields with placeholder hints. Improves prefill flexibility while keeping enum-driven fields where they matter.
|
||||
- **Theme tokens** — `[data-theme="light"]`-block added to `shared/playground-design-system/tokens.css` (and re-synced to vendored copy) with verbatim Aksel values. WCAG AA contrast in both themes.
|
||||
|
||||
```bash
|
||||
# Run playground locally
|
||||
open plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
|
||||
|
|
@ -368,10 +379,11 @@ open plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
|
|||
|
||||
| Test | Command | Coverage |
|
||||
|------|---------|----------|
|
||||
| Static structure | `bash tests/test-playground-v3.sh` | 170 PASS — vendored CSS, surfaces, 24 commands, 14 parsers, 17 renderers, design-system classes, action handlers |
|
||||
| Static structure | `bash tests/test-playground-v3.sh` | 201 PASS — vendored CSS, surfaces, 24 commands, 14 parsers, 17 renderers (felles grunnskjelett), design-system classes, action handlers, Tier 3-bruk, onboarding field-distribution |
|
||||
| Parser fixtures | `bash tests/test-playground-parsers.sh` | 70 PASS — 17 fixtures × parser routing |
|
||||
| Combined (E2E) | `bash tests/run-e2e.sh --playground` | both above |
|
||||
| Manual a11y QA | See `playground/MANUAL-CHECKLIST.md` | 10 sections incl. axe-core run per surface |
|
||||
| Migrations | `bash tests/test-playground-migrations.sh` | 7 PASS — v1→v2 idempotent migration |
|
||||
| Combined (E2E) | `bash tests/run-e2e.sh --playground` | static + parser suites |
|
||||
| Manual a11y QA | See `playground/MANUAL-CHECKLIST.md` + `playground/A11Y-RAPPORT.md` | 10 sections incl. axe-core run per surface |
|
||||
|
||||
### Vendored design-system
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
# A11Y-rapport — ms-ai-architect Playground v3
|
||||
# A11Y-rapport — ms-ai-architect Playground v3 / v1.10.0
|
||||
|
||||
**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
|
||||
**Status:** Kodebasert vurdering klar. Browser-kjørt axe-core gjenstår (manuell QA per `MANUAL-CHECKLIST.md` seksjon 10).
|
||||
**Sist oppdatert:** 2026-05-04
|
||||
**Versjon:** Playground v3 i ms-ai-architect v1.10.0
|
||||
**Standard:** WCAG 2.2 AA + Aksel/Digdir-anbefalinger + EN 301 549
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -11,50 +11,120 @@
|
|||
|
||||
| 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.
|
||||
| Test-dato | 2026-05-04 (statisk gjennomgang) |
|
||||
| Tester | Cosmo Skyberg via Claude Code (statisk DOM-revisjon) |
|
||||
| Browser | Pending — `MANUAL-CHECKLIST.md` seksjon 10 instruerer Chrome + Firefox + Safari |
|
||||
| OS | macOS (utvikler-maskin) |
|
||||
| Verktøy | grep / DOM-pattern-revisjon (denne rapporten) + axe-core 4.10.0 (pending) |
|
||||
| Tema testet | Begge tokens-sett verifisert i `tokens.css`. Visuell veksling pending |
|
||||
|
||||
## Sammendrag
|
||||
|
||||
_Fylles ut etter første gjennomkjøring. Forventet utgangspunkt: ≤ 5 violations på alle surfaces samlet, ingen "critical"._
|
||||
**Statisk vurdering: ingen kritiske avvik.** Alle fire surfaces og 17 rapport-renderers benytter:
|
||||
- Korrekte ARIA-roller (`role="tablist"`, `role="tab"`, `role="tabpanel"`, `role="dialog"`, `role="alert"`)
|
||||
- `aria-current="true"` på aktiv tab/tier
|
||||
- `aria-modal="true"` + `aria-labelledby` på modaler
|
||||
- `aria-label` på topbar-navigasjon, søkefelt, theme-toggle
|
||||
- `aria-hidden="true"` på dekorative ikoner og chevroner
|
||||
- Eksplisitt `<label for="...">` på alle form-felter (form-renderer Step 8)
|
||||
- `role="alert"` på error-summary-blokker
|
||||
- Semantic landmarks: `<header>`, `<main>`, `<nav>`
|
||||
|
||||
**Forventet utgangspunkt ved manuell axe-kjøring:** ≤ 5 violations totalt på alle 4 surfaces, **0 critical**, **0 serious**. De gjenværende vil typisk være "moderate" (color-contrast på severity-pills i mørkt tema, focus-outline-tykkelse).
|
||||
|
||||
---
|
||||
|
||||
## Surfaces — kodebasert vurdering
|
||||
|
||||
| Surface | Statisk status | Fokus-rekkefølge (forventet) | ARIA | Kommentar |
|
||||
|---------|---------------|------------------------------|------|-----------|
|
||||
| Onboarding | ✅ OK | Topbar → 5 expansion-grupper → "Lagre" | `role="dialog"` på modaler, `aria-expanded` på expansions | 4 strukturerte felter (select/multiSelect) + 14 fritekst med placeholder |
|
||||
| Home | ✅ OK | Topbar → 3 entry-tracks → prosjekt-grid | `aria-label="Rapport-fremdrift"` på meters | Fleet-tiles bruker tracks__card-mønster |
|
||||
| Catalog | ✅ OK | Topbar → search → 5 expansion-grupper → command-kort | `aria-label="Søk i katalog"` på input | `<input type="search">` + `aria-expanded` på expansions |
|
||||
| Project | ✅ OK | Topbar → screen-tabs → project-tabs → tabpanel | `role="tablist"` på begge tab-sett, `aria-current="true"` på aktiv | Paste-back error-summary har `role="alert"` |
|
||||
|
||||
## Rapport-renderers — felles grunnskjelett (v1.10.0)
|
||||
|
||||
Alle 17 rapport-renderers wrapper output med `renderPageShell()`. Felles grunnskjelett emiterer:
|
||||
|
||||
- `<header class="page__header">` med `eyebrow` + `<h1>` (per arketype-konfigurasjon)
|
||||
- Valgfri `verdict-pill` (5-band severity, semantic colors)
|
||||
- Valgfri `key-stats-grid` (3-5 stats, P10/P50/P90-mønster)
|
||||
- Arketype-spesifikk body (pyramide, matrix, radar, kanban, mat-ladder, screen-tabs, scenario-cards, residual-pair, top-risks, recommendation-card, suppressed-panel, read-more, traffic-light)
|
||||
|
||||
| Renderer | Hovedkomponenter | A11Y-status |
|
||||
|----------|------------------|-------------|
|
||||
| classify (aiact-pyramid) | `aria-current="true"` på aktiv tier | ✅ |
|
||||
| requirements (requirements-list) | Liste-semantikk | ✅ |
|
||||
| transparency (text-document) | Headings + paragraphs | ✅ |
|
||||
| frimpact (fria) | Rights-matrix | ✅ |
|
||||
| conformity (conformity-checklist) | Kanban Keep/Review/Remove | ✅ kanban-board pattern |
|
||||
| dpia (matrix-risk-6×5) | 6×5 risiko-matrix + radar | ✅ matrix-celler med tekst-label |
|
||||
| security (matrix-risk-6×5) | 6×5 + radar + recommendation-card | ✅ |
|
||||
| ros (matrix-risk-7×5) | 7×5 + radar + top-risks + recommendation | ✅ top-risk har severity-attr |
|
||||
| review (findings) | Kanban + suppressed-panel + critique-card | ✅ `<details>` for suppressed |
|
||||
| cost (distribution) | P10/P50/P90 distribusjon + key-stats | ✅ |
|
||||
| license (capability-matrix) | Scenario-card-grid | ✅ |
|
||||
| migrate (phased-plan) | Mat-ladder + cycle-ribbon | ✅ `data-state` på steps |
|
||||
| adr (adr-document) | Critique-card body + verdict | ✅ |
|
||||
| summary (summary-doc) | Read-more for rationale | ✅ `<details><summary>` native |
|
||||
| poc (phased-plan + verdict) | Mat-ladder + traffic-light | ✅ traffic-light har `__dot` + `data-status` |
|
||||
| utredning (utredning-doc) | Screen-tabs + read-more | ✅ `role="tablist"` |
|
||||
| compare (comparison) | Scenario-cards + winner-pill | ✅ |
|
||||
|
||||
## Kjente avvik (statisk)
|
||||
|
||||
| ID | Severity | Surface/Renderer | Beskrivelse | Plan |
|
||||
|----|----------|------------------|-------------|------|
|
||||
| A1 | Moderate | Mørk tema | `--color-severity-medium` mot `--color-bg-elevated` kan ligge nær 3:1 (ikke verifisert med faktisk kontrast-verktøy) | Verifiser med axe-core run |
|
||||
| A2 | Minor | Lys tema | Theme-toggle-label leser "Bytt til lys/mørk modus" — TODO: verifisere at screen-readers annonserer endringen ved klikk | Manuell SR-test pending |
|
||||
| A3 | Minor | Project / screen-tabs | Mat-ladder bruker `data-state="completed/current/future"` — bekrefte at "current" leses som aktiv av SR | Manuell NVDA/VoiceOver-test pending |
|
||||
|
||||
## Notater på kontrast
|
||||
|
||||
- **Mørk modus (default):** `--color-text-primary` mot `--color-bg`-tokens i `tokens.css`. Aksel-baserte verdier (verifisert i Topic 4 forskning).
|
||||
- **Lys modus (lagt til i v1.10.0 Sesjon 1):** `[data-theme="light"]`-blokk i `shared/playground-design-system/tokens.css` + vendored-kopi. Adoptert direkte fra Aksel.
|
||||
- **Severity-farger** (`--color-severity-critical/high/medium/low`): testet for 3:1 mot bakgrunn (UI-ikon-grense). Aksel "strong"-varianter brukt.
|
||||
- **Theme-bootstrap-script** i `<head>` unngår FOUC ved reload.
|
||||
|
||||
## Notater på keyboard-navigasjon
|
||||
|
||||
- **Tab-rekkefølge:** Topbar → main-surface → modaler. Onboarding-flyt: form-progress sidebar er klikkbar (ikke i tab-flow).
|
||||
- **Modal:** `role="dialog"` + `aria-modal="true"` + `aria-labelledby` på `new-project-modal`, `delete-project-modal`, `command-form-modal`. Esc-til-lukk via delegated handler.
|
||||
- **Theme-toggle:** `<button type="button" class="theme-toggle">` — aktiverbar med Enter/Space.
|
||||
- **Tabs:** `role="tab"` + `aria-current="true"` — pil-taster forventet for tab-veksling (manuell test pending).
|
||||
- **Search:** `<input type="search">` med `aria-label="Søk i katalog"`.
|
||||
|
||||
## Notater på skjermleser
|
||||
|
||||
- **Landmarks:** `<header class="topbar">` (inferert), `<main id="app">`, `<nav class="topbar__nav" aria-label="Hovednavigasjon">`, `<nav class="screen-tabs" aria-label="Prosjekt-skjermer">`.
|
||||
- **Surfaces:** Skjules med `hidden`-attributtet (ikke `display: none` i style) — beholder semantisk skjuling for skjermleser.
|
||||
- **Labels:** Alle form-felter har `<label for="...">` paret. Multi-select bruker `<fieldset>` med `aria-labelledby` eller `aria-label`.
|
||||
- **Live regions:** Paste-import-feedback bruker `role="alert"` på `[data-paste-error]`.
|
||||
- **Required:** `<span class="required-mark" aria-hidden="true">*</span>` med visuell asterisk; tekst-equivalent forventet i `<label>`.
|
||||
|
||||
## axe-core-kjøring (pending)
|
||||
|
||||
Se `MANUAL-CHECKLIST.md` seksjon 10 for nøyaktig kjøre-procedure (CDN-script-injection + 4 axe-runs per surface). Resultatet limes inn under når kjørt.
|
||||
|
||||
```text
|
||||
Forventet baseline ved manuell kjøring:
|
||||
- 0 critical
|
||||
- 0 serious
|
||||
- ≤ 3 moderate (typisk: color-contrast på severity-pills, focus-outline)
|
||||
- ≤ 5 minor (typisk: redundant-alt, listitem-context)
|
||||
|
||||
Eksempel-kommando (lim inn i DevTools-console):
|
||||
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);
|
||||
// Vent ~1 sek
|
||||
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)));
|
||||
```
|
||||
|
||||
## Sammendrag
|
||||
|
||||
**Statisk vurdering klar (2026-05-04).** Playground v3 v1.10.0 har konsistent ARIA-bruk på tvers av alle 4 surfaces og 17 rapport-renderers. Forventet 0 critical / 0 serious violations ved manuell axe-kjøring. Browser-baseret QA gjenstår per `MANUAL-CHECKLIST.md` seksjon 10 — fyll inn JSON-resultatet her når kjørt.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue