workers: Bot-Leads behält den Tastaturfokus beim Blättern und nach „Alle anzeigen“, aria-current nur in der Einzelansicht

Endprüfung P6 (C5, W1): Beim Blättern hängt die Seitenzeile beim Laden aus, und „Alle anzeigen“ wird durch den Raumfilter ersetzt; der Fokus fiel jeweils auf <body>. - Blättern: gemerkt wird der gedrückte Knopf; nach dem Laden bekommt er den Fokus zurück, ist er gesperrt (erste oder letzte Seite), der andere. Raum oder Suche bedient der Nutzer inzwischen, geschieht nichts; scheitert die Anfrage, gibt es keine Seitenzeile und nichts geschieht. - „Alle anzeigen“: der Raumfilter bekommt den Fokus, sobald die Seite bot aus der Adresse genommen hat. Nicht beim Einhängen (am Handy öffnete das die Auswahl) und nicht bei einem anderen Weg zur Liste (Zurück-Taste). - aria-current nur mit bot (single) und passender Kennung; Zeilen ohne Kennung teilen sich keinen key mehr. - Tests: botleadList.test.mjs (Fokus-Attrappe über __fakeRef, Mutationsprobe für die Reset-Zeilen), botleadsView.test.mjs (Quelltext-Probe); der Prüfstand prüft zusätzlich den Fokus nach „Alle anzeigen“. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-20 15:19:52 +00:00
1 parent 78c8e3fbc2
commit ed5dfa9c0e
@@ -36,6 +36,23 @@ function fakeApi() {
  return { calls, botleads: (params) => new Promise((resolve, reject) => { calls.push({ params, resolve, reject }) }) }
 }

+// DOM-Attrappe für den Fokus (Muster workersPultUi.test.mjs): ref an select und den Blätterknöpfen liefert __fakeRef. Ein Element zählt den Aufruf von focus() nur,
+// solange es im Baum steht; React setzt ref.current beim Abbau auf null, dann wäre ref.current?.focus() wirkungslos. Der Schlüssel ist „select“ oder die Beschriftung des Knopfs.
+function fakeFocus() {
+  const f = { focused: [], tree: () => null, made: new Map() }
+  const keyOf = (tag, props) => (tag === 'button' ? String(props.children) : tag)
+  const live = (tag, key) => nodes(f.tree(), (n) => n.tag === tag && keyOf(tag, n.props) === key).length > 0
+  globalThis.__fakeRef = (tag, props) => {
+    const key = keyOf(tag, props)
+    if (!f.made.has(key)) f.made.set(key, { key, props, get disabled() { return this.props.disabled === true }, focus() { if (live(tag, key)) f.focused.push(key) } })
+    f.made.get(key).props = props
+    return f.made.get(key)
+  }
+  f.attach = (view) => { f.tree = () => view.tree() }
+  f.restore = () => { delete globalThis.__fakeRef }
+  return f
+}
+
 const ITEM = {
  id: 'p1', room: 'handwerk', roomLabel: 'Handwerk', name: 'Elektro Beispiel GmbH', postalCode: '67655', city: 'Kaiserslautern', score: 82,
  reason: 'keine veröffentlichte Mail', sourceUrl: 'https://beispiel-elektro.de/impressum', phone: '0631 111', phoneSource: 'https://beispiel-elektro.de/impressum',
@@ -326,3 +343,109 @@ test('nach dem Abbau setzt eine späte Antwort nichts mehr, ein offener Zeitgebe
  await settle()
  assert.equal(ui.lateUpdates(), 0)
 })
