From 993ab2587eb344b9de6d08bd7146c96ac36b6b08 Mon Sep 17 00:00:00 2001
From: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
Date: Tue, 3 Jan 2023 11:40:25 +0100
Subject: [PATCH] A11y: Fix accessibility in menu icon on small screens
 (#60844)

---
 public/app/core/components/NavBar/NavBar.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/public/app/core/components/NavBar/NavBar.tsx b/public/app/core/components/NavBar/NavBar.tsx
index 9fc506b3ef0..d0a5e58ac86 100644
--- a/public/app/core/components/NavBar/NavBar.tsx
+++ b/public/app/core/components/NavBar/NavBar.tsx
@@ -7,7 +7,7 @@ import { useLocation } from 'react-router-dom';
 
 import { GrafanaTheme2, NavModelItem, NavSection } from '@grafana/data';
 import { config, locationSearchToObject, locationService, reportInteraction } from '@grafana/runtime';
-import { Icon, useTheme2, CustomScrollbar } from '@grafana/ui';
+import { useTheme2, CustomScrollbar, IconButton } from '@grafana/ui';
 import { getKioskMode } from 'app/core/navigation/kiosk';
 import { useSelector } from 'app/types';
 
@@ -90,8 +90,14 @@ export const NavBar = React.memo(() => {
           }}
         >
           <FocusScope>
-            <div className={styles.mobileSidemenuLogo} onClick={() => setMenuOpen(!menuOpen)} key="hamburger">
-              <Icon name="bars" size="xl" />
+            <div className={styles.mobileSidemenuLogo} key="hamburger">
+              <IconButton
+                name="bars"
+                tooltip="Toggle menu"
+                tooltipPlacement="bottom"
+                size="xl"
+                onClick={() => setMenuOpen(!menuOpen)}
+              />
             </div>
 
             <NavBarToggle
@@ -212,7 +218,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
   }),
   mobileSidemenuLogo: css({
     alignItems: 'center',
-    cursor: 'pointer',
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',