ktg-plugin-marketplace/plugins/llm-security/playground/A11Y-RAPPORT.md
Kjell Tore Guttormsen ce3891bdd0 feat(llm-security): playground Fase 3 — v7.5.0 med 18 parsere/renderere
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>
2026-05-05 22:15:47 +02:00

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 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).