diff options
author | 2024-02-07 16:54:11 +0800 | |
---|---|---|
committer | 2024-02-07 21:56:24 -0800 | |
commit | 6eac968083ec6db095cb8b3d94f1cfaee2f3bdf1 (patch) | |
tree | 79a627e142d045d6b9a1199f7d3e9cdb036bb4cf /internal/ui/static/js | |
parent | bd573957e03f2de1eb5b3da752a76f62052a2161 (diff) | |
download | v2-6eac968083ec6db095cb8b3d94f1cfaee2f3bdf1.tar.gz v2-6eac968083ec6db095cb8b3d94f1cfaee2f3bdf1.tar.zst v2-6eac968083ec6db095cb8b3d94f1cfaee2f3bdf1.zip |
add keyboard shortcut and aria attribute to menu button
Diffstat (limited to 'internal/ui/static/js')
-rw-r--r-- | internal/ui/static/js/app.js | 40 | ||||
-rw-r--r-- | internal/ui/static/js/bootstrap.js | 18 |
2 files changed, 46 insertions, 12 deletions
diff --git a/internal/ui/static/js/app.js b/internal/ui/static/js/app.js index 9d7dfad2..5e457183 100644 --- a/internal/ui/static/js/app.js +++ b/internal/ui/static/js/app.js @@ -25,10 +25,46 @@ function onAuxClick(selector, callback, noPreventDefault) { }); } +// make logo element as button on mobile layout +function checkMenuToggleModeByLayout() { + const logoElement = document.querySelector(".logo"); + const homePageLinkElement = document.querySelector(".logo > a") + if (!logoElement) return + const logoToggleButtonLabel = logoElement.getAttribute("data-toggle-button-label") + + const navMenuElement = document.getElementById("header-menu"); + const navMenuElementIsExpanded = navMenuElement.classList.contains("js-menu-show") + + if (document.documentElement.clientWidth < 620) { + logoElement.setAttribute("role", "button"); + logoElement.setAttribute("tabindex", "0"); + logoElement.setAttribute("aria-label", logoToggleButtonLabel) + if (navMenuElementIsExpanded) { + logoElement.setAttribute("aria-expanded", "true") + } else { + logoElement.setAttribute("aria-expanded", "false") + } + homePageLinkElement.setAttribute("tabindex", "-1") + } else { + logoElement.removeAttribute("role"); + logoElement.removeAttribute("tabindex"); + logoElement.removeAttribute("aria-expanded"); + logoElement.removeAttribute("aria-label") + homePageLinkElement.removeAttribute("tabindex"); + } +} + // Show and hide the main menu on mobile devices. -function toggleMainMenu() { +function toggleMainMenu(event) { + if (event.type === "keydown" && !(event.key === "Enter" || event.key === " ")) { + return + } + if (event.currentTarget.getAttribute("role")) { + event.preventDefault() + } + let menu = document.querySelector(".header nav ul"); - let menuToggleButton = document.querySelector(".header button[aria-controls='header-menu']"); + let menuToggleButton = document.querySelector(".logo"); if (menu.classList.contains("js-menu-show")) { menu.classList.remove("js-menu-show") menuToggleButton.setAttribute("aria-expanded", false) diff --git a/internal/ui/static/js/bootstrap.js b/internal/ui/static/js/bootstrap.js index 82b83534..9f8b9364 100644 --- a/internal/ui/static/js/bootstrap.js +++ b/internal/ui/static/js/bootstrap.js @@ -111,16 +111,14 @@ document.addEventListener("DOMContentLoaded", () => { } }, true); - if (document.documentElement.clientWidth < 600) { - let logoElement = document.querySelector(".logo"); - if (logoElement) { - logoElement.setAttribute("role", "button"); - } - onClick(".logo", () => toggleMainMenu()); - onClick(".header nav li", (event) => onClickMainMenuListItem(event)); - } else { - onClick("button[aria-controls='header-menu']", () => toggleMainMenu()); - } + checkMenuToggleModeByLayout() + window.addEventListener("resize", checkMenuToggleModeByLayout, { passive: true }) + + const logoElement = document.querySelector(".logo") + logoElement.addEventListener("click", (event) => toggleMainMenu(event)); + logoElement.addEventListener("keydown", (event) => toggleMainMenu(event)); + + onClick(".header nav li", (event) => onClickMainMenuListItem(event)); if ("serviceWorker" in navigator) { let scriptElement = document.getElementById("service-worker-script"); |