Deshacer con demo activa, avisos obsoletos, hoja de opciones y foco en hojas

- Deshacer/rehacer guardan y reponen «wam-demo-activa» con cada instantánea
  ({estado, activa}); «Actualizar» pide un segundo clic si el contenido cambió
  de cuenta o de número de mensajes respecto a la demo guardada.
- WAM.puntoDeshacer cierra los avisos con acción: su «Deshacer» ya no
  desharía el cambio que anuncian.
- «Todas las opciones» replica botonAccion: URL bloqueada o no válida se
  pinta como fila inerte (aria-disabled, sin data-opcion) en el grupo de
  enlaces.
- Hojas inferiores: enfocan la primera fila (o la X), retienen Tab dentro del
  panel y devuelven el foco al cerrar (origen, fila repintada o
  #chat-cuerpo); no roban el foco durante «Reproducir demo».
- Tests e2e de regresión en tests/e2e/regresiones.spec.mjs.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

css/whatsapp.css

@@ -769,6 +769,7 @@
   -webkit-tap-highlight-color: transparent;
 }
 .wa .sheet-fila:active { background: rgba(0, 0, 0, .05); }
+.wa .sheet-fila.qr-btn-inactiva:active { background: none; }
 .wa .sheet-fila-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
 .wa .sheet-fila-titulo { font-size: 17px; line-height: 22px; }
 .wa .sheet-fila-desc { font-size: 15px; line-height: 18px; letter-spacing: 0; color: var(--wa-sheet-sub); }

js/render.js

@@ -30,6 +30,8 @@
 
   var ESCRIBIENDO = false;
   var HOJA_ID = "";   /* id del mensaje cuya hoja está abierta ("" = ninguna) */
