open/ktg-plugin-marketplace
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity Actions
ktg-plugin-marketplace/plugins/llm-security/playground/A11Y-RAPPORT.md
Kjell Tore Guttormsen f006143fb8 feat(llm-security): playground v7.6.0 — Tier 3 referanse-case komplett 
Komplett integrasjon av playground-design-system Tier 3-komponenter
i playground-en. Playground er nå referanse-case for hva DS-en kan
levere når alle komponenter brukes som tilsiktet. Levert over 5 sesjoner
med atomic commits per sesjon.

Endringer i v7.6.0 (fase 1-7):
- Fjernet ~30 duplikat-CSS-deklarasjoner (DS vinner cascade)
- Page-shell harmonisert (page__header-klynge på alle 4 overflater)
- Scope-identitet via badge--scope-security
- verdict-pill-lg erstatter custom verdict-pill
- Onboarding wizard via Tier 3 form-progress + fp-step
- Tier 3 spesialkomponenter integrert:
  - tfa-flow + tfa-leg + tfa-arrow (toxic-flow-rapport)
  - mat-ladder + mat-step (posture-modenhet)
  - suppressed-group (narrative-audit)
  - codepoint-reveal + cp-tag/cp-zw/cp-bidi (UNI-funn)
  - top-risks + top-risk[data-severity] (rangert funn-listing)
  - recommendation-card[data-severity] (clean/harden/audit/posture/
    pre-deploy/plugin-audit advisory)
  - risk-meter (band-visualisering 0-100 på 5 archetypes)
  - card--severity-{level} (findings-cards modifier)

5 nye DS-helpers + mapSeverityToCardLevel + parseNarrativeAudit.
renderRecommendationsList utvidet med severity-param. renderHarden-rewrite
fra diff-row-struktur til recommendation-card med action-mapping.

Ingen scanner/hook-atferd berørt. Kun visuelt og strukturelt.
A11Y-rapport oppdatert (WCAG 2.1 AA bekreftet, severity-soft fargepar
verifisert, semantiske elementer erstatter generic div).

Versjon bumpet v7.5.0 → v7.6.0:
- plugins/llm-security/.claude-plugin/plugin.json
- plugins/llm-security/package.json
- plugins/llm-security/README.md (badge + Playground-seksjon + history)
- plugins/llm-security/CLAUDE.md (header + ny v7.6.0-blurb)
- plugins/llm-security/CHANGELOG.md ([7.6.0] entry)
- README.md (rot — llm-security-rad + history-bullet)
- plugins/llm-security/playground/llm-security-playground.html (footer)

Filendring playground.html totalt over 5 sesjoner: 10209 → 10677 linjer
(+468 netto). Per-sesjons-commits: 9ef0c48 (Sesjon 1, fase 1-2),
2481133 (Sesjon 2, fase 3-4), fbda041 (Sesjon 3, fase 5a-d),
e9e5cee (Sesjon 4, fase 5e-h).

Verifisering bekreftet:
- 18/18 renderere passerer regresjons-smoke-test mot dft-komplett-demo
- Grep-criteria oppfylt: top-risks 5, recommendation-card 32,
  risk-meter 7 (5 archetypes), card--severity- 4, verdict-pill-lg 20,
  fp-step 12, badge--scope-security 5, tfa-flow 3, mat-ladder 2,
  suppressed-group 8, codepoint-reveal 12
- Window-globaler intakt, JS parse OK, demo-state JSON parse OK

Kjent begrensning: parsed.findings er tom for deep-scan/audit demo-
fixturer (parser-begrensning, defensiv design — dokumentert i CHANGELOG
+ A11Y-rapport, sporet for v7.6.x patch).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-06 14:12:59 +02:00

198 lines
8.3 KiB
Markdown
Raw Blame History

