fix(ui): close mobile overlays predictably

This commit is contained in:
sjg
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 = {}) { function navigateToTab(name, options = {}) {
window.trxUi?.closeMobileOverlays?.();
const { updateHistory = true, replaceHistory = false } = options; const { updateHistory = true, replaceHistory = false } = options;
if (authEnabled && !authRole && name !== "main") { if (authEnabled && !authRole && name !== "main") {
showAuthGate(false); showAuthGate(false);
@@ -254,6 +254,14 @@
menu.id = "mobile-more-menu"; menu.id = "mobile-more-menu";
menu.className = "mobile-more-menu"; menu.className = "mobile-more-menu";
menu.setAttribute("role", "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) => { ["statistics", "recorder", "settings", "about"].forEach((tabName) => {
const source = nav.querySelector(`[data-tab="${tabName}"]`); const source = nav.querySelector(`[data-tab="${tabName}"]`);
if (!source) return; if (!source) return;
@@ -264,15 +272,23 @@
item.textContent = source.textContent.trim(); item.textContent = source.textContent.trim();
item.addEventListener("click", () => { item.addEventListener("click", () => {
if (typeof window.navigateToTab === "function") window.navigateToTab(tabName); if (typeof window.navigateToTab === "function") window.navigateToTab(tabName);
menu.classList.remove("is-open"); closeMore();
more.setAttribute("aria-expanded", "false");
}); });
menu.appendChild(item); menu.appendChild(item);
}); });
more.addEventListener("click", () => { more.addEventListener("click", () => {
const open = menu.classList.toggle("is-open"); const open = menu.classList.toggle("is-open");
more.setAttribute("aria-expanded", String(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); nav.append(more, menu);
} }