Kjell Tore Guttormsen
b1738b419c
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>
130 lines
8.1 KiB
Markdown
130 lines
8.1 KiB
Markdown
# A11Y-rapport — ms-ai-architect Playground v3 / v1.10.0
|
||
|
||
**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
|
||
|
||
---
|
||
|
||
## Test-oppsett
|
||
|
||
| Felt | Verdi |
|
||
|------|-------|
|
||
| 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
|
||
|
||
**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.
|