oss/miniflux-v2
oss/miniflux-v2
1
0
Fork 0
mirror of https://github.com/miniflux/v2.git synced 2025-09-15 18:57:04 +00:00
Code Wiki Activity

add keyboard shortcut and aria attribute to menu button

Browse source
This commit is contained in:
krvpb024 2024-02-07 16:54:11 +08:00 • committed by Frédéric Guillot
parent bd573957e0
commit 6eac968083
4 changed files with 53 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

40
internal/ui/static/js/app.js
View file

@ -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)

18
internal/ui/static/js/bootstrap.js vendored
View file

@ -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");