Kjell Tore Guttormsen
f006143fb8
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>
8.3 KiB
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-softmot--color-severity-critical-on≥4.5:1--color-severity-high-softmot--color-severity-high-on≥4.5:1--color-severity-medium-softmot--color-severity-medium-on≥4.5:1--color-severity-low-softmot--color-severity-low-on≥4.5:1--color-state-successpå 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)
- 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- 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).