Workers P4 Endprüfung W3: Fokus bleibt nach Pult-Aktionen erhalten statt auf <body> zu fallen

Jede Aktion sperrt die Knöpfe der Zeile; Chromium nimmt einem gesperrten Knopf den Fokus und gibt ihn nicht
zurück, Tastatur- und Screenreader-Nutzer standen danach am Seitenanfang. begin() merkt sich das fokussierte
Bedienelement und das offene Feld; ist die Anfrage vorbei, geht der Fokus zurück an den Knopf, sonst ans
Textfeld, an den Knopf, der das Feld öffnete, sonst an die Zeile (tabIndex -1). Verlässt die Zeile die
Liste, nimmt die Meldung oben (tabIndex -1) den Fokus, auch bei gleichem Text zweimal nacheinander. Es wird
nur eingegriffen, wenn der Fokus wirklich verloren ging und vor der Aktion ein Bedienelement ihn hatte
(Safari fokussiert Knöpfe nicht). Neues Modul workersFocus.js (rein, document wird übergeben).

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

tests/unit/workersFocus.test.mjs

@@ -0,0 +1,59 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { loadModule } from './load.mjs'
+
+// Fokus nach Pult-Aktionen (Endprüfung P4, W3): ein gesperrter Knopf verliert den Fokus an <body>; die Zeile gibt ihn danach zurück,
+// aber nur, wenn er wirklich verloren ging. Reine Logik mit einer document-Attrappe, kein DOM nötig.
+const { activeControl, focusLost, restoreFocus } = await loadModule('src/lib/workersFocus.js')
+
+function fakeDoc() {
+  const body = { name: 'body' }
+  const doc = { body, documentElement: { name: 'html' }, activeElement: body }
+  const el = (name, extra = {}) => ({ name, isConnected: true, disabled: false, focusCalls: 0, focus() { this.focusCalls += 1; doc.activeElement = this }, ...extra })
+  return { doc, body, el }
+}
+
+test('focusLost: body, Wurzel, nichts, gesperrtes oder ausgehängtes Element gelten als verloren, ein bedienbares Element nicht', () => {
+  const { doc, body, el } = fakeDoc()
+  assert.equal(focusLost(doc), true) // activeElement = body
+  doc.activeElement = doc.documentElement; assert.equal(focusLost(doc), true)
+  for (const nothing of [null, undefined]) { doc.activeElement = nothing; assert.equal(focusLost(doc), true, String(nothing)) }
+  doc.activeElement = el('a', { disabled: true }); assert.equal(focusLost(doc), true) // der Browser lässt es erst beim nächsten Takt los
+  doc.activeElement = el('b', { isConnected: false }); assert.equal(focusLost(doc), true)
+  doc.activeElement = el('c'); assert.equal(focusLost(doc), false)
+  // ohne document (Node, Server) gibt es nichts zurückzugeben
+  for (const none of [null, undefined]) assert.equal(focusLost(none), false)
+  assert.equal(body.name, 'body')
+})
+
+test('activeControl: das fokussierte Bedienelement, sonst null (body und Wurzel zählen nicht)', () => {
+  const { doc, el } = fakeDoc()
+  assert.equal(activeControl(doc), null)
+  doc.activeElement = doc.documentElement; assert.equal(activeControl(doc), null)
+  doc.activeElement = null; assert.equal(activeControl(doc), null)
+  const button = el('button'); doc.activeElement = button
+  assert.equal(activeControl(doc), button)
+  assert.equal(activeControl(null), null); assert.equal(activeControl(undefined), null)
+})
+
+test('restoreFocus: nimmt den ersten Kandidaten, der noch da und frei ist; greift nur ein, wenn der Fokus verloren ging', () => {
+  const { doc, body, el } = fakeDoc()
+  const gone = el('gone', { isConnected: false })
+  const locked = el('locked', { disabled: true })
+  const first = el('first')
+  const second = el('second')
+  assert.equal(restoreFocus(doc, [null, undefined, gone, locked, first, second]), true)
+  assert.equal(doc.activeElement, first); assert.deepEqual([first.focusCalls, second.focusCalls, gone.focusCalls, locked.focusCalls], [1, 0, 0, 0])
+
+  // der Fokus liegt woanders (die Person hat inzwischen selbst gewählt): nichts wird angefasst
+  const other = el('other'); doc.activeElement = other
+  assert.equal(restoreFocus(doc, [first]), false)
+  assert.equal(doc.activeElement, other); assert.equal(first.focusCalls, 1)
+
+  // kein brauchbarer Kandidat, kein document, keine Liste: false, nichts passiert
+  doc.activeElement = body
+  assert.equal(restoreFocus(doc, [null, gone, locked]), false); assert.equal(doc.activeElement, body)
+  assert.equal(restoreFocus(null, [first]), false); assert.equal(restoreFocus(doc, []), false)
+  // Dinge ohne focus() (Attrappen, Textknoten) werden übersprungen
+  assert.equal(restoreFocus(doc, [{ isConnected: true }, 'text', 7, second]), true); assert.equal(doc.activeElement, second)
+})

