From 265ba2151a41c2bebf7c0164601b4ce8f40a722c Mon Sep 17 00:00:00 2001
From: Philipp Ahrendt <philipp.ahrendt@cloudogu.com>
Date: Fri, 15 Nov 2024 17:09:55 +0100
Subject: [PATCH] Improve accesibility of navbar

- Description of logout button is read once
- SCM-Manager logo is better decribed for assistive technologies
- The state of the mobile menu is better accessible
---
 gradle/changelog/improve-accesibility-navbar.yaml       | 6 ++++++
 scm-ui/ui-webapp/public/locales/de/commons.json         | 2 +-
 scm-ui/ui-webapp/public/locales/en/commons.json         | 2 +-
 scm-ui/ui-webapp/src/components/HeaderButtonContent.tsx | 2 +-
 scm-ui/ui-webapp/src/containers/NavigationBar.tsx       | 3 ++-
 5 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 gradle/changelog/improve-accesibility-navbar.yaml

diff --git a/gradle/changelog/improve-accesibility-navbar.yaml b/gradle/changelog/improve-accesibility-navbar.yaml
new file mode 100644
index 0000000000..fd96af68a3
--- /dev/null
+++ b/gradle/changelog/improve-accesibility-navbar.yaml
@@ -0,0 +1,6 @@
+- type: fixed
+  description: Enhanced alt-text describing logo of SCM-Manager in nav bar
+- type: fixed
+  description: Trigger and menu for mobile mode use correct aria attributes
+- type: fixed
+  description: Logout-button exposes one description to assistive technologies
diff --git a/scm-ui/ui-webapp/public/locales/de/commons.json b/scm-ui/ui-webapp/public/locales/de/commons.json
index 7f7cf97410..d83b92e1ae 100644
--- a/scm-ui/ui-webapp/public/locales/de/commons.json
+++ b/scm-ui/ui-webapp/public/locales/de/commons.json
@@ -105,7 +105,7 @@
     "alt": "Lade ..."
   },
   "logo": {
-    "alt": "SCM-Manager"
+    "alt": "Logo des SCM-Manager: abstrahierter, geometrischer Schmetterling"
   },
   "primary-navigation": {
     "repositories": "Repositories",
diff --git a/scm-ui/ui-webapp/public/locales/en/commons.json b/scm-ui/ui-webapp/public/locales/en/commons.json
index ce9992ac01..fada7c04d8 100644
--- a/scm-ui/ui-webapp/public/locales/en/commons.json
+++ b/scm-ui/ui-webapp/public/locales/en/commons.json
@@ -106,7 +106,7 @@
     "alt": "Loading ..."
   },
   "logo": {
-    "alt": "SCM-Manager"
+    "alt": "Logo of SCM-Manager: an abstract, geometrical butterfly"
   },
   "primary-navigation": {
     "repositories": "Repositories",
diff --git a/scm-ui/ui-webapp/src/components/HeaderButtonContent.tsx b/scm-ui/ui-webapp/src/components/HeaderButtonContent.tsx
index b9368020b2..70df3f7ca7 100644
--- a/scm-ui/ui-webapp/src/components/HeaderButtonContent.tsx
+++ b/scm-ui/ui-webapp/src/components/HeaderButtonContent.tsx
@@ -28,7 +28,7 @@ export const headerButtonContentClassName =
 
 const HeaderButtonContent: FC<Props> = ({ burgerMode, icon, label }) => (
   <>
-    <Icon title={label} name={icon} color="inherit" className={burgerMode ? "is-size-5" : "is-size-4"} />
+    <Icon name={icon} color="inherit" className={burgerMode ? "is-size-5" : "is-size-4"} />
     <span>{" " + label}</span>
   </>
 );
diff --git a/scm-ui/ui-webapp/src/containers/NavigationBar.tsx b/scm-ui/ui-webapp/src/containers/NavigationBar.tsx
index e043980059..ddbda2a810 100644
--- a/scm-ui/ui-webapp/src/containers/NavigationBar.tsx
+++ b/scm-ui/ui-webapp/src/containers/NavigationBar.tsx
@@ -121,7 +121,8 @@ const NavigationBar: FC<Props> = ({ links }) => {
           </LogoItem>
           <button
             className={classNames("navbar-burger", { "is-active": burgerActive })}
-            aria-expanded="true"
+            aria-haspopup="menu"
+            aria-expanded={burgerActive}
             onClick={() => setBurgerActive((active) => !active)}
             aria-label={t("primary-navigation.navbarBurger")}
           >