IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

A11y: Fix accessibility in menu icon on small screens (#60844)

Browse Source
This commit is contained in:
Joao Silva 2023-01-03 11:40:25 +01:00 committed by GitHub
parent b8618723d0
commit 993ab2587e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/app/core/components/NavBar/NavBar.tsx
View File

@ -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',