tests/unit/workersPultUi.test.mjs

@@ -487,7 +487,7 @@ test('PultList (P4-T32): Quelltext – Aktionen über pultAction, Prüfung mit v
     "'reply'", "'approve-preview'", "'paste'", "'start-build'", 'validateReplyText', 'canReply', 'canApprovePreview', 'canStartBuild', 'canPaste', 'previewHref',
     'actionErrorText', 'pasteDoneText', 'rel="noopener noreferrer"', 'target="_blank"',
     'Als Mensch antworten', 'Jetzt senden', 'Vorschau ansehen', 'Freigeben & senden', 'Wirklich freigeben?', 'Vorschau bauen', 'Wirklich bauen?',
-    'Antwort des Kunden einfügen', 'Einfügen', 'wk-pult-reply', 'wk-pult-paste', 'Abbrechen', 'data-opens', 'Escape',
+    'Antwort des Kunden einfügen', 'Einfügen', 'wk-pult-reply', 'wk-pult-paste', 'Abbrechen', 'data-opens', 'Escape', 'restoreFocus', 'activeControl', 'tabIndex={-1}',
     'Kopiere die Antwort aus der Plattform hierher. Nora sortiert sie ein; bei einer Frage schreibt Clara den nächsten Entwurf.',
   ]) assert.ok(s.includes(t), t)
   assert.doesNotMatch(s, /dangerouslySetInnerHTML/); assert.doesNotMatch(s, /innerHTML/)
@@ -878,6 +878,131 @@ test('PultList (bedient, W4): Esc und „Abbrechen“ schließen auch „Antwort
   } finally { ui.end(); f.restore() }
 })
 
