Backlog · MZP-172 · Status REVIEW · Epic moonshots-2026-10

Graph-Baum und Strukturnavigation — Abnahme

Jede Diagrammseite mit Knoten trägt jetzt neben dem SVG einen unsichtbaren <ul role="tree">. Mit der Tastatur geht man den Graphen durch, und der fokussierte Knoten, die Kante oder die Zone leuchtet im Bild auf. Charts ohne Knoten bekommen stattdessen einen Ein-Satz-Überblick. Produktion ist auf dem Stand von Commit 4a28e8e.

Testdiagramme

Statisch (architecture)

7 Knoten, 7 Kanten, 2 Zonen, ein Knoten außerhalb jeder Zone, zwei Parallelkanten nginx → Publisher ohne id, Sonderzeichen & " <> in Labels.

Interaktiver Viewer (flowchart, dark)

meta.interactive mit zwei Kapiteln, ein Zyklus Review ↔ Nacharbeit. Pfeile im Baum dürfen das Kapitel nicht wechseln.

Chart ohne Knoten (pie)

Erwartet: kein Baum, nur der Satz „Eine strukturierte Fassung gibt es für diesen Typ noch nicht.“

Tastenbelegung

Taste	Wirkung
`Tab`	fokussiert den Baum (Wurzel bzw. zuletzt aktiver Eintrag)
`↓` `↑`	nächster / vorheriger Geschwister-Eintrag
`→` `Enter`	erstes Kind. Auf einer Kante: zum Knoten am anderen Ende
`←`	eine Ebene hoch (Kante → Knoten → Zone → Wurzel)
`Home` `End`	erster / letzter Geschwister-Eintrag
Buchstabe	Type-ahead: nächster Knoten, dessen Label so beginnt

Bewusste Abweichungen vom Ticket-Wortlaut: „Pfeil hoch → Zone“ ist hier ←, und „F sucht“ ist Type-ahead mit jedem Buchstaben. Beides ist das Standardverhalten eines ARIA-Trees, das Screenreader so ansagen. Der Fokus wird über die CSS-Klasse dd-a11y-fokus markiert, nicht über dv:mark, weil dv:mark den Rest des Graphen abdunkelt. Die Datenattribute heißen data-a11y-kind/-ref/-target statt data-node/data-edge/data-zone.

Automatisch geprüft (Produktion, 2026-10-10)

Prüfung	Ergebnis
axe-core WCAG 2.2 AA (E9), alle drei Seiten	A11Y_CLEAN
Browser-Render (Konsole, Ausnahmen, Ressourcen)	RENDER_CLEAN auf allen drei
Baum vollständig (statisch)	26 Einträge: Wurzel, 2 Zonen, 7 Knoten, 16 Kanten-Einträge (ausgehend + eingehend); Parallelkanten als `nginx__app` / `nginx__app__2` getrennt
Export: `diagram.svg` ohne Baum	0 Treffer für `role="tree"`/`dd-a11y` in allen drei SVGs
Chart: Ein-Satz-Überblick statt Baum	vorhanden, 0 treeitems
Escaping von Sonderzeichen	`nginx & Basic-Auth`, `Publisher "MZP"` korrekt im Attribut

Von Hand abzunehmen

Statisch: Tab landet im Baum, und der Fokusrahmen erscheint im Bild.
Statisch: auf der Kante „/admin“ führt → zu „Publisher "MZP"“, ← zurück zum Knoten, noch einmal ← zur Zone.
Statisch: A springt zu „Agent (MCP)“ (Knoten außerhalb jeder Zone), P wechselt zwischen „Publisher“ und „Postgres“.
Interaktiv: ←/→ im Baum wechselt nicht das Kapitel, außerhalb des Baums schon.
Interaktiv: der Zyklus Review → Nacharbeit → Review lässt sich über Kanten verfolgen, ohne hängenzubleiben.
Export: „PNG kopieren“, „PNG laden“, JPEG und WebP im interaktiven Viewer zeigen keinen Baum und keinen Fokusrahmen.
Orca-Selbsttest: das Diagramm ist vollständig erschließbar, Ansagen nennen Knoten, Kante samt Ziel und Zone.
Ratsche: „jeder Knoten jedes Graph-Typs im Baum“ ist in der Suite (DiagramAccessTreeTest / AccessTreePageTest) wirklich als Korpus-Invariante abgebildet.

Die Häkchen gelten nur für diese Ansicht und werden nicht gespeichert.

Geänderte Dateien

DiagramAccessTree, AccessTreeRenderer, access-tree.js (neu), DiagramPageRenderer, DiagramViewerAssets, dazu die Golden-Files dark/editorial/minimal und die Ratschen-Register filesize/boundaries. Plan: docs/superpowers/plans/2026-10-10-mzp-172-graph-baum.md.