mi/werkbaum
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

feat(diagram): das Knoten-Fenster löst den nativen Tooltip überall ab

Browse Source 
Das Fenster aus D52 war für Touch gebaut — damit standen zwei Darstellungen
desselben Inhalts nebeneinander, und ausgerechnet die schlechtere bekam der
Zeiger. Jetzt zeigt es überall: am Zeiger nach 350 ms beim Überfahren, bei
Tastaturfokus sofort, auf Touch unverändert beim Tipp.

Was ein `title` prinzipiell nicht kann:
- keine Absätze (die Beschreibungen im Plan brechen bei ~76 Zeichen, das sah
  ausgefranst aus),
- keine Linie (der Trennstrich war aus 24 `─` GEMALT, D40-Nachtrag),
- nichts bei Tastaturfokus — wer mit Tab durch das Diagramm geht, sah bisher
  keine Beschreibung. Nachgemessen mit ECHTEM Tastendruck: Fokus von
  #not.line auf #not.status, Fenster folgt, 10 px unter dem Knoten, Ring am
  fokussierten Knoten.

- Inhalt zieht von `title` nach `data-tip` (sonst zeigte der Browser seinen
  eigenen zusätzlich) — dasselbe Attribut unter anderem Namen, keine
  Verdopplung der 20 kB DOM-Text.
- Die letzten drei nativen Tooltips IN Knoten mussten weichen: Das
  Warndreieck war redundant (Statusname steht in den Fakten), die Annahme
  „Größe fehlt, gilt als M" wandert in die Faktenzeile. Nachgemessen: 0 von
  161 Knoten und 0 Kinder tragen noch einen `title`.
- Absicht-Erkennung: 350 ms Verzögerung, beim Wechsel zwischen Knoten ohne
  Warten, 120 ms Nachfrist beim Verlassen (der Weg ins Fenster führt über
  einen Zwischenraum).
- `aria-hidden` am Fenster: Der Inhalt steht schon im aria-label, sonst würde
  er doppelt vorgelesen; × und ↗ deshalb `tabindex="-1"`.

Werkzeuggrenze notiert: `element.focus()` feuert ohne Fensterfokus keine
Fokus-Ereignisse (`document.hasFocus()` false) — der erste Prüflauf zeigte
fälschlich „öffnet nichts".

SPEC §9 + D57; Plan: #ed.tipwindow [x] (161 Knoten, 0 Warnungen).
293 Tests grün, 5 Snapshots/Zusicherungen auf `data-tip` nachgezogen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
mhoennig
2026-08-24 12:07:00 +02:00
co-authored by Claude Opus 5
parent f0fe877d45
commit 3fbc772d81
12 changed files with 176 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+7 -2
View File
@@ -256,8 +256,13 @@
Es liegt auf <body> und ist `position:fixed` — in `#out` hinein würde es
dessen CSS-`zoom` erben (der Text skalierte mit) und von dessen `overflow`
beschnitten (die Falle aus D50). Inhalt wird bei jedem Öffnen ersetzt. -->
<div id="nodeTip" class="nodetip" role="dialog" aria-modal="false" hidden>
<button type="button" class="nodetip-x" id="nodeTipClose" data-i18n-title="tipClose" data-i18n-aria="tipClose" title="Schließen" aria-label="Schließen">×</button>
<!-- `aria-hidden`: Das Fenster ist eine rein visuelle Hilfe — sein ganzer Inhalt
steht bereits im `aria-label` des Knotens (SPEC §9), ein Screenreader läse
ihn sonst doppelt. Die Knöpfe darin tragen deshalb `tabindex="-1"`
(fokussierbare Elemente in einem `aria-hidden`-Bereich wären ein Fehler);
erreichbar bleibt beides über den Knoten selbst und über Esc. Siehe D57. -->
<div id="nodeTip" class="nodetip" aria-hidden="true" hidden>
<button type="button" class="nodetip-x" id="nodeTipClose" tabindex="-1" data-i18n-title="tipClose" title="Schließen">×</button>
<div class="nodetip-body" id="nodeTipBody"></div>
<span class="nodetip-arrow" aria-hidden="true"></span>
</div>