From 30e0b2f85115aeeb5943f2f37d487cf36178abbe Mon Sep 17 00:00:00 2001
From: Otto Richter <git@otto.splvs.net>
Date: Sun, 18 Feb 2024 16:48:32 +0100
Subject: [PATCH] Label and focus styling for mobile menu button

---
 options/locale/locale_en-US.ini | 1 +
 templates/base/head_navbar.tmpl | 2 +-
 web_src/css/modules/navbar.css  | 4 ++--
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 0a6b1e0d82..31ecf6bc1a 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -26,6 +26,7 @@ enable_javascript = This website requires JavaScript.
 toc = Table of Contents
 licenses = Licenses
 return_to_gitea = Return to Forgejo
+toggle_menu = Toggle Menu
 
 username = Username
 email = Email address
diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index b4a93688e3..fb0301aeb1 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -20,7 +20,7 @@
 				</div>
 			</a>
 			{{end}}
-			<button class="item gt-w-auto ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle">{{svg "octicon-three-bars"}}</button>
+			<button class="item gt-w-auto ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle" aria-label="{{ctx.Locale.Tr "toggle_menu"}}">{{svg "octicon-three-bars"}}</button>
 		</div>
 
 		<!-- navbar links non-mobile -->
diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css
index b6fd2ff20a..11020df359 100644
--- a/web_src/css/modules/navbar.css
+++ b/web_src/css/modules/navbar.css
@@ -41,8 +41,8 @@
   justify-content: stretch;
 }
 
-#navbar a.item:hover,
-#navbar button.item:hover {
+#navbar a.item:hover, #navbar a.item:focus,
+#navbar button.item:hover, #navbar button.item:focus {
   background: var(--color-nav-hover-bg);
 }