fix(core/ui): reset aria-expanded on outside click, track modal owner, add keyboard nav tests

Agent-Logs-Url: https://github.com/speced/respec/sessions/9e0d56a5-7a01-4bd6-b16f-2f421dc54807

Co-authored-by: marcoscaceres <870154+marcoscaceres@users.noreply.github.com>

Author: Copilot

src/core/ui.js

@@ -60,6 +60,8 @@ window.addEventListener("load", () => trapFocus(menu));
 let modal;
 /** @type {HTMLElement | null} */
 let overlay;
+/** @type {HTMLElement | null} */
+let modalOwner;
 /** @type {any[]} */
 const errors = [];
 /** @type {any[]} */
@@ -84,6 +86,7 @@ respecPill.addEventListener(
 
 document.documentElement.addEventListener("click", () => {
   if (!menu.hidden) {
+    respecPill.setAttribute("aria-expanded", "false");
     toggleMenu();
   }
 });
@@ -286,9 +289,11 @@ export const ui = {
         overlay = null;
       });
     }
-    if (owner) {
-      owner.setAttribute("aria-expanded", "false");
+    const ownerElement = owner || modalOwner;
+    if (ownerElement) {
+      ownerElement.setAttribute("aria-expanded", "false");
     }
+    modalOwner = null;
     if (!modal) return;
     modal.remove();
     modal = null;
@@ -302,6 +307,7 @@ export const ui = {
   freshModal(title, content, currentOwner) {
     if (modal) modal.remove();
     if (overlay) overlay.remove();
+    modalOwner = currentOwner;
     overlay = html`<div id="respec-overlay" class="removeOnSave"></div>`;
     const id = `${currentOwner.id}-modal`;
     const headingId = `${id}-heading`;

tests/spec/core/ui-spec.js

@@ -32,6 +32,94 @@ describe("Core - UI", () => {
     expect(window.getComputedStyle(menu).display).toBe("none");
   });
 
+  it("resets aria-expanded on pill when menu is closed by clicking outside", async () => {
+    const doc = await makeRSDoc(makeStandardOps(), null, "display: block");
+    const pill = doc.getElementById("respec-pill");
+    const menu = doc.getElementById("respec-menu");
+
+    pill.click();
+    await new Promise(resolve => setTimeout(resolve));
+    expect(pill.getAttribute("aria-expanded")).toBe("true");
+
+    doc.body.click();
+    await new Promise(resolve => setTimeout(resolve));
+    expect(menu.hidden).toBe(true);
+    expect(pill.getAttribute("aria-expanded")).toBe("false");
+  });
+
+  it("closes menu via Escape key and resets aria-expanded", async () => {
+    const doc = await makeRSDoc(makeStandardOps(), null, "display: block");
+    const pill = doc.getElementById("respec-pill");
+    const menu = doc.getElementById("respec-menu");
+
+    pill.click();
+    await new Promise(resolve => setTimeout(resolve));
+    expect(menu.hidden).toBe(false);
+
+    const escEvent = new doc.defaultView.KeyboardEvent("keydown", {
+      key: "Escape",
+      bubbles: true,
+    });
+    menu.dispatchEvent(escEvent);
+    await new Promise(resolve => setTimeout(resolve));
+    expect(menu.hidden).toBe(true);
+    expect(pill.getAttribute("aria-expanded")).toBe("false");
+  });
+
+  it("moves focus with ArrowDown and ArrowUp keys in menu", async () => {
+    const doc = await makeRSDoc(makeStandardOps(), null, "display: block");
+    const ui = doc.defaultView.respecUI;
+
+    const btn1 = ui.addCommand("Nav Command 1", () => {}, null, "");
+    const btn2 = ui.addCommand("Nav Command 2", () => {}, null, "");
+
+    doc.getElementById("respec-pill").click();
+    await new Promise(resolve => setTimeout(resolve));
+
+    btn1.focus();
+    const downEvent = new doc.defaultView.KeyboardEvent("keydown", {
+      key: "ArrowDown",
+      bubbles: true,
+    });
+    btn1.dispatchEvent(downEvent);
+    expect(doc.activeElement).toBe(btn2);
+
+    const upEvent = new doc.defaultView.KeyboardEvent("keydown", {
+      key: "ArrowUp",
+      bubbles: true,
+    });
+    btn2.dispatchEvent(upEvent);
+    expect(doc.activeElement).toBe(btn1);
+  });
+
+  it("moves focus to first/last item with Home/End keys in menu", async () => {
+    const doc = await makeRSDoc(makeStandardOps(), null, "display: block");
+    const ui = doc.defaultView.respecUI;
+
+    const btn1 = ui.addCommand("Home End Cmd A", () => {}, null, "");
+    const btn2 = ui.addCommand("Home End Cmd B", () => {}, null, "");
+    const btn3 = ui.addCommand("Home End Cmd C", () => {}, null, "");
+
+    doc.getElementById("respec-pill").click();
+    await new Promise(resolve => setTimeout(resolve));
+
+    btn2.focus();
+    const homeEvent = new doc.defaultView.KeyboardEvent("keydown", {
+      key: "Home",
+      bubbles: true,
+    });
+    btn2.dispatchEvent(homeEvent);
+    expect(doc.activeElement).toBe(btn1);
+
+    btn2.focus();
+    const endEvent = new doc.defaultView.KeyboardEvent("keydown", {
+      key: "End",
+      bubbles: true,
+    });
+    btn2.dispatchEvent(endEvent);
+    expect(doc.activeElement).toBe(btn3);
+  });
+
   it("shows errors", async () => {
     const doc = await makeRSDoc(makeStandardOps({ group: "webapps" }));
     const ui = doc.defaultView.respecUI;