summaryrefslogtreecommitdiff
path: root/internal/ui/static/js
diff options
context:
space:
mode:
authorGravatar krvpb024 <krvpb024@protonmail.com> 2024-02-07 16:54:11 +0800
committerGravatar Frédéric Guillot <f@miniflux.net> 2024-02-07 21:56:24 -0800
commit6eac968083ec6db095cb8b3d94f1cfaee2f3bdf1 (patch)
tree79a627e142d045d6b9a1199f7d3e9cdb036bb4cf /internal/ui/static/js
parentbd573957e03f2de1eb5b3da752a76f62052a2161 (diff)
downloadv2-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.js40
-rw-r--r--internal/ui/static/js/bootstrap.js18
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");