diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js index 1d8d0e12..30d841ad 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js @@ -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); diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/ui-core.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/ui-core.js index 814e2735..3d256f0e 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/ui-core.js +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/ui-core.js @@ -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); }