From 5b6a4e880b8d461e3f3913c71be9e9b04861efee Mon Sep 17 00:00:00 2001
From: Laura Benz <48948963+L-M-K-B@users.noreply.github.com>
Date: Tue, 23 Jan 2024 12:02:48 +0100
Subject: [PATCH] Nav: Fix main a11y issues (#80309)

* refactor: add nav announcement for screenreader

* refactor: add aria label

* refactor: add more aria labels

* refactor: aria labels

* refactor: remove aria-labels

* refactor: add aria-live

* refactor: add translations

* refactor: repair empty message

* refactor: repair empty message

* refactor: remove translation of empty message

* refactor: clean up

* refactor: change translation
---
 .../app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx | 2 +-
 .../core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx | 4 +++-
 public/locales/de-DE/grafana.json                             | 1 +
 public/locales/en-US/grafana.json                             | 1 +
 public/locales/es-ES/grafana.json                             | 1 +
 public/locales/fr-FR/grafana.json                             | 1 +
 public/locales/pseudo-LOCALE/grafana.json                     | 1 +
 public/locales/zh-Hans/grafana.json                           | 1 +
 8 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx
index 7006f9cacd0..a7df60a46f2 100644
--- a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx
+++ b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx
@@ -60,7 +60,7 @@ export const MegaMenu = React.memo(
         </div>
         <nav className={styles.content}>
           <CustomScrollbar showScrollIndicators hideHorizontalTrack>
-            <ul className={styles.itemList}>
+            <ul className={styles.itemList} aria-label={t('navigation.megamenu.list-label', 'Navigation')}>
               {navItems.map((link, index) => (
                 <Stack key={link.text} direction={index === 0 ? 'row-reverse' : 'row'} alignItems="center">
                   {index === 0 && (
diff --git a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx
index 59c5ba41aa4..d91514f8787 100644
--- a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx
+++ b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx
@@ -121,7 +121,9 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
                 />
               ))
           ) : (
-            <div className={styles.emptyMessage}>{link.emptyMessage}</div>
+            <div className={styles.emptyMessage} aria-live="polite">
+              {link.emptyMessage}
+            </div>
           )}
         </ul>
       )}
diff --git a/public/locales/de-DE/grafana.json b/public/locales/de-DE/grafana.json
index ee6072bc685..80d9534dce4 100644
--- a/public/locales/de-DE/grafana.json
+++ b/public/locales/de-DE/grafana.json
@@ -974,6 +974,7 @@
     "megamenu": {
       "close": "Menü schließen",
       "dock": "Menü andocken",
+      "list-label": "",
       "undock": ""
     },
     "toolbar": {
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 186ed014bf0..d7dc250426c 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -974,6 +974,7 @@
     "megamenu": {
       "close": "Close menu",
       "dock": "Dock menu",
+      "list-label": "Navigation",
       "undock": "Undock menu"
     },
     "toolbar": {
diff --git a/public/locales/es-ES/grafana.json b/public/locales/es-ES/grafana.json
index 0b86527be65..047df60e828 100644
--- a/public/locales/es-ES/grafana.json
+++ b/public/locales/es-ES/grafana.json
@@ -980,6 +980,7 @@
     "megamenu": {
       "close": "Cerrar menú",
       "dock": "Anclar el menú",
+      "list-label": "",
       "undock": "Desanclar el menú"
     },
     "toolbar": {
diff --git a/public/locales/fr-FR/grafana.json b/public/locales/fr-FR/grafana.json
index 25c2d6664ed..88f75d17d44 100644
--- a/public/locales/fr-FR/grafana.json
+++ b/public/locales/fr-FR/grafana.json
@@ -980,6 +980,7 @@
     "megamenu": {
       "close": "Fermer le menu",
       "dock": "Ancrer le menu",
+      "list-label": "",
       "undock": ""
     },
     "toolbar": {
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index c6d9a975761..e57f0726aa4 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -974,6 +974,7 @@
     "megamenu": {
       "close": "Cľőşę męʼnū",
       "dock": "Đőčĸ męʼnū",
+      "list-label": "Ńävįģäŧįőʼn",
       "undock": "Ůʼnđőčĸ męʼnū"
     },
     "toolbar": {
diff --git a/public/locales/zh-Hans/grafana.json b/public/locales/zh-Hans/grafana.json
index 31b192c5368..94100e46fd0 100644
--- a/public/locales/zh-Hans/grafana.json
+++ b/public/locales/zh-Hans/grafana.json
@@ -968,6 +968,7 @@
     "megamenu": {
       "close": "关闭菜单",
       "dock": "停靠菜单",
+      "list-label": "",
       "undock": ""
     },
     "toolbar": {