From ea65e11c4467a1b7cdd81f3576aca101ef62185f Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Thu, 2 Sep 2021 14:17:57 +0100 Subject: [PATCH] Sidemenu: Various accessibility improvements (#38823) --- .../components/sidemenu/BottomSection.tsx | 2 +- .../components/sidemenu/DropDownChild.tsx | 15 ++++++-- .../components/sidemenu/SideMenuDropDown.tsx | 10 ++++-- .../core/components/sidemenu/SideMenuItem.tsx | 11 +++--- .../core/components/sidemenu/TopSection.tsx | 2 +- public/sass/components/_dropdown.scss | 35 ++++++++++++++----- public/sass/components/_sidemenu.scss | 7 ++-- 7 files changed, 53 insertions(+), 29 deletions(-) diff --git a/public/app/core/components/sidemenu/BottomSection.tsx b/public/app/core/components/sidemenu/BottomSection.tsx index 9c43c5de126..5677d5d670b 100644 --- a/public/app/core/components/sidemenu/BottomSection.tsx +++ b/public/app/core/components/sidemenu/BottomSection.tsx @@ -75,7 +75,7 @@ export default function BottomSection() { url={link.url} > {link.icon && } - {link.img && } + {link.img && {`${link.text}} ); })} diff --git a/public/app/core/components/sidemenu/DropDownChild.tsx b/public/app/core/components/sidemenu/DropDownChild.tsx index 4f0f2f903cf..c8ec712c198 100644 --- a/public/app/core/components/sidemenu/DropDownChild.tsx +++ b/public/app/core/components/sidemenu/DropDownChild.tsx @@ -16,6 +16,11 @@ const DropDownChild = ({ isDivider = false, icon, onClick, target, text, url }: const iconClassName = css` margin-right: ${theme.spacing(1)}; `; + const resetButtonStyles = css` + background-color: transparent; + border: none; + width: 100%; + `; const linkContent = ( <> @@ -24,9 +29,13 @@ const DropDownChild = ({ isDivider = false, icon, onClick, target, text, url }: ); - let anchor = {linkContent}; + let element = ( + + ); if (url) { - anchor = + element = !target && url.startsWith('/') ? ( {linkContent} @@ -38,7 +47,7 @@ const DropDownChild = ({ isDivider = false, icon, onClick, target, text, url }: ); } - return isDivider ?
  • :
  • {anchor}
    • ; + return isDivider ?
  • :
  • {element}
    • ; }; export default DropDownChild; diff --git a/public/app/core/components/sidemenu/SideMenuDropDown.tsx b/public/app/core/components/sidemenu/SideMenuDropDown.tsx index 2e6e6219f0c..bec8ecac45f 100644 --- a/public/app/core/components/sidemenu/SideMenuDropDown.tsx +++ b/public/app/core/components/sidemenu/SideMenuDropDown.tsx @@ -2,7 +2,7 @@ import React from 'react'; import DropDownChild from './DropDownChild'; import { NavModelItem } from '@grafana/data'; import { IconName, Link } from '@grafana/ui'; -import { css } from '@emotion/css'; +import { css, cx } from '@emotion/css'; interface Props { headerText: string; @@ -21,15 +21,19 @@ const SideMenuDropDown = ({ reverseDirection = false, subtitleText, }: Props) => { + const resetButtonStyles = css` + background-color: transparent; + font-size: inherit; + `; const headerContent = {headerText}; const header = headerUrl ? ( {headerContent} ) : ( - + ); const menuClass = css` diff --git a/public/app/core/components/sidemenu/SideMenuItem.tsx b/public/app/core/components/sidemenu/SideMenuItem.tsx index e4d815d1de9..7a39cdb583f 100644 --- a/public/app/core/components/sidemenu/SideMenuItem.tsx +++ b/public/app/core/components/sidemenu/SideMenuItem.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from 'react'; import SideMenuDropDown from './SideMenuDropDown'; -import { Link, useStyles2 } from '@grafana/ui'; +import { Link } from '@grafana/ui'; import { NavModelItem } from '@grafana/data'; import { css, cx } from '@emotion/css'; @@ -25,12 +25,9 @@ const SideMenuItem = ({ target, url, }: Props) => { - const resetButtonStyles = useStyles2( - () => - css` - background-color: transparent; - ` - ); + const resetButtonStyles = css` + background-color: transparent; + `; const anchor = url ? ( { url={link.url} > {link.icon && } - {link.img && } + {link.img && {`${link.text}} ); })} diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss index 4f4ced24bc6..8acb87b9449 100644 --- a/public/sass/components/_dropdown.scss +++ b/public/sass/components/_dropdown.scss @@ -74,7 +74,8 @@ // Links within the dropdown menu > li { - > a { + > a, + > button { display: block; padding: 3px 20px 3px 15px; clear: both; @@ -111,7 +112,8 @@ box-shadow: $menu-dropdown-shadow; margin-top: 0px; - > li > a { + > li > a, + > li > button { display: flex; padding: 5px 10px; border-left: 2px solid transparent; @@ -125,7 +127,8 @@ &--sidemenu { li.sidemenu-org-switcher { - > a { + > a, + > button { padding: 8px 10px 8px 15px; } } @@ -141,7 +144,11 @@ .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, -.dropdown-submenu:focus > a { +.dropdown-submenu:focus > a, +.dropdown-menu > li > button:hover, +.dropdown-menu > li > button:focus, +.dropdown-submenu:hover > button, +.dropdown-submenu:focus > button { text-decoration: none; color: $dropdownLinkColorHover; background-color: $dropdownLinkBackgroundHover; @@ -151,7 +158,10 @@ // ------------ .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, -.dropdown-menu > .active > a:focus { +.dropdown-menu > .active > a:focus, +.dropdown-menu > .active > button, +.dropdown-menu > .active > button:hover, +.dropdown-menu > .active > button:focus { color: $dropdownLinkColorActive; text-decoration: none; outline: 0; @@ -163,12 +173,17 @@ // Gray out text and ensure the hover/focus state remains gray .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, -.dropdown-menu > .disabled > a:focus { +.dropdown-menu > .disabled > a:focus, +.dropdown-menu > .disabled > button, +.dropdown-menu > .disabled > button:hover, +.dropdown-menu > .disabled > button:focus { color: $gray-2; } // Nuke hover/focus effects .dropdown-menu > .disabled > a:hover, -.dropdown-menu > .disabled > a:focus { +.dropdown-menu > .disabled > a:focus, +.dropdown-menu > .disabled > button:hover, +.dropdown-menu > .disabled > button:focus { text-decoration: none; background-color: transparent; background-image: none; // Remove CSS gradient @@ -269,7 +284,8 @@ // pointer-events: none; // font-size: 11px; // } -.dropdown-submenu:hover > a::after { +.dropdown-submenu:hover > a::after, +.dropdown-submenu:hover > button::after { border-left-color: $dropdownLinkColorHover; } @@ -314,7 +330,8 @@ } .dropdown-menu.dropdown-menu--new { - li a { + li a, + li button { padding: $spacer/2 $spacer; border-left: 2px solid $side-menu-bg; background: $side-menu-bg; diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 9271b49dcd9..afa778e7304 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -254,10 +254,6 @@ li.sidemenu-org-switcher { } .sidemenu-link { - text-align: left; - } - - .sidemenu-icon { display: none; } @@ -268,7 +264,8 @@ li.sidemenu-org-switcher { float: none; margin-bottom: $space-sm; - > li > a { + > li > a, + > li > button { padding-left: 15px; } }