mhoennigandClaude Opus 4.8
15699c321c
TASKS Phase 2. Jeder Diagramm-Knoten bekommt in render.js (nodeAria) einen sprechenden, lokalisierten aria-label: Label + Status + Aufwand (inkl. „(angenommen)" beim impliziten M) + Zuständige + Link. Die rein visuellen Badges (Größe, Tags, ↗) sind aria-hidden, damit der Screenreader nicht „M", „anna", „↗" kryptisch doppelt vorliest. Neue a11y*-i18n-Keys in allen 9 Sprachen. Alle Knoten sind fokussierbar (tabindex=0 bzw. der Link) in Dokument-/Lese- reihenfolge; sichtbarer :focus-visible-Rahmen (Petrol). #warn ist eine Live-Region (role=status, aria-live=polite) — neue Warnungen werden angesagt. Verifiziert: aria-label folgt dem Sprachwechsel (DE/EN), Badges aria-hidden, keine visuelle Regression, keine Konsolenfehler. Renderer-Snapshots aktualisiert (29 Tests grün). SPEC §9 (Barrierefreiheit) + CLAUDE ergänzt. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
3.1 KiB
3.1 KiB
Aufgaben
Abhaken beim Erledigen; neue Aufgaben unten anfügen.
Phase 1 — Modularisierung & Tests
- Projektgerüst:
src/(parser.js, model.js, render.js, app.js),tests/,index.htmlbindet Module ein; weiterhin ohne Build nutzbar (ES-Module) oder mit minimalem Setup (Vite) — Entscheidung dokumentieren. → Vite gewählt (D19):src/als ES-Module,npm run buildbündelt zu einer self-containeddist/index.html(file://-tauglich). Gerüst steht (aktuellsrc/app.js+src/style.css); Parser/Renderer werden in den folgenden Checkboxen herausgelöst. - Parser extrahieren; Verhalten exakt wie in
docs/SPEC.md§1–§8. →src/parser.jsexportiertparse,STATUS_BY_CODE,SIZE_RANK(headless, kein DOM);app.jsimportiert sie. - Unit-Tests für den Parser (Vitest): kanonisches Beispiel aus SPEC §10
als Fixture; Randfälle: gemischte Gates, Tabs/ungleichmäßige Einrückung,
URL mit
@, mehrere Wurzeln, leere Labels,%%am Zeilenanfang/-ende. →tests/parser.test.js(18 Tests). - Renderer extrahieren (HTML-String-Erzeugung), Snapshot-Tests für
Normal- und Vertikalmodus sowie „Untergliederung fehlt“.
→
src/model.js(Baum-/Kostenlogik) +src/render.js(renderTreeHtml, headless);app.jsreicht UI-State als Parameter herein.tests/render.test.js(6 Tests, Snapshots). Anm.: der Modus (horizontal/vertikal/kompakt) ist reine CSS-Container-Klasse und ändert den Renderer-String nicht — ein Snapshot deckt alle drei Modi ab. - Warnungs-Modell vereinheitlichen (Zeilennummern, Typen).
→ strukturierte Objekte
{type, line, ...}(Renderer emittiertmixedGate);src/warnings.jsformatWarning(w, t)macht daraus den lokalisierten, HTML-escapten Text an einer Stelle. Vorbereitet für Phase 2 (unknownStatus).tests/warnings.test.js.
Phase 2 — Qualität
- Barrierefreiheit: Fokusreihenfolge, aria-Labels für Status/Größe/Tags.
→ je Knoten ein sprechender
aria-label(Label+Status+Aufwand+Zuständige+ Link, lokalisiert, neuea11y*-Keys in allen 9 Sprachen); visuelle Badgesaria-hidden; Knotentabindex="0"(Fokus = Lesereihenfolge) mit:focus-visible-Rahmen;#warnals Live-Region (role=status,aria-live=polite). Snapshots aktualisiert. - Druck-Stylesheet (Diagramm ohne Editor-Panel).
- Fehlertolerantes Parsen weiter ausbauen (unbekannte Statuszeichen melden).
Deployment
- GitHub-Pages-Workflow angelegt (
.github/workflows/pages.yml, siehe docs/DECISIONS.md D16).
Phase 3 — Integrationen (siehe docs/ROADMAP.md)
- Backend-Gerüst per Spring Initializr in
backend/anlegen (Kotlin, Gradle Kotlin DSL, JDK 21; Konventionen: backend/CLAUDE.md). - SVG-Renderer (Layout-Engine) als gemeinsame Basis für Export und Mermaid-Plugin.
- Mermaid-Plugin-Spike: Detektor + Registrierung, ein Minimalbaum.
- Taiga-Spike:
#ref-Syntax parsen, Status via REST-API auflösen (read-only), Mapping konfigurierbar.