+// Endprüfung P4 (W3): ein gesperrter Knopf verliert den Fokus an <body>. Nach der Anfrage gibt die Zeile ihn zurück (an den Knopf, sonst ans Feld, an den
+// Knopf, der das Feld öffnete, oder an die Zeile); verlässt eine Zeile die Liste, geht er an die Meldung oben. Wer den Fokus inzwischen selbst
+// woanders hat, wird nicht gestört. Der Test spielt den Browser nach: activeElement stellt der Test (Klick: Knopf; Sperre: body).
+const PANEL_FIELD = '.wk-pult-reply textarea, .wk-pult-paste textarea'
+
+test('PultList (bedient, W3): nach einem Fehler beim Senden steht der Fokus wieder auf „Jetzt senden“; hat die Person inzwischen selbst gewählt, bleibt er dort', async () => {
+  for (const moved of [false, true]) {
+    const f = fakeFocus()
+    let reject
+    const api = scriptedApi(new Promise((_, no) => { reject = no }))
+    const ui = await startList([unsicher], api)
+    try {
+      await ui.click('Als Mensch antworten')
+      const submit = f.el('submit')
+      f.doc.activeElement = submit // der Klick hat den Knopf fokussiert
+      await ui.click('Jetzt senden')
+      const other = f.el('other')
+      f.doc.activeElement = moved ? other : f.body // der gesperrte Knopf verliert den Fokus (Chromium) – oder die Person ist schon woandershin gegangen
+      reject(failure('Wird schon von einem Kollegen bearbeitet.', 409)); await settle()
+      assert.deepEqual(ui.messages(), [{ kind: 'err', text: 'Wird schon von einem Kollegen bearbeitet.', role: 'alert' }]) // die Zeile bleibt
+      if (moved) assert.deepEqual([f.doc.activeElement, submit.focusCalls], [other, 0])
+      else assert.deepEqual([f.doc.activeElement, submit.focusCalls], [submit, 1])
+    } finally { ui.end(); f.restore() }
+  }
+})
+
+test('PultList (bedient, W3): ist der Knopf nach der Aktion weg („Ich kümmere mich“), geht der Fokus an die Zeile; sie ist mit tabIndex -1 fokussierbar', async () => {
+  const f = fakeFocus()
+  let finish
+  const api = scriptedApi(new Promise((resolve) => { finish = resolve }))
+  const ui = await startList([unsicher], api)
+  try {
+    const li = nodes(ui.tree(), (n) => n.tag === 'li')[0]
+    assert.equal(li.props.tabIndex, -1)
+    const claim = f.el('claim')
+    f.doc.activeElement = claim
+    await ui.click('Ich kümmere mich')
+    f.doc.activeElement = f.body
+    claim.isConnected = false // nach „übernommen“ gibt es den Knopf nicht mehr
+    finish({ item: { $id: 'e1' } }); await settle()
+    const row = f.ref('wk-pult-row')
+    assert.deepEqual([row.focusCalls, f.doc.activeElement], [1, row])
+    assert.equal(claim.focusCalls, 0)
+  } finally { ui.end(); f.restore() }
+})
+
+test('PultList (bedient, W3): nach dem Einfügen (Feld klappt zu) geht der Fokus an „Antwort des Kunden einfügen“; nach einem Fehler bleibt er im Feld', async () => {
+  const f = fakeFocus()
+  const plattform = { ...unsicher, $id: 'k1', kind: 'plattform_antwort', title: 'Suche Webdesigner', draft: 'Claras Entwurf', sourceUrl: 'https://www.kleinanzeigen.de/s-anzeige/x/1-2-3', prospect: { $id: 'p1', name: 'Verein' } }
+  let reject
+  let finish
+  const api = scriptedApi(new Promise((_, no) => { reject = no }), new Promise((resolve) => { finish = resolve }))
+  const ui = await startList([plattform], api)
+  try {
+    const opener = f.el('opener'); f.found.set('[data-opens="paste"]', opener)
+    const field = f.el('textarea'); f.found.set(PANEL_FIELD, field)
+    await ui.click('Antwort des Kunden einfügen')
+    await ui.type('Antwort des Kunden', 'Danke, passt.')
+    // Fehler: das Feld bleibt offen, der Knopf „Einfügen“ ist noch da und bekommt den Fokus zurück
+    const insert = f.el('insert'); f.doc.activeElement = insert
+    await ui.click('Einfügen')
+    f.doc.activeElement = f.body
+    reject(failure('Dieser Kontakt ist gesperrt.', 409)); await settle()
+    assert.deepEqual([f.doc.activeElement, insert.focusCalls], [insert, 1])
+    // Erfolg: das Feld klappt zu (Textfeld und Knopf „Einfügen“ sind weg), der Fokus geht an „Antwort des Kunden einfügen“ (vor der Zeile)
+    f.found.delete(PANEL_FIELD)
+    f.doc.activeElement = insert
+    await ui.click('Einfügen')
+    f.doc.activeElement = f.body
+    insert.isConnected = false
+    finish({ status: 'neu' }); await settle()
+    assert.deepEqual([opener.focusCalls, f.doc.activeElement], [1, opener])
+    assert.equal(field.focusCalls, 0); assert.equal(f.ref('wk-pult-row').focusCalls, 0)
+    // und bleibt das Feld offen, aber der Knopf ist weg, nimmt das Textfeld den Fokus (vor dem Auslöser)
+  } finally { ui.end(); f.restore() }
+})
+
+test('PultList (bedient, W3): verlässt die Zeile die Liste, geht der Fokus an die Meldung oben (auch bei gleichem Text); sie ist mit tabIndex -1 fokussierbar', async () => {
+  const f = fakeFocus()
+  const zweite = { ...unsicher, $id: 'e2' } // gleicher Titel: dieselbe Meldung zweimal
+  let finish
+  const api = scriptedApi(undefined, undefined, new Promise((resolve) => { finish = resolve }))
+  const ui = await startList([unsicher, zweite], api)
+  try {
+    // der Knopf, den die Anfrage gerade sperrt (disabled): der Browser lässt ihn erst beim nächsten Takt los, dann liegt der Fokus auf <body>
+    const done0 = f.el('done0', { disabled: true }); f.doc.activeElement = done0
+    await ui.click('Erledigt', 0)
+    const status = f.ref('msg')
+    assert.deepEqual(ui.messages(), [{ kind: 'ok', text: '„Unklare Antwort“ erledigt.', role: 'status' }])
+    assert.equal(nodes(ui.tree(), (n) => n.tag === 'div' && hasClass(n, 'msg'))[0].props.tabIndex, -1)
+    assert.deepEqual([status.focusCalls, f.doc.activeElement], [1, status])
+    assert.equal(done0.focusCalls, 0)
+    // zweite Zeile, gleiche Meldung: wieder auf die Meldung
+    f.doc.activeElement = f.el('done1', { disabled: true })
+    await ui.click('Erledigt', 1)
+    assert.equal(status.focusCalls, 2); assert.equal(f.doc.activeElement, status)
+    // hat die Person den Fokus während der Anfrage selbst woanders hingesetzt, bleibt er dort
+    f.doc.activeElement = f.el('done2', { disabled: true })
+    await ui.click('Erledigt', 0)
+    const other = f.el('other'); f.doc.activeElement = other
+    finish({}); await settle()
+    assert.deepEqual([status.focusCalls, f.doc.activeElement], [2, other])
+  } finally { ui.end(); f.restore() }
+})
+
+test('PultList (bedient, W3): ohne document (Server, Node) und ohne Fokus vor dem Klick passiert nichts', async () => {
+  const api = scriptedApi()
+  const ui = await startList([unsicher], api) // kein document, kein fakeRef: refs bleiben null
+  try {
+    await ui.click('Ich kümmere mich')
+    await ui.click('Erledigt')
+    assert.equal(api.calls.length, 2)
+  } finally { ui.end() }
+  // das document ist da, aber der Klick hatte keinen Fokus (Safari fokussiert Knöpfe nicht): nichts zurückzugeben, nichts wird bewegt – auch nicht zur Meldung oben
+  const f = fakeFocus()
+  const ui2 = await startList([unsicher], scriptedApi())
+  try {
+    await ui2.click('Ich kümmere mich')
+    assert.deepEqual([f.ref('wk-pult-row').focusCalls, f.doc.activeElement], [0, f.body])
+    await ui2.click('Erledigt')
+    assert.ok(ui2.text().includes('erledigt.'))
+    assert.deepEqual([f.ref('msg').focusCalls, f.doc.activeElement], [0, f.body])
+  } finally { ui2.end(); f.restore() }
+})
+
 // Endprüfung P4 (W2): „Vorschau bauen“ startet einen Opus-Lauf und lässt sich in der Oberfläche nicht zurücknehmen: wie Freigeben und Verwerfen
 // fragt der Knopf zuerst nach (4 s). Ein Fehlklick (Handy: der Knopf liegt in voller Breite zwischen anderen) startet keinen Bau mehr.
 test('PultList (bedient, W2): „Vorschau bauen“ – erster Klick fragt nach (4 s, Hinweis), zweiter startet den Bau; Fehler und Erfolg wie bisher', async () => {