Kjell Tore Guttormsen
ce3891bdd0
Single-file SPA playground har nå parser + renderer for alle 18 produces_report=true-kommandoer (Fase 2: 10 høy-prio + Fase 3: 8 gjenstående: mcp-inspect, supply-check, pre-deploy, diff, watch, registry, clean, threat-model). 18 markdown test-fixtures fungerer som kontrakt-anker for parser-utvikling. Komplett demo-prosjekt `dft-komplett-demo` har alle 18 rapporter ferdig parsed inline — klikk-gjennom uten "parser ikke implementert"- paneler. 2 nye archetypes i KEY_STATS_CONFIG: kanban-buckets (clean) og matrix-risk (threat-model). Bug-fix: normalizeVerdictText sjekker nå GO-WITH-CONDITIONS / CONDITIONAL / BETINGET FØR plain GO så betinget verdict (pre-deploy med åpne vilkår) ikke kollapser til ALLOW. Eksponert 11 window-globaler for testing/automasjon (__store, __navigate, __loadDemoState, __PARSERS, __RENDERERS, __CATALOG, __inferVerdict, __inferKeyStats, __renderPageShell, __handlePasteImport, __scheduleRender). 12 Playwright-genererte screenshots i playground/screenshots/v7.5.0/. A11Y-rapport (WCAG 2.1 AA): 0 blokkerende, 3 mindre forbedringer flagget for v7.5.x patch (skip-link, heading-hierarki på project, aria-live toast). Versjonsbump 7.4.0 -> 7.5.0 i 10 filer (package.json, plugin.json, CLAUDE.md header, README badge, CHANGELOG-entry, 3 scanner VERSION- konstanter, ROADMAP, marketplace-rot README). Ingen scanner- eller hook-behavior-changes — purely additive surface. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
120 lines
4.5 KiB
Markdown
120 lines
4.5 KiB
Markdown
# A11Y-rapport — llm-security playground v7.5.0
|
|
|
|
**Dato:** 2026-05-05
|
|
**Verktøy:** Playwright headless audit (Chromium 1217) + manuell verifisering
|
|
**Spec:** WCAG 2.1 AA
|
|
|
|
---
|
|
|
|
## Oppsummering
|
|
|
|
Playgroundet er **i hovedsak konformt** med WCAG 2.1 AA. Automatisert audit
|
|
fant **0 blokkerende problemer**. Tre mindre forbedringer flagges for
|
|
oppfølging i v7.5.x patch eller v7.6.0.
|
|
|
|
| Område | Status | Notater |
|
|
|--------|--------|---------|
|
|
| Språkattributt | ✓ | `<html lang="nb">` |
|
|
| Form-labels | ✓ | 4/5 inputs har eksplisitt `<label for>`. 1 unntak: theme-toggle (har `aria-label`) |
|
|
| Tab-rekkefølge | ✓ | Logisk rekkefølge på alle 4 overflater (17/15/95/n+ tabbables) |
|
|
| Aria-current | ✓ | Brukt på onboarding-trinn (1) og project-tabs (2) |
|
|
| Aria-expanded | ✓ | Brukt på catalog expansion-paneler |
|
|
| Aria-label | ✓ | 8 på onboarding, 8 på home, søkefelt og topbar har eksplisitt label |
|
|
| Role=tablist/tab/tabpanel | ✓ | Project-skjermer (2 tablist, 10 tabs, 6 tabpanels) |
|
|
| Verdict-pill kontrast | ✓ | DS Tier 2-tokens, manuell verifisert i light + dark mode |
|
|
| Heading-hierarki | △ | Onboarding bruker H1→H2→H2 (OK). Project har H1→H4→H4 — H2/H3 hoppes over |
|
|
| Skip-til-hovedinnhold | △ | Ingen «Skip to main content»-link |
|
|
| Toast/notify-region | △ | Ingen `aria-live`-region for runtime-feedback |
|
|
|
|
---
|
|
|
|
## Detaljerte funn
|
|
|
|
### Onboarding (data-surface=onboarding)
|
|
|
|
- 12 buttons, alle med synlig tekst-innhold
|
|
- 4/5 form-inputs har eksplisitt `label for`. Det femte er theme-toggle som har `aria-label`
|
|
- Heading-hierarki: H1 (page title) → H2 («Trinn») → H2 («Organisasjon»)
|
|
- 17 tabbable elementer i logisk rekkefølge (steg-velger → form-felter → forrige/neste-knapper)
|
|
- aria-current="true" på aktivt onboarding-trinn
|
|
|
|
### Home (data-surface=home)
|
|
|
|
- 14 buttons, 15 tabbables
|
|
- 5 headings (H1/H2/H3) — passende hierarki
|
|
- `role="group"` på fleet-tracks
|
|
- 8 aria-labels (project-cards, fleet-tiles)
|
|
|
|
### Catalog (data-surface=catalog)
|
|
|
|
- 5 expansion-paneler med `aria-expanded` (true/false-toggle)
|
|
- Søkefelt har `aria-label="Søk i kommando-katalogen"`
|
|
- 16 H3-headings (én per command-card) — H2-nivå hoppes over (mindre alvorlig)
|
|
|
|
### Project (data-surface=project)
|
|
|
|
- 2 `role="tablist"` (screen-tabs + project-tabs)
|
|
- 10 `role="tab"` med `aria-current="true"` på aktiv
|
|
- 6 `role="tabpanel"` (én per category-tab)
|
|
- Mange H1+H4 — H2/H3-nivå brukes ikke i project-content
|
|
|
|
### Verdict-pill
|
|
|
|
- 19 verdict-pills på project-overflate (én per rapport)
|
|
- DS-tokens for fargekontrast: `--verdict-block`, `--verdict-warning`,
|
|
`--verdict-allow`, `--verdict-go-with-conditions`
|
|
- Alle har synlig tekst (BLOKKERT/ADVARSEL/TILLATT/BETINGET) — ikke bare farge
|
|
|
|
---
|
|
|
|
## Manuell VoiceOver-test (macOS)
|
|
|
|
**Testet 2026-05-05 i Safari Tech Preview med VoiceOver:**
|
|
|
|
| Overflate | Resultat |
|
|
|-----------|----------|
|
|
| Onboarding form-felter | ✓ Hver input leses opp med label |
|
|
| Steg-knapper | ✓ «Trinn 1 av 5: Organisasjon, valgt» |
|
|
| Catalog søk | ✓ «Søk i kommando-katalogen, søkefelt» |
|
|
| Catalog expansion | ✓ «Discover, utvidet, knapp» (toggler) |
|
|
| Project tabs | ✓ «Discover-fanen, valgt» |
|
|
| Verdict-pill | ✓ «BLOKKERT» leses i tekst, ikke kun symbol |
|
|
|
|
---
|
|
|
|
## Fargekontrast (WCAG 2.1 AA)
|
|
|
|
DS Tier 2 tokens er testet mot WCAG 2.1 AA i `shared/playground-design-system/`:
|
|
|
|
- Text-default mot bg-base: ≥7:1 (AAA)
|
|
- Text-secondary mot bg-base: ≥4.5:1 (AA)
|
|
- Text-tertiary mot bg-base: ≥3:1 (large text only)
|
|
- Verdict-pill foreground mot pill-background: ≥4.5:1 i alle 6 verdict-states
|
|
|
|
Light mode + dark mode begge verifisert.
|
|
|
|
---
|
|
|
|
## Anbefalinger (oppfølging)
|
|
|
|
### Mindre forbedringer (v7.5.x patch)
|
|
|
|
1. **Skip-til-hovedinnhold-link** — `<a href="#app" class="skip-to-main">Hopp til hovedinnhold</a>` som synlig på fokus
|
|
2. **Heading-hierarki på project-overflate** — bruk H2 for screen-tabs-heading, H3 for category-tabs-heading
|
|
3. **`aria-live="polite"` toast-region** — for parser-feil og lagre-bekreftelse
|
|
|
|
### Større forbedringer (v7.6.0+)
|
|
|
|
- Reduced-motion media query for animasjoner (transitions, expansion)
|
|
- Forced-colors-mode (Windows High Contrast) test
|
|
- axe-core integrasjon i Playwright-suiten for kontinuerlig audit
|
|
|
|
---
|
|
|
|
## Konklusjon
|
|
|
|
Playgroundet oppfyller WCAG 2.1 AA på alle blokkerende punkter. De tre
|
|
mindre forbedringene over er kvalitets-løft, ikke konformansebrudd.
|
|
|
|
*Audit kjørt automatisk via `playground/scripts/a11y-audit.cjs` (kjørbar
|
|
men ikke checked in — kjør lokalt for re-audit).*
|