southfox/miniflux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

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
Show stats Download patch file Download diff file Expand all files Collapse all files

10
internal/template/templates/common/layout.html
View file

@ -64,15 +64,13 @@
<a class="skip-to-content-link" href="#main">{{ t "skip_to_content" }}</a>
<header class="header">
<nav>
<div class="logo">
<div class="logo" data-toggle-button-label="{{ t "menu.title" }}">
<a aria-label="{{ t "menu.home_page" }}" href="{{ route .user.DefaultHomePage }}">
Mini<span>flux</span>
</a>
<button aria-controls="header-menu" aria-expanded="false" aria-label="{{ t "menu.title" }}">
<svg aria-label="{{ t "menu.title" }}" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
</svg>
</button>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
</svg>
</div>
<ul id="header-menu">
<li {{ if eq .menu "unread" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g u" }}">

22
internal/ui/static/css/common.css
View file

@ -95,21 +95,13 @@ a:hover {
flex-direction: column;
}
.header nav button[aria-controls="header-menu"] {
border: none;
background-color: transparent;
display: inline-block;
cursor: pointer;
}
.header nav button[aria-controls="header-menu"] svg {
.header nav .logo svg {
padding: 5px;
inline-size: 24px;
block-size: 24px;
translate: 0 2px;
}
.header nav button[aria-controls="header-menu"][aria-expanded="true"] svg {
.header nav .logo[aria-expanded="true"] svg {
rotate: 180deg;
}
@ -335,18 +327,10 @@ a:hover {
flex-direction: row;
}
.header nav button[aria-controls="header-menu"] {
.header .logo svg {
display: none;
}
.header nav button[aria-controls="header-menu"] svg {
rotate: -90deg;
}
.header nav button[aria-controls="header-menu"][aria-expanded="true"] svg {
rotate: 90deg;
}
.header ul:not(.js-menu-show), .header ul.js-menu-show {
display: revert;
}

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