Add keyboard shortcut and aria attribute to menu button

internal/template/templates/common/layout.html

@@ -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" }}">

internal/ui/static/css/common.css

@@ -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;
     }

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)

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