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>
4.5 KiB
4.5 KiB
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 hararia-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"medaria-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)
- Skip-til-hovedinnhold-link —
<a href="#app" class="skip-to-main">Hopp til hovedinnhold</a>som synlig på fokus - Heading-hierarki på project-overflate — bruk H2 for screen-tabs-heading, H3 for category-tabs-heading
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).