open/ktg-plugin-marketplace
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity Actions

feat(llm-security): playground v7.6.0 — Tier 3 referanse-case komplett

Browse source 
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>
This commit is contained in:
Kjell Tore Guttormsen 2026-05-06 14:12:59 +02:00
commit f006143fb8
9 changed files with 309 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

182
plugins/llm-security/playground/A11Y-RAPPORT.md
View file

@ -1,120 +1,198 @@
# A11Y-rapport — llm-security playground v7.5.0
# A11Y-rapport — llm-security playground v7.6.0
**Dato:** 2026-05-05
**Verktøy:** Playwright headless audit (Chromium 1217) + manuell verifisering
**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. Automatisert audit
fant **0 blokkerende problemer**. Tre mindre forbedringer flagges for
oppfølging i v7.5.x patch eller v7.6.0.
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 (17/15/95/n+ tabbables) |
| 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 |
---
## Detaljerte funn
## Tier 3-komponenter (Sesjon 2-4 integrasjon)
### Onboarding (data-surface=onboarding)
### badge--scope-security (Sesjon 2)
- 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
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.
### Home (data-surface=home)
### verdict-pill-lg (Sesjon 2)
- 14 buttons, 15 tabbables
- 5 headings (H1/H2/H3) — passende hierarki
- `role="group"` på fleet-tracks
- 8 aria-labels (project-cards, fleet-tiles)
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.
### Catalog (data-surface=catalog)
### form-progress + fp-step (Sesjon 2)
- 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)
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.
### Project (data-surface=project)
### tfa-flow + tfa-leg + tfa-arrow (Sesjon 3)
- 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
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.
### Verdict-pill
### mat-ladder + mat-step (Sesjon 3)
- 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
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)
## Manuell VoiceOver-test (macOS)
Narrative-audit suppressed-counter. Strukturert tabell over kategorier
+ count. Ingen interaktive elementer — passiv informasjon.
**Testet 2026-05-05 i Safari Tech Preview med VoiceOver:**
### codepoint-reveal + cp-tag/cp-zw/cp-bidi (Sesjon 3)
| 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 |
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 tokens er testet mot WCAG 2.1 AA i `shared/playground-design-system/`:
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.
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.5.x patch)
### 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.6.0+)
### 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. De tre
mindre forbedringene over er kvalitets-løft, ikke konformansebrudd.
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 automatisk via `playground/scripts/a11y-audit.cjs` (kjørbar
men ikke checked in — kjør lokalt for re-audit).*
*Audit kjørt manuelt + via smoke-test-script (`/tmp/smoke-test-v76.mjs`,
ikke checked in — kjørbar mot demo-state).*