Terminplaner: Portal-Ansicht – Fokus und aria-busy

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

public/termine-speichern.js

@@ -1,6 +1,6 @@
 /* Terminplaner im Kundenbereich: Speichern der Einstellungen – gemeinsam fuer die Reiter Leistungen, Team & Plaetze und Einstellungen.
    Jede Aenderung ist ein Speichern: PATCH /api/termine/einstellungen schickt die GANZE Einstellung mit der Version, auf der sie beruht
-   (server/routes/termine.js). Der Reiter gibt nur an, was sich aendert: speichere(aendere, { container, knopf }) holt eine Kopie des
+   (server/routes/termine.js). Der Reiter gibt nur an, was sich aendert: speichere(aendere, { container }) holt eine Kopie des
    aktuellen Standes (ctx.daten.einstellung), laesst aendere(entwurf) sie aendern und schickt sie ab.
    - Erfolg: die zurueckgegebene Einstellung und Version gelten (ctx.daten), die Hinweisleiste der Huelle wird neu gezeichnet und die Daten
      (Kalender-Links) werden neu geladen; Rueckgabe true.
@@ -16,6 +16,9 @@
 
 import { allgemeinerFehler, frage, h, knopfZeile, setzeFehler, zeigeFehler } from './termine-dom.js'
 
+/** Wie viele Speichern gerade auf einem Tabpanel laufen (aria-busy bleibt, bis das letzte fertig ist). */
+const belegt = new WeakMap()
+
 export const VERALTET_TEXT = 'Die Einstellungen wurden inzwischen geändert. Bitte neu laden.'
 
 const WORT = { leistungen: 'Leistung', abwesenheiten: 'Abwesenheit' }
@@ -62,18 +65,23 @@ export function neuerSpeicher(ctx, wurzel, neuZeichnen) {
     }
   })
 
-  // Ein Speichern zur Zeit: waehrenddessen aria-busy am Reiter und alle Knoepfe darin gesperrt (danach wieder frei, der Fokus kehrt zurueck)
+  // Ein Speichern zur Zeit: waehrenddessen aria-busy am Reiter und alle Knoepfe darin gesperrt (danach wieder frei, der Fokus kehrt zurueck).
+  // Das Tabpanel ist fuer alle Reiter dasselbe Element und wechselt der Nutzer waehrend des Speicherns den Reiter, ist wurzel beim Freigeben
+  // schon ausgehaengt: darum merkt sich die Sperre das Panel, das sie gesetzt hat, und aria-busy faellt erst, wenn kein Speichern mehr darauf laeuft.
   let laeuft = false
   function sperre(an, gesperrt) {
-    const tafel = wurzel.closest('[role="tabpanel"]') || wurzel
     if (an) {
+      const tafel = wurzel.closest('[role="tabpanel"]') || wurzel
+      belegt.set(tafel, (belegt.get(tafel) || 0) + 1)
       tafel.setAttribute('aria-busy', 'true')
       const knoepfe = [...wurzel.querySelectorAll('button:not(:disabled)')]
       const fokus = document.activeElement
       for (const knopf of knoepfe) knopf.disabled = true
-      return { knoepfe, fokus }
+      return { tafel, knoepfe, fokus }
     }
-    tafel.removeAttribute('aria-busy')
+    const rest = (belegt.get(gesperrt.tafel) || 1) - 1
+    belegt.set(gesperrt.tafel, rest)
+    if (rest === 0) gesperrt.tafel.removeAttribute('aria-busy')
     for (const knopf of gesperrt.knoepfe) knopf.disabled = false
     // Der Fokus war auf einem gesperrten Knopf und ist weg: zurueck dorthin; hat der Reiter ihn inzwischen anders gesetzt (z. B. auf ein Feld mit Fehler), bleibt das so
     const jetzt = document.activeElement