+  var ORIGEN_HOJA = null; /* elemento que tenía el foco al abrir la hoja */
+  var FOCO_EN_HOJA = false; /* la hoja movió el foco a su interior al abrirse */
 
   /* Solo esquemas seguros en href (defensa en profundidad para JSON importados). */
   function urlSegura(u) {
@@ -785,7 +787,7 @@
 
   /* Hoja inferior iOS genérica (B la crea/destruye) en #pantalla.
      alClic: manejador opcional de presentación para las filas. */
-  function montarHoja(titulo, contenido, pie, alClic) {
+  function montarHoja(titulo, contenido, pie, alClic, opts) {
     var pantalla = byId("pantalla");
     if (!pantalla) return null;
     WAM.cerrarSheet();
@@ -799,6 +801,28 @@
       '<div class="sheet-opciones" id="sheet-opciones">' + contenido + "</div>" +
       (pie ? '<div class="sheet-pie">' + esc(pie) + "</div>" : "") + "</div>";
     pantalla.appendChild(hoja);
+    /* Foco (diálogo modal): se guarda el origen, se enfoca la primera fila
+       activa (o la X) y Tab / Mayús+Tab quedan dentro del panel. Durante
+       «Reproducir demo» (o con opts.sinFoco) no se roba el foco. */
+    ORIGEN_HOJA = document.activeElement && document.activeElement !== document.body ? document.activeElement : null;
+    var enDemo = typeof WAM.demoActiva === "function" && WAM.demoActiva();
+    if (!enDemo && !(opts && opts.sinFoco)) {
+      var primera = hoja.querySelector('.sheet-fila:not([aria-disabled="true"]):not(span)') || hoja.querySelector(".sheet-cerrar");
+      if (primera) { try { primera.focus({ preventScroll: true }); } catch (e) { primera.focus(); } }
+      FOCO_EN_HOJA = !!primera;
+    }
+    hoja.addEventListener("keydown", function (e) {
+      if (e.key !== "Tab") return;
+      var panel = hoja.querySelector(".sheet-panel");
+      var focos = panel ? Array.prototype.filter.call(panel.querySelectorAll("a[href], button:not([disabled])"), function (x) {
+        return !x.hidden;
+      }) : [];
+      if (!focos.length) return;
+      var ini = focos[0], fin = focos[focos.length - 1], act = document.activeElement;
+      var dentro = panel.contains(act);
+      if (e.shiftKey && (act === ini || !dentro)) { e.preventDefault(); fin.focus(); }
+      else if (!e.shiftKey && (act === fin || !dentro)) { e.preventDefault(); ini.focus(); }
+    });
     hoja.addEventListener("click", function (e) {
       var t = e.target;
       if (!t || !t.closest) return;
@@ -864,7 +888,11 @@
       if (url) {
         enlaces += '<a class="sheet-fila sheet-fila-btn" href="' + esc(url) + '" target="_blank" rel="noopener noreferrer">' +
           icono(tipoIconoUrl(url)) + etiqueta + "</a>";
-      } else if (vacio(b.url)) {
+      } else if (!vacio(b.url) || b.urlBloqueada) {
+        /* Igual que botonAccion: URL no permitida o bloqueada → fila inerte */
+        enlaces += '<span class="sheet-fila sheet-fila-btn qr-btn-inactiva" aria-disabled="true">' +
+          icono("url") + etiqueta + "</span>";
+      } else {
         var usado = li && li.querySelector('[data-btn="' + j + '"].usado');
         respuestas += '<button type="button" class="sheet-fila sheet-fila-btn' + (usado ? " usado" : "") + '" data-opcion="' + j + '"' +
           (usado ? ' aria-disabled="true"' : "") + ">" + icono("responder") + etiqueta + "</button>";
@@ -889,7 +917,25 @@
 
   WAM.cerrarSheet = function () {
     var hoja = byId("sheet");
+    var idHoja = HOJA_ID;
+    var origen = ORIGEN_HOJA;
+    var movido = FOCO_EN_HOJA;
+    ORIGEN_HOJA = null;
+    FOCO_EN_HOJA = false;
+    var act = document.activeElement;
+    /* Safari no enfoca los botones al hacer clic: el foco cae en body */
+    var focoDentro = !!hoja && (hoja.contains(act) || (movido && (!act || act === document.body)));
     if (hoja && hoja.parentNode) hoja.parentNode.removeChild(hoja);
     HOJA_ID = "";
+    if (!focoDentro) return;
+    /* Devolver el foco: al origen si sigue en el DOM; si hubo re-render, al
+       mismo control en la fila nueva del mensaje; si no, a la conversación. */
+    var destino = origen && origen.isConnected ? origen : null;
+    if (!destino && idHoja) {
+      var filaNueva = filaDe({ id: idHoja });
+      if (filaNueva) destino = filaNueva.querySelector("[data-ver-todas], [data-flujo]:not([data-btn]):not([data-card])");
+    }
+    if (!destino) destino = byId("chat-cuerpo");
+    if (destino) { try { destino.focus({ preventScroll: true }); } catch (e) { destino.focus(); } }
   };
 })();

js/ux.js

@@ -128,9 +128,32 @@
   /* ------------------------------------------------------------------
      Historial deshacer / rehacer
   ------------------------------------------------------------------ */
+  /* Cada instantánea guarda también qué demo guardada estaba en uso
+     («wam-demo-activa»): al deshacer o rehacer se repone, para que
+     «Actualizar» nunca escriba el contenido de otra demo en su hueco. */
+  function instantanea() {
+    return { estado: clonar(WAM.estado), activa: lsGet(CLAVE_ACTIVA) };
+  }
+
+  function reponerActiva(id) {
+    if (id) lsSet(CLAVE_ACTIVA, id); else lsDel(CLAVE_ACTIVA);
+  }
+
+  /* Un cambio nuevo deja obsoletos los avisos con acción («Deshacer» /
+     «Rehacer»): su botón ya no desharía lo que anuncian. */
+  function cerrarAvisosConAccion() {
+    var ts = document.querySelectorAll("#ed-toasts .ed-toast");
+    for (var i = 0; i < ts.length; i++) {
+      if (!ts[i].querySelector(".ed-toast-accion")) continue;
+      if (typeof ts[i].__cerrar === "function") ts[i].__cerrar();
+      else if (ts[i].parentNode) ts[i].parentNode.removeChild(ts[i]);
+    }
+  }
+
   WAM.puntoDeshacer = function () {
     if (!WAM.estado) return;
-    pilaDeshacer.push(clonar(WAM.estado));
+    cerrarAvisosConAccion();
+    pilaDeshacer.push(instantanea());
     if (pilaDeshacer.length > LIMITE_HISTORIAL) pilaDeshacer.shift();
     pilaRehacer = [];
     pintarBotonesHistorial();
@@ -147,8 +170,10 @@
 
   WAM.deshacer = function () {
     if (!pilaDeshacer.length) { toast("No hay nada que deshacer"); return false; }
-    pilaRehacer.push(clonar(WAM.estado));
-    sustituirEstado(conTemaActual(pilaDeshacer.pop()));
+    var previo = pilaDeshacer.pop();
+    pilaRehacer.push(instantanea());
+    sustituirEstado(conTemaActual(previo.estado));
+    reponerActiva(previo.activa);
     pintarBotonesHistorial();
     toast("Cambio deshecho", { accion: { texto: "Rehacer", fn: WAM.rehacer } });
     return true;
@@ -156,8 +181,10 @@
 
   WAM.rehacer = function () {
     if (!pilaRehacer.length) { toast("No hay nada que rehacer"); return false; }
-    pilaDeshacer.push(clonar(WAM.estado));
-    sustituirEstado(conTemaActual(pilaRehacer.pop()));
+    var siguiente = pilaRehacer.pop();
+    pilaDeshacer.push(instantanea());
+    sustituirEstado(conTemaActual(siguiente.estado));
+    reponerActiva(siguiente.activa);
     pintarBotonesHistorial();
     toast("Cambio rehecho");
     return true;
@@ -372,6 +399,18 @@
     return entrada;
   }
 
+  /* ¿El estado actual cambió de cuenta o de número de mensajes respecto a
+     lo guardado en el hueco «id»? */
+  function cambioSustancial(id) {
+    var guardada = null;
+    try { guardada = JSON.parse(lsGet(PREFIJO_DEMO + id) || "null"); } catch (e) { guardada = null; }
+    if (!guardada || typeof guardada !== "object") return false;
+    var nomG = (guardada.cuenta && guardada.cuenta.nombre) || "";
+    var nomA = (WAM.estado && WAM.estado.cuenta && WAM.estado.cuenta.nombre) || "";
+    var nG = Array.isArray(guardada.mensajes) ? guardada.mensajes.length : 0;
+    return nomG !== nomA || nG !== nMensajes();
+  }
+
   function cargarDemo(id) {
     var bruto = lsGet(PREFIJO_DEMO + id);
     var datos = null;
@@ -499,11 +538,21 @@
     var bGuardar = boton(activa ? "Actualizar" : "Guardar la actual", "wam-dlg-primario", function () {
       var nombre = String(inputNombre.value || "").trim() || nombreCuenta || "Mi demo";
       var misma = activa && activa.nombre === nombre;
+      // Defensa: si lo que se va a escribir sobre una demo existente tiene
+      // otra cuenta u otro número de mensajes, se pide un segundo clic.
+      if (misma && bGuardar.getAttribute("data-confirmar") !== "1" && cambioSustancial(activa.id)) {
+        bGuardar.setAttribute("data-confirmar", "1");
+        bGuardar.textContent = "¿Sobrescribir «" + activa.nombre + "»?";
+        toast("El contenido actual no se parece al de «" + activa.nombre + "» (otra cuenta u otro número de mensajes). Pulsa otra vez para sobrescribirla o cambia el nombre para guardarla como nueva.", { ms: 7000 });
+        return;
+      }
+      bGuardar.removeAttribute("data-confirmar");
       var e = guardarDemoComo(nombre, misma ? activa.id : null);
       if (e) { toast("Demo «" + e.nombre + "» guardada"); pintarLista(); activa = demoActiva(); }
     });
     inputNombre.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); bGuardar.click(); } });
     inputNombre.addEventListener("input", function () {
+      bGuardar.removeAttribute("data-confirmar");
       bGuardar.textContent = (activa && activa.nombre === String(inputNombre.value).trim()) ? "Actualizar" : "Guardar como nueva";
     });
 

tests/e2e/regresiones.spec.mjs

@@ -0,0 +1,152 @@
+// Regresiones: deshacer/rehacer con demos guardadas, avisos «Deshacer»
+// obsoletos, hoja «Todas las opciones» con URLs bloqueadas y foco en las hojas.
+import { test, expect, estado, filaChat, cargarEstado, rapido } from "./fixtures.mjs";
+
+async function nombreCuenta(page, v) {
+  await page.evaluate(() => { const d = document.getElementById("bloque-cuenta"); if (d) d.open = true; });
+  await page.locator("#cuenta-nombre").fill(v);
+  await expect.poll(async () => (await estado(page)).cuenta.nombre).toBe(v);
+}
+
+const activaLS = (page) => page.evaluate(() => localStorage.getItem("wam-demo-activa"));
+
+async function guardarComo(page, nombre) {
+  await page.locator("#btn-demos").click();
+  const dlg = page.locator("#dlg-demos");
+  await dlg.locator("#dlg-demo-nombre").fill(nombre);
+  await dlg.getByRole("button", { name: /Guardar/ }).click();
+  await expect(dlg.locator(".wam-demo-nombre", { hasText: new RegExp("^" + nombre + "$") })).toBeVisible();
+  await dlg.locator(".wam-dlg-pie").getByRole("button", { name: "Cerrar" }).click();
+}
+
+test.describe("Deshacer y demos guardadas", () => {
+  test("deshacer / rehacer reponen la demo activa y «Actualizar» no pisa otra demo", async ({ app }) => {
+    await guardarComo(app, "A");
+    const idA = await activaLS(app);
+    // cargar un escenario y guardarlo como B
+    await app.locator("#btn-demos").click();
+    await app.locator("#dlg-demos .wam-esc").first().click();
+    await nombreCuenta(app, "Cuenta B");
+    await guardarComo(app, "B");
+    const idB = await activaLS(app);
+    expect(idB).not.toBe(idA);
+    // abrir A
+    await app.locator("#btn-demos").click();
+    await app.locator("#dlg-demos .wam-demo").filter({ has: app.locator(".wam-demo-nombre", { hasText: /^A$/ }) })
+      .getByRole("button", { name: "Abrir" }).click();
+    expect(await activaLS(app)).toBe(idA);
+    // deshacer: vuelve el contenido de B y también la demo activa B
+    await app.locator("#btn-deshacer").click();
+    expect((await estado(app)).cuenta.nombre).toBe("Cuenta B");
+    expect(await activaLS(app)).toBe(idB);
+    await app.locator("#btn-demos").click();
+    await expect(app.locator("#dlg-demo-nombre")).toHaveValue("B");
+    await app.locator("#dlg-demos .wam-dlg-pie").getByRole("button", { name: "Cerrar" }).click();
+    // rehacer: vuelve A
+    await app.locator("#btn-rehacer").click();
+    expect(await activaLS(app)).toBe(idA);
+    // deshacer un escenario (que borra la clave activa) la repone
+    await app.locator("#btn-demos").click();
+    await app.locator("#dlg-demos .wam-esc").first().click();
+    expect(await activaLS(app)).toBeNull();
+    await app.locator("#btn-deshacer").click();
+    expect(await activaLS(app)).toBe(idA);
+    // el hueco de A sigue siendo A
+    const slotA = await app.evaluate((id) => JSON.parse(localStorage.getItem("wam-demo-" + id) || "null"), idA);
+    expect(slotA && slotA.cuenta.nombre).not.toBe("Cuenta B");
+  });
+
+  test("«Actualizar» pide un segundo clic si cambió la cuenta", async ({ app }) => {
+    await guardarComo(app, "A");
+    const idA = await activaLS(app);
+    const nombreOriginal = (await estado(app)).cuenta.nombre;
+    await nombreCuenta(app, "Otra cuenta");
+    await app.locator("#btn-demos").click();
+    const bGuardar = app.locator("#dlg-demos .wam-dlg-primario");
+    await expect(bGuardar).toHaveText("Actualizar");
+    await bGuardar.click();
+    await expect(bGuardar).toHaveText(/Sobrescribir/);
+    let slot = await app.evaluate((id) => JSON.parse(localStorage.getItem("wam-demo-" + id)), idA);
+    expect(slot.cuenta.nombre).toBe(nombreOriginal);
+    await bGuardar.click();
+    slot = await app.evaluate((id) => JSON.parse(localStorage.getItem("wam-demo-" + id)), idA);
+    expect(slot.cuenta.nombre).toBe("Otra cuenta");
+  });
+
+  test("el «Deshacer» de un aviso desaparece cuando hay otro cambio", async ({ app }) => {
+    const n = (await estado(app)).mensajes.length;
+    await app.evaluate(() => WAM.borrarMensaje(0));
+    const accion = app.locator("#ed-toasts .ed-toast-accion");
+    await expect(accion).toHaveCount(1);
+    await nombreCuenta(app, "Nombre nuevo");
+    // sin esperar: el aviso caduca solo a los 6 s y enmascararía el fallo
+    expect(await accion.count()).toBe(0);
+    expect((await estado(app)).mensajes.length).toBe(n - 1);
+  });
+});
+
+const PLANTILLA = [
+  {
+    id: "m1", dir: "in", tipo: "template", hora: "10:00", body: "Elige",
+    botones: [
+      { texto: "Uno" }, { texto: "Dos" },
+      { texto: "Bloqueado", url: "javascript:alert(1)" },
+      { texto: "Relativa", url: "/menu" },
+      { texto: "Cinco" },
+    ],
+  },
+  {
+    id: "m2", dir: "in", tipo: "list", hora: "10:01", body: "Menú", boton: "Ver menú",
+    secciones: [{ titulo: "S", filas: [{ id: "f1", titulo: "Fila 1" }, { id: "f2", titulo: "Fila 2" }] }],
+  },
+];
+
+test.describe("Hojas inferiores", () => {
+  test.beforeEach(async ({ app }) => {
+    await rapido(app);
+    await cargarEstado(app, { mensajes: PLANTILLA });
+    await expect(filaChat(app, "m1")).toHaveCount(1);
+  });
+
+  test("«Todas las opciones» pinta inertes los botones con URL bloqueada o no válida", async ({ app }) => {
+    const fila = filaChat(app, "m1");
+    const inertesBurbuja = await fila.locator(".qr-btn-inactiva").allTextContents();
+    expect(inertesBurbuja.map((t) => t.trim())).toEqual(["Bloqueado", "Relativa"]);
+    await fila.locator("[data-ver-todas]").click();
+    const hoja = app.locator("#sheet");
+    const inertesHoja = await hoja.locator('.sheet-fila.qr-btn-inactiva[aria-disabled="true"]').allTextContents();
+    expect(inertesHoja.map((t) => t.trim())).toEqual(inertesBurbuja.map((t) => t.trim()));
+    await expect(hoja.locator("[data-opcion]")).toHaveCount(3);
+    await expect(hoja.locator('[data-opcion="2"], [data-opcion="3"]')).toHaveCount(0);
+    await expect(hoja.locator(".sheet-fila")).toHaveCount(5);
+  });
+
+  test("foco: la hoja lo recibe, lo retiene con Tab y lo devuelve al cerrar", async ({ app }) => {
+    const toggle = filaChat(app, "m1").locator("[data-ver-todas]");
+    await toggle.focus();
+    await app.keyboard.press("Enter");
+    await expect(app.locator("#sheet")).toHaveCount(1);
+    const enHoja = () => app.evaluate(() => !!document.activeElement.closest("#sheet"));
+    expect(await enHoja()).toBe(true);
+    for (let k = 0; k < 6; k++) {
+      await app.keyboard.press("Tab");
+      expect(await enHoja()).toBe(true);
+    }
+    await app.keyboard.press("Shift+Tab");
+    expect(await enHoja()).toBe(true);
+    await app.keyboard.press("Escape");
+    await expect(app.locator("#sheet")).toHaveCount(0);
+    expect(await app.evaluate(() => document.activeElement.hasAttribute("data-ver-todas"))).toBe(true);
+  });
+
+  test("foco: la lista «Ver opciones» enfoca su primera fila", async ({ app }) => {
+    const abridor = filaChat(app, "m2").locator("[data-flujo]:not([data-btn]):not([data-card])").first();
+    await abridor.focus();
+    await app.keyboard.press("Enter");
+    await expect(app.locator("#sheet")).toHaveCount(1);
+    expect(await app.evaluate(() => document.activeElement.getAttribute("data-fila"))).toBe("0");
+    await app.locator("#sheet .sheet-cerrar").click();
+    await expect(app.locator("#sheet")).toHaveCount(0);
+    expect(await app.evaluate(() => document.activeElement.closest('[data-id="m2"]') !== null)).toBe(true);
+  });
+});