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>
8 lines
9.0 KiB
Plaintext
8 lines
9.0 KiB
Plaintext
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
|
|
exports[`renderTreeHtml — kanonisches Beispiel > Grundzustand (Pfad aus, verworfene aus): Struktur-Snapshot 1`] = `"<li class="has-and"><a class="node root-node st-arbeit" href="https://wiki.example.de/relaunch" target="_blank" rel="noopener" aria-label="Website-Relaunch, a11yStatus, a11ySize, a11yLink" title="st_arbeit">Website-Relaunch<span class="ext" aria-hidden="true">↗</span><span class="size" aria-hidden="true">XL</span></a><ul class="and"><li class="has-and"><div class="node st-fertig" tabindex="0" aria-label="Konzeption, a11yStatus, a11ySize" title="st_fertig">Konzeption<span class="size" aria-hidden="true">M</span></div><ul class="and"><li><div class="node st-fertig" tabindex="0" aria-label="Zielgruppenanalyse, a11yStatus, a11ySize" title="st_fertig">Zielgruppenanalyse<span class="size" aria-hidden="true">S</span></div></li><li><div class="node st-fertig" tabindex="0" aria-label="Sitemap, a11yStatus, a11ySize" title="st_fertig">Sitemap<span class="size" aria-hidden="true">XS</span></div></li></ul></li><li class="has-and"><div class="node st-arbeit" tabindex="0" aria-label="Umsetzung, a11yStatus, a11ySize" title="st_arbeit">Umsetzung<span class="size" aria-hidden="true">XL</span></div><ul class="and"><li><a class="node st-durchstich" href="https://git.example.de/frontend" target="_blank" rel="noopener" aria-label="Frontend, a11yStatus, a11ySize, a11yTags, a11yLink" title="st_durchstich">Frontend<span class="ext" aria-hidden="true">↗</span><span class="size" aria-hidden="true">S</span><span class="tags" aria-hidden="true"><span class="tag">anna</span></span></a></li><li><div class="node st-geplant" tabindex="0" aria-label="Backend, a11yStatus, a11ySize, a11yTags" title="st_geplant">Backend<span class="size" aria-hidden="true">L</span><span class="tags" aria-hidden="true"><span class="tag">ben</span><span class="tag">carla</span></span></div><div class="ghost-node" aria-label="ghostTooltip" title="ghostTooltip">ghost</div></li><li class="has-or"><div class="node st-geplant" tabindex="0" aria-label="CMS-Anbindung, a11yStatus, a11ySize" title="st_geplant">CMS-Anbindung<span class="size" aria-hidden="true">M</span></div><ul class="or"><li><div class="node st-geplant" tabindex="0" aria-label="WordPress, a11yStatus" title="st_geplant">WordPress</div></li><li><div class="node st-idee" tabindex="0" aria-label="Headless CMS, a11yStatus" title="st_idee">Headless CMS</div></li></ul></li></ul></li><li class="has-or"><div class="node st-idee" tabindex="0" aria-label="Hosting, a11yStatus, a11ySize" title="st_idee">Hosting<span class="size" aria-hidden="true">M</span></div><ul class="or"><li><div class="node" tabindex="0" aria-label="Cloud">Cloud</div></li><li><div class="node" tabindex="0" aria-label="On-Premise">On-Premise</div></li></ul></li></ul></li>"`;
|
|
|
|
exports[`renderTreeHtml — kanonisches Beispiel > günstigster Pfad an: cheap/cheap-leaf + implizite M-Badges 1`] = `"<li class="has-and"><a class="node root-node cheap st-arbeit" href="https://wiki.example.de/relaunch" target="_blank" rel="noopener" aria-label="Website-Relaunch, a11yStatus, a11ySize, a11yLink" title="st_arbeit">Website-Relaunch<span class="ext" aria-hidden="true">↗</span><span class="size" aria-hidden="true">XL</span></a><ul class="and"><li class="has-and"><div class="node cheap st-fertig" tabindex="0" aria-label="Konzeption, a11yStatus, a11ySize" title="st_fertig">Konzeption<span class="size" aria-hidden="true">M</span></div><ul class="and"><li><div class="node cheap cheap-leaf st-fertig" tabindex="0" aria-label="Zielgruppenanalyse, a11yStatus, a11ySize" title="st_fertig">Zielgruppenanalyse<span class="size" aria-hidden="true">S</span></div></li><li><div class="node cheap cheap-leaf st-fertig" tabindex="0" aria-label="Sitemap, a11yStatus, a11ySize" title="st_fertig">Sitemap<span class="size" aria-hidden="true">XS</span></div></li></ul></li><li class="has-and"><div class="node cheap st-arbeit" tabindex="0" aria-label="Umsetzung, a11yStatus, a11ySize" title="st_arbeit">Umsetzung<span class="size" aria-hidden="true">XL</span></div><ul class="and"><li><a class="node cheap cheap-leaf st-durchstich" href="https://git.example.de/frontend" target="_blank" rel="noopener" aria-label="Frontend, a11yStatus, a11ySize, a11yTags, a11yLink" title="st_durchstich">Frontend<span class="ext" aria-hidden="true">↗</span><span class="size" aria-hidden="true">S</span><span class="tags" aria-hidden="true"><span class="tag">anna</span></span></a></li><li><div class="node cheap cheap-leaf st-geplant" tabindex="0" aria-label="Backend, a11yStatus, a11ySize, a11yTags" title="st_geplant">Backend<span class="size" aria-hidden="true">L</span><span class="tags" aria-hidden="true"><span class="tag">ben</span><span class="tag">carla</span></span></div><div class="ghost-node" aria-label="ghostTooltip" title="ghostTooltip">ghost</div></li><li class="has-or"><div class="node cheap st-geplant" tabindex="0" aria-label="CMS-Anbindung, a11yStatus, a11ySize" title="st_geplant">CMS-Anbindung<span class="size" aria-hidden="true">M</span></div><ul class="or"><li><div class="node cheap cheap-leaf st-geplant" tabindex="0" aria-label="WordPress, a11yStatus, a11ySizeImplicit" title="st_geplant">WordPress<span class="size implicit" aria-hidden="true" title="implicitSizeTooltip">M</span></div></li><li><div class="node st-idee" tabindex="0" aria-label="Headless CMS, a11yStatus, a11ySizeImplicit" title="st_idee">Headless CMS<span class="size implicit" aria-hidden="true" title="implicitSizeTooltip">M</span></div></li></ul></li></ul></li><li class="has-or"><div class="node cheap st-idee" tabindex="0" aria-label="Hosting, a11yStatus, a11ySize" title="st_idee">Hosting<span class="size" aria-hidden="true">M</span></div><ul class="or"><li><div class="node cheap cheap-leaf" tabindex="0" aria-label="Cloud, a11ySizeImplicit">Cloud<span class="size implicit" aria-hidden="true" title="implicitSizeTooltip">M</span></div></li><li><div class="node" tabindex="0" aria-label="On-Premise, a11ySizeImplicit">On-Premise<span class="size implicit" aria-hidden="true" title="implicitSizeTooltip">M</span></div></li></ul></li></ul></li>"`;
|
|
|
|
exports[`renderTreeHtml — kanonisches Beispiel > verworfene einblenden: Eigenentwicklung erscheint (durchgestrichen) 1`] = `"<li class="has-and"><a class="node root-node st-arbeit" href="https://wiki.example.de/relaunch" target="_blank" rel="noopener" aria-label="Website-Relaunch, a11yStatus, a11ySize, a11yLink" title="st_arbeit">Website-Relaunch<span class="ext" aria-hidden="true">↗</span><span class="size" aria-hidden="true">XL</span></a><ul class="and"><li class="has-and"><div class="node st-fertig" tabindex="0" aria-label="Konzeption, a11yStatus, a11ySize" title="st_fertig">Konzeption<span class="size" aria-hidden="true">M</span></div><ul class="and"><li><div class="node st-fertig" tabindex="0" aria-label="Zielgruppenanalyse, a11yStatus, a11ySize" title="st_fertig">Zielgruppenanalyse<span class="size" aria-hidden="true">S</span></div></li><li><div class="node st-fertig" tabindex="0" aria-label="Sitemap, a11yStatus, a11ySize" title="st_fertig">Sitemap<span class="size" aria-hidden="true">XS</span></div></li></ul></li><li class="has-and"><div class="node st-arbeit" tabindex="0" aria-label="Umsetzung, a11yStatus, a11ySize" title="st_arbeit">Umsetzung<span class="size" aria-hidden="true">XL</span></div><ul class="and"><li><a class="node st-durchstich" href="https://git.example.de/frontend" target="_blank" rel="noopener" aria-label="Frontend, a11yStatus, a11ySize, a11yTags, a11yLink" title="st_durchstich">Frontend<span class="ext" aria-hidden="true">↗</span><span class="size" aria-hidden="true">S</span><span class="tags" aria-hidden="true"><span class="tag">anna</span></span></a></li><li><div class="node st-geplant" tabindex="0" aria-label="Backend, a11yStatus, a11ySize, a11yTags" title="st_geplant">Backend<span class="size" aria-hidden="true">L</span><span class="tags" aria-hidden="true"><span class="tag">ben</span><span class="tag">carla</span></span></div><div class="ghost-node" aria-label="ghostTooltip" title="ghostTooltip">ghost</div></li><li class="has-or"><div class="node st-geplant" tabindex="0" aria-label="CMS-Anbindung, a11yStatus, a11ySize" title="st_geplant">CMS-Anbindung<span class="size" aria-hidden="true">M</span></div><ul class="or"><li><div class="node st-geplant" tabindex="0" aria-label="WordPress, a11yStatus" title="st_geplant">WordPress</div></li><li><div class="node st-idee" tabindex="0" aria-label="Headless CMS, a11yStatus" title="st_idee">Headless CMS</div></li><li><div class="node st-verworfen" tabindex="0" aria-label="Eigenentwicklung, a11yStatus" title="st_verworfen">Eigenentwicklung</div></li></ul></li></ul></li><li class="has-or"><div class="node st-idee" tabindex="0" aria-label="Hosting, a11yStatus, a11ySize" title="st_idee">Hosting<span class="size" aria-hidden="true">M</span></div><ul class="or"><li><div class="node" tabindex="0" aria-label="Cloud">Cloud</div></li><li><div class="node" tabindex="0" aria-label="On-Premise">On-Premise</div></li></ul></li></ul></li>"`;
|