feat: menus tableur a icones, fermeture au focus et polish mobile #179

frontend/js/xlsx/context-menu.js

@@ -1,9 +1,17 @@
-/* ObsiGate — generic themed context menu for the XLSX grid (#155).
+/* ObsiGate — generic themed context menu for the XLSX grid (#155, #179).
  *
- * Builds a small menu anchored at a screen position, closes it on outside
- * click / Escape / window blur. Labels and callbacks come from the caller, so
- * no i18n lives here.
+ * Builds a small menu anchored at a screen position. Labels, icons and
+ * callbacks come from the caller, so no i18n lives here.
+ *
+ * #179 — every menu entry carries a representative Lucide icon, the menu
+ * closes as soon as the focus leaves it (outside click, focusout, Escape,
+ * window blur, scroll, resize) and arrow keys walk through the entries.
+ * trackDismissable() exposes the same dismissal contract to the other
+ * spreadsheet menus (Structure, Mise en forme, Export), which keep their
+ * own markup.
  */
+import { safeCreateIcons } from '../utils.js';
+
 let _menu = null;
 let _openedAt = 0;
 let _dismissBound = false;
@@ -33,13 +41,106 @@ function bindDismiss() {
   document.addEventListener("keydown", (e) => {
     if (e.key === "Escape") closeContextMenu();
   });
-  if (typeof window !== "undefined") window.addEventListener("blur", closeContextMenu);
+  // #179 — never linger once the focus moves outside the menu (toolbar
+  // button, editor, another panel…). A null relatedTarget (click on a
+  // non-focusable cell) is already covered by the click-outside handler.
+  document.addEventListener("focusout", (e) => {
+    if (!_menu) return;
+    const next = e.relatedTarget;
+    if (next && _menu.contains(next)) return;
+    closeContextMenu();
+  });
+  if (typeof window !== "undefined") {
+    window.addEventListener("blur", closeContextMenu);
+    // A scroll or resize detaches the viewport-anchored menu from its cell.
+    window.addEventListener("scroll", closeContextMenu, true);
+    window.addEventListener("resize", closeContextMenu);
+  }
+}
+
+/**
+ * Walk through a menu's buttons with the keyboard (#179).
+ * @param {HTMLElement} menuEl - menu container
+ * @param {string} itemSelector - CSS selector of the navigable entries
+ */
+export function enableArrowNav(menuEl, itemSelector) {
+  menuEl.addEventListener("keydown", (e) => {
+    const items = [...menuEl.querySelectorAll(itemSelector)].filter((b) => !b.disabled);
+    if (!items.length) return;
+    const idx = items.indexOf(document.activeElement);
+    let next = -1;
+    if (e.key === "ArrowDown") next = idx < 0 ? 0 : (idx + 1) % items.length;
+    else if (e.key === "ArrowUp") next = idx < 0 ? items.length - 1 : (idx - 1 + items.length) % items.length;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = items.length - 1;
+    else return;
+    e.preventDefault();
+    items[next].focus();
+  });
+}
+
+/**
+ * Dismissal contract shared by the spreadsheet's other menus (#179).
+ * Closes on outside click (the toggle button owns its own clicks), Escape,
+ * focus leaving both the menu and its toggle, scroll and resize.
+ * @param {HTMLElement} menuEl - menu element to watch
+ * @param {object} opts
+ * @param {HTMLElement|null} opts.toggle - button opening the menu (exempt)
+ * @param {Function|null} opts.onClose - called once on dismissal (default: remove the element)
+ * @returns {Function} dismiss() — idempotent manual close (unbinds + onClose)
+ */
+export function trackDismissable(menuEl, { toggle = null, onClose = null } = {}) {
+  let done = false;
+  const unbind = () => {
+    document.removeEventListener("click", onDocClick);
+    document.removeEventListener("keydown", onKey);
+    document.removeEventListener("focusout", onFocusOut);
+    if (typeof window !== "undefined") {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onScroll);
+    }
+  };
+  const dismiss = () => {
+    if (done) return;
+    done = true;
+    unbind();
+    if (onClose) onClose();
+    else menuEl.remove();
+  };
+  const onDocClick = (e) => {
+    if (done) return;
+    if (!menuEl.isConnected) { done = true; unbind(); return; }
+    const t = e.target;
+    if (menuEl.contains(t)) return;
+    if (toggle && (toggle === t || toggle.contains(t))) return;
+    dismiss();
+  };
+  const onKey = (e) => {
+    if (e.key === "Escape" && menuEl.isConnected) dismiss();
+  };
+  const onFocusOut = (e) => {
+    if (done || !menuEl.isConnected) return;
+    const next = e.relatedTarget;
+    if (next && (menuEl.contains(next) || (toggle && toggle.contains(next)))) return;
+    dismiss();
+  };
+  const onScroll = () => {
+    if (menuEl.isConnected) dismiss();
+  };
+  document.addEventListener("click", onDocClick);
+  document.addEventListener("keydown", onKey);
+  document.addEventListener("focusout", onFocusOut);
+  if (typeof window !== "undefined") {
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onScroll);
+  }
+  return dismiss;
 }
 
 /**
  * @param {number} x - viewport X of the pointer
  * @param {number} y - viewport Y of the pointer
- * @param {Array<{label?: string, separator?: boolean, danger?: boolean, disabled?: boolean, onClick?: Function}>} items
+ * @param {Array<{label?: string, icon?: string, separator?: boolean, danger?: boolean, disabled?: boolean, onClick?: Function}>} items
  * @returns {HTMLElement} the menu element
  */
 export function openContextMenu(x, y, items) {
@@ -52,6 +153,7 @@ export function openContextMenu(x, y, items) {
     if (item.separator) {
       const sep = document.createElement("div");
       sep.className = "xlsx-context-sep";
+      sep.setAttribute("aria-hidden", "true");
       menu.appendChild(sep);
       continue;
     }
@@ -59,7 +161,17 @@ export function openContextMenu(x, y, items) {
     btn.type = "button";
     btn.className = `btn-action xlsx-context-item${item.danger ? " xlsx-context-danger" : ""}`;
     btn.setAttribute("role", "menuitem");
-    btn.textContent = item.label;
+    if (item.icon) {
+      const ic = document.createElement("i");
+      ic.setAttribute("data-lucide", item.icon);
+      ic.className = "xlsx-menu-icon";
+      ic.setAttribute("aria-hidden", "true");
+      btn.appendChild(ic);
+    }
+    const lab = document.createElement("span");
+    lab.className = "xlsx-menu-label";
+    lab.textContent = item.label;
+    btn.appendChild(lab);
     btn.disabled = Boolean(item.disabled);
     btn.addEventListener("click", () => {
       closeContextMenu();
@@ -67,6 +179,7 @@ export function openContextMenu(x, y, items) {
     });
     menu.appendChild(btn);
   }
+  enableArrowNav(menu, ".xlsx-context-item");
   document.body.appendChild(menu);
 
   // Keep the menu inside the viewport (getBoundingClientRect is 0 in JSDOM,
@@ -81,5 +194,12 @@ export function openContextMenu(x, y, items) {
 
   _menu = menu;
   _openedAt = Date.now();
+  // Keyboard users land on the first entry right away; mouse users are
+  // unaffected (hover/click still work). preventScroll avoids yanking the grid.
+  const first = menu.querySelector(".xlsx-context-item:not(:disabled)");
+  if (first && typeof first.focus === "function") {
+    try { first.focus({ preventScroll: true }); } catch (_) { first.focus(); }
+  }
+  if (typeof safeCreateIcons === "function") safeCreateIcons();
   return menu;
 }