fix(ui): close mobile overlays predictably

2026-08-01 11:18:37 +02:00
parent 1540ca5b4e
commit f3eeddff7c
2 changed files with 19 additions and 2 deletions
@@ -4654,6 +4654,7 @@ function _initMapWhenReady() {
 }

 function navigateToTab(name, options = {}) {
+  window.trxUi?.closeMobileOverlays?.();
  const { updateHistory = true, replaceHistory = false } = options;
  if (authEnabled && !authRole && name !== "main") {
    showAuthGate(false);
@@ -254,6 +254,14 @@
    menu.id = "mobile-more-menu";
    menu.className = "mobile-more-menu";
    menu.setAttribute("role", "menu");
+    more.setAttribute("aria-controls", menu.id);
+    const closeMore = (restoreFocus = false) => {
+      if (!menu.classList.contains("is-open")) return;
+      menu.classList.remove("is-open");
+      more.setAttribute("aria-expanded", "false");
+      if (restoreFocus) more.focus();
+    };
+    api.closeMobileOverlays = closeMore;
    ["statistics", "recorder", "settings", "about"].forEach((tabName) => {
      const source = nav.querySelector(`[data-tab="${tabName}"]`);
      if (!source) return;
@@ -264,15 +272,23 @@
      item.textContent = source.textContent.trim();
      item.addEventListener("click", () => {
        if (typeof window.navigateToTab === "function") window.navigateToTab(tabName);
-        menu.classList.remove("is-open");
-        more.setAttribute("aria-expanded", "false");
+        closeMore();
      });
      menu.appendChild(item);
    });
    more.addEventListener("click", () => {
      const open = menu.classList.toggle("is-open");
      more.setAttribute("aria-expanded", String(open));
+      if (open) menu.querySelector('[role="menuitem"]')?.focus();
    });
+    document.addEventListener("click", (event) => {
+      if (!menu.contains(event.target) && !more.contains(event.target)) closeMore();
+    });
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") closeMore(true);
+    });
+    window.addEventListener("resize", () => closeMore());
+    window.addEventListener("popstate", () => closeMore());
    nav.append(more, menu);
  }