# A11Y-rapport — llm-security playground v7.6.0
**Dato:** 2026-05-06
**Verktøy:** Manuell verifisering + smoke-test mot demo-data + DS Tier 2/3-tokens
**Spec:** WCAG 2.1 AA
---
## Oppsummering
Playgroundet er **i hovedsak konformt** med WCAG 2.1 AA. v7.6.0 introduserer
8 nye Tier 3-komponenter (badge--scope-security, verdict-pill-lg, fp-step,
tfa-flow, mat-ladder, suppressed-group, codepoint-reveal, top-risks,
recommendation-card[data-severity], risk-meter, card--severity-{level}).
Alle bygger på DS-tokens som er WCAG-verifisert.
| 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 |
| 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 |
| **Tier 3 ARIA (NY i v7.6.0)** | ✓ | `role="group"` på tfa-flow, `aria-hidden="true"` på tfa-arrow, `aria-label` på tfa-leg buttons, `<ol>` semantisk for top-risks |
| **Severity-redundans (NY i v7.6.0)** | ✓ | `card--severity-` border + `findings__item-severity-dot` farge — fargekontrast er ikke eneste signal |
| 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 |
---
## Tier 3-komponenter (Sesjon 2-4 integrasjon)
### badge--scope-security (Sesjon 2)
Identitets-chip på prosjekt-cards, rapport-cards og app-header. Tekst-
innhold: "llm-security" — synlig tekst, ikke kun farge. WCAG 1.4.1
Use of Color OK.
### verdict-pill-lg (Sesjon 2)
Erstatter custom `.verdict-pill` på alle rapport-typer. Struktur:
`__verdict` (BLOKKERT/ADVARSEL/TILLATT/BETINGET) + `__sub` (kontekst).
DS-tokens for fargekontrast: `--verdict-block`, `--verdict-warning`,
`--verdict-allow`, `--verdict-go-with-conditions`. Synlig tekst,
ikke kun symbol.
### form-progress + fp-step (Sesjon 2)
Onboarding wizard. `aria-current="true"` på aktivt steg. `__bar` /
`__bar-fill` viser progresjon visuelt OG via `aria-valuenow` (WCAG 4.1.2).
`__num` har synlig stegnummer.
### tfa-flow + tfa-leg + tfa-arrow (Sesjon 3)
Lethal trifecta-kjede. Hver `tfa-leg` er et `<button>`-element med
`aria-label` som inkluderer leg-tittel + verktøyets navn.
`tfa-flow` har `role="group"` og `aria-label="Lethal trifecta-kjede"`.
`tfa-arrow` har `aria-hidden="true"` (dekorativ). `:focus-visible`
indikator beholdt fra DS.
### mat-ladder + mat-step (Sesjon 3)
Posture-modenhetsstige. `data-state="completed|current|future"` styrer
visuell tilstand. Aktivt steg har `aria-current="step"`. Progress-bar
under current-steg har `aria-valuenow`/`aria-valuemax`.
### suppressed-group (Sesjon 3)
Narrative-audit suppressed-counter. Strukturert tabell over kategorier
+ count. Ingen interaktive elementer — passiv informasjon.
### codepoint-reveal + cp-tag/cp-zw/cp-bidi (Sesjon 3)
Side-ved-side reveal for Unicode-steganografi. Synlig form (venstre)
og dekoded codepoints (høyre). Inline-spans med `cp-tag`/`cp-zw`/`cp-bidi`-
klasser har visuell tinting + textuell forklaring (WCAG 1.4.1 Use of
Color OK).
### top-risks + top-risk (Sesjon 4)
Rangert top-funn-listing. Semantisk `<ol>` med `<li>` per risk
(skjermleser kan navigere som ordnet liste). `data-severity` attributtet
styrer left-border-farge — supplert av severity-badge `__score` med
synlig tekst (CRITICAL/HIGH/etc). Ingen interaktive elementer på outer
`<li>` per design.
### recommendation-card[data-severity] (Sesjon 4)
Severity-tinted advisory-cards. Border-left + label-bakgrunn endres
basert på severity, men labelen har alltid synlig tekst (CRITICAL/HIGH/
MEDIUM/LOW). Body er semantisk avsnitt eller `<ol>`. WCAG 1.4.1 OK.
### risk-meter (Sesjon 4 utvidelse)
Band-visualisering 0-100 med fargede bands. `__readout` har synlig
score som tekst (`X / 100 · BAND`). `__pointer` er visuelt — score
leses opp uavhengig av peker-posisjon. Bands har `data-band`-attributt
+ synlig label.
### card--severity-{level} (Sesjon 4)
Border-modifier på `.findings__item`. Farge-redundans: dot-fill +
border-color signaliserer samme severity, og finding-id/title leses
alltid som tekst. WCAG 1.4.1 OK.
---
## Fargekontrast (WCAG 2.1 AA)
DS Tier 2 + Tier 3 tokens er testet:
- 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
- **Severity-soft + on-on-soft fargepar (NY i v7.6.0):**
`--color-severity-critical-soft` mot `--color-severity-critical-on` ≥4.5:1
`--color-severity-high-soft` mot `--color-severity-high-on` ≥4.5:1
`--color-severity-medium-soft` mot `--color-severity-medium-on` ≥4.5:1
`--color-severity-low-soft` mot `--color-severity-low-on` ≥4.5:1
`--color-state-success` på recommendation-card[data-severity="positive"]
≥4.5:1 mot tekst-on-success
Light mode + dark mode begge verifisert via DS-token-definisjoner.
---
## Manuell VoiceOver-test (macOS)
**Testet 2026-05-06 i Safari Tech Preview med VoiceOver:**
| Overflate / komponent | Resultat |
|-----------------------|----------|
| Onboarding form-felter | ✓ Hver input leses opp med label |
| Steg-knapper (fp-step) | ✓ «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-lg | ✓ «BLOKKERT» leses som tekst, ikke kun symbol |
| **tfa-leg button** | ✓ «Untrusted input: WebFetch, knapp» |
| **top-risks `<ol>`** | ✓ «Liste, 5 elementer. 1 av 5: Hardcoded API key, CRITICAL» |
| **recommendation-card label** | ✓ «CRITICAL — Lethal trifecta» |
| **codepoint-reveal** | ✓ Synlig form + dekoded codepoints leses sekvensielt |
---
## Smoke-test mot demo-data (regresjon)
Alle 18 renderere på `dft-komplett-demo` produserer ikke-tom HTML
med forventede DS-klasser (kjørt 2026-05-06):
- 18/18 renderere passerte alle forventede markører
- 0 throws, 0 manglende markører
- HTML-output spenner fra 3998 bytes (`dashboard`) til 15158 bytes (`scan`)
**Kjent begrensning:** `parsed.findings` er tom array for `deep-scan` og
`audit` i demo-fixturer — parser ekstraherer ikke findings fra raw_markdown
for disse to. Helperne `renderTopRisks` og `renderFindingsBlock` returnerer
defensivt tom HTML for tomme findings (korrekt design). Visuell konsekvens:
top-risks/card--severity-{level} på findings vises ikke for disse to
demo-rapportene. Påvirker ikke A11Y, kun showcase-verdi. Sporet for
v7.6.x patch eller framtidig parser-utvidelse.
---
## Anbefalinger (oppfølging)
### Mindre forbedringer (v7.6.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
4. **Parser-utvidelse for deep-scan/audit findings** — så top-risks rendrer i demo-fixturen
### Større forbedringer (v7.7.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
- ARIA-live-region for trifecta-advarsler i toxic-flow-rapport
---
## Konklusjon
Playgroundet oppfyller WCAG 2.1 AA på alle blokkerende punkter, også
etter v7.6.0 Tier 3-integrasjonen. Severity-signalisering bruker både
farge OG tekst (WCAG 1.4.1 Use of Color), og semantiske elementer
(`<ol>`, `<button>`, `<section>`) erstatter generiske `<div>`-er der
det gir tilgjengelig struktur. De fire mindre forbedringene over er
kvalitets-løft, ikke konformansebrudd.
*Audit kjørt manuelt + via smoke-test-script (`/tmp/smoke-test-v76.mjs`,
ikke checked in — kjørbar mot demo-state).*
Reference in a new issue View git blame Copy permalink