feat(diagram): das Knoten-Fenster löst den nativen Tooltip überall ab
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:
co-authored by
Claude Opus 5
parent
f0fe877d45
commit
3fbc772d81
@@ -102,7 +102,7 @@ describe('Langform — ID-Blöcke hinter `---`', () => {
|
||||
describe('Darstellung — Tooltip, ”-Marke, aria', () => {
|
||||
it('stellt die Beschreibung an den Anfang des Tooltips und setzt die Marke', () => {
|
||||
const {html} = render(`[ ] Auth #auth\n " Kapselt Login.`);
|
||||
expect(html).toContain('title="Kapselt Login.\n\n' + '─'.repeat(24)
|
||||
expect(html).toContain('data-tip="Kapselt Login.\n\n' + '─'.repeat(24)
|
||||
+ '\n#auth · st_geplant · jumpHint"');
|
||||
expect(html).toContain('<span class="desc-mark" aria-hidden="true">”</span>');
|
||||
expect(html).toContain('aria-label="Auth, a11yStatus, a11yId, Kapselt Login."');
|
||||
@@ -112,7 +112,7 @@ describe('Darstellung — Tooltip, ”-Marke, aria', () => {
|
||||
der Übergang unter. Getrennt wird nur, wenn es etwas zu trennen gibt. */
|
||||
it('trennt Beschreibung und Kurz-Fakten durch Leerzeile und Strich', () => {
|
||||
const {html} = render(`[ ] Auth #auth\n " Erste Zeile.\n " Zweite Zeile.`);
|
||||
const tip = html.match(/title="([^"]*)"/)[1];
|
||||
const tip = html.match(/data-tip="([^"]*)"/)[1];
|
||||
const [text, rest] = tip.split('\n\n');
|
||||
expect(text).toBe('Erste Zeile.\nZweite Zeile.'); /* Fließtext bleibt zusammen */
|
||||
expect(rest.split('\n')[0]).toMatch(/^─+$/); /* Trennstrich als eigene Zeile */
|
||||
@@ -121,7 +121,7 @@ describe('Darstellung — Tooltip, ”-Marke, aria', () => {
|
||||
|
||||
it('setzt keinen Trennstrich, wenn es keine Beschreibung gibt', () => {
|
||||
const {html} = render(`[ ] Ohne #auth`);
|
||||
expect(html.match(/title="([^"]*)"/)[1]).not.toContain('─');
|
||||
expect(html.match(/data-tip="([^"]*)"/)[1]).not.toContain('─');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user