+
+test('Blättern (C5): nach dem Laden der neuen Seite bekommt die Seitenzeile den Tastaturfokus zurück; ist der Knopf gesperrt, der andere', async () => {
+  const api = fakeApi()
+  const dom = fakeFocus()
+  const ui = await start(api)
+  dom.attach(ui)
+  try {
+    await ui.answer(0, { items: [ITEM], total: 120, pageSize: 50 })
+    assert.deepEqual(dom.focused, []) // nicht schon beim ersten Laden
+    await ui.click('Weiter')
+    assert.deepEqual(dom.focused, []) // während der Anfrage ist die Seitenzeile weg
+    await ui.answer(1, { items: [ITEM], total: 120, pageSize: 50 }) // Seite 2 von 3
+    assert.deepEqual(dom.focused, ['Weiter'])
+    await ui.click('Weiter')
+    await ui.answer(2, { items: [ITEM], total: 120, pageSize: 50 }) // Seite 3 von 3: „Weiter“ ist gesperrt ⇒ „Zurück“
+    assert.deepEqual(dom.focused, ['Weiter', 'Zurück'])
+    await ui.click('Zurück')
+    await ui.answer(3, { items: [ITEM], total: 120, pageSize: 50 }) // Seite 2
+    assert.deepEqual(dom.focused, ['Weiter', 'Zurück', 'Zurück'])
+    await ui.click('Zurück')
+    await ui.answer(4, { items: [ITEM], total: 120, pageSize: 50 }) // Seite 1: „Zurück“ ist gesperrt ⇒ „Weiter“
+    assert.deepEqual(dom.focused, ['Weiter', 'Zurück', 'Zurück', 'Weiter'])
+  } finally { dom.restore(); ui.end() }
+})
+
+test('Blättern (C5): der Fokus springt nicht, wenn der Nutzer inzwischen Raum oder Suche bedient hat oder die Anfrage scheitert', async () => {
+  const api = fakeApi()
+  const dom = fakeFocus()
+  const ui = await start(api)
+  dom.attach(ui)
+  try {
+    await ui.answer(0, { items: [ITEM], total: 120, pageSize: 50 })
+    await ui.click('Weiter')
+    await ui.pick('handwerk') // während die Seite lädt, wechselt der Raum
+    await ui.answer(1, { items: [ITEM], total: 120, pageSize: 50 }) // späte Antwort der älteren Anfrage
+    await ui.answer(2, { items: [ITEM], total: 120, pageSize: 50 })
+    assert.deepEqual(dom.focused, [])
+    await ui.click('Weiter')
+    await ui.type('bäckerei') // die Suche wird getippt, bevor die Seite da ist
+    await ui.answer(3, { items: [ITEM], total: 120, pageSize: 50 })
+    assert.deepEqual(dom.focused, [])
+    // Raum und Suche selbst verschieben den Fokus nie
+    ui.fireTimers(); await settle()
+    await ui.answer(4, { items: [ITEM], total: 120, pageSize: 50 })
+    assert.deepEqual(dom.focused, [])
+    // scheitert die Anfrage, gibt es keine Seitenzeile zum Fokussieren; die Merkung bleibt nicht für später hängen
+    await ui.click('Weiter')
+    await ui.fail(5, new Error('Der Hustler-Dienst ist gerade nicht erreichbar.'))
+    assert.deepEqual(dom.focused, [])
+    await ui.pick('laden')
+    await ui.answer(6, { items: [ITEM], total: 120, pageSize: 50 })
+    assert.deepEqual(dom.focused, [])
+  } finally { dom.restore(); ui.end() }
+})
+
+test('Alle anzeigen (W1): nach dem Verlassen der Einzelansicht bekommt der Raumfilter den Fokus, nicht beim Einhängen und nicht bei einem anderen Weg zur Liste', async () => {
+  const api = fakeApi()
+  const dom = fakeFocus()
+  let cleared = 0
+  const ui = await start(api, { bot: 'p1', onClearBot: () => { cleared += 1 } })
+  dom.attach(ui)
+  try {
+    await ui.answer(0, { items: [ITEM], total: 1 })
+    assert.deepEqual(dom.focused, []) // nicht beim Einhängen (das öffnete am Handy die Tastatur oder die Auswahl)
+    await ui.click('Alle anzeigen')
+    assert.equal(cleared, 1)
+    assert.deepEqual(dom.focused, []) // der Knopf steht noch, bis die Seite bot aus der Adresse nimmt
+    ui.setProps({ bot: '' }); await settle()
+    assert.deepEqual(dom.focused, ['select'])
+    assert.equal(ui.select().props['aria-label'], 'Raum')
+    // ein weiterer Wechsel in die Einzelansicht und zurück ohne den Knopf (Zurück-Taste des Browsers): kein Fokussprung
+    ui.setProps({ bot: 'p2' }); await settle()
+    ui.setProps({ bot: '' }); await settle()
+    assert.deepEqual(dom.focused, ['select'])
+  } finally { dom.restore(); ui.end() }
+})
+
+test('Alle anzeigen (W1): ohne bot (Liste von Anfang an) bleibt der Fokus unberührt', async () => {
+  const api = fakeApi()
+  const dom = fakeFocus()
+  const ui = await start(api)
+  dom.attach(ui)
+  try {
+    await ui.answer(0, { items: [ITEM], total: 1 })
+    ui.setProps({ bot: 'p1', onClearBot: () => {} }); await settle()
+    ui.setProps({ bot: '' }); await settle()
+    assert.deepEqual(dom.focused, [])
+  } finally { dom.restore(); ui.end() }
+})
+
+test('aria-current (C5): nur die Zeile mit der Kennung aus bot, nie eine Zeile ohne Kennung', async () => {
+  const api = fakeApi()
+  const ui = await start(api)
+  try {
+    // Liste (bot leer): eine Zeile ohne Kennung (botleadRow macht daraus '') gilt nicht als „aktuell“
+    await ui.answer(0, { items: [{ ...ITEM, id: undefined }, { ...PRAXIS, id: 5 }, ITEM], total: 3 })
+    assert.equal(ui.rows().length, 3)
+    assert.deepEqual(ui.rows().map((r) => r.props['aria-current']), [undefined, undefined, undefined])
+  } finally { ui.end() }
+  const api2 = fakeApi()
+  const one = await start(api2, { bot: 'p1', onClearBot: () => {} })
+  try {
+    await one.answer(0, { items: [{ ...ITEM, id: '' }, ITEM, PRAXIS], total: 3 })
+    assert.deepEqual(one.rows().map((r) => r.props['aria-current']), [undefined, 'true', undefined])
+  } finally { one.end() }
+})