Sidemenu: Various accessibility improvements (#38823)

public/app/core/components/sidemenu/BottomSection.tsx

@@ -75,7 +75,7 @@ export default function BottomSection() {
             url={link.url}
           >
             {link.icon && <Icon name={link.icon as IconName} size="xl" />}
-            {link.img && <img src={link.img} />}
+            {link.img && <img src={link.img} alt={`${link.text} logo`} />}
           </SideMenuItem>
         );
       })}

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 = <a onClick={onClick}>{linkContent}</a>;
+  let element = (
+    <button className={resetButtonStyles} onClick={onClick}>
+      {linkContent}
+    </button>
+  );
   if (url) {
-    anchor =
+    element =
       !target && url.startsWith('/') ? (
         <Link onClick={onClick} href={url}>
           {linkContent}
@@ -38,7 +47,7 @@ const DropDownChild = ({ isDivider = false, icon, onClick, target, text, url }:
       );
   }
 
-  return isDivider ? <li data-testid="dropdown-child-divider" className="divider" /> : <li>{anchor}</li>;
+  return isDivider ? <li data-testid="dropdown-child-divider" className="divider" /> : <li>{element}</li>;
 };
 
 export default DropDownChild;

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 = <span className="sidemenu-item-text">{headerText}</span>;
   const header = headerUrl ? (
     <Link href={headerUrl} onClick={onHeaderClick} className="side-menu-header-link">
       {headerContent}
     </Link>
   ) : (
-    <a onClick={onHeaderClick} className="side-menu-header-link">
+    <button onClick={onHeaderClick} className={cx(resetButtonStyles, 'side-menu-header-link')}>
       {headerContent}
-    </a>
+    </button>
   );
 
   const menuClass = css`

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(
+  const resetButtonStyles = css`
-    () =>
+    background-color: transparent;
-      css`
+  `;
-        background-color: transparent;
-      `
-  );
 
   const anchor = url ? (
     <Link

public/app/core/components/sidemenu/TopSection.tsx

@@ -29,7 +29,7 @@ const TopSection = () => {
             url={link.url}
           >
             {link.icon && <Icon name={link.icon as IconName} size="xl" />}
-            {link.img && <img src={link.img} />}
+            {link.img && <img src={link.img} alt={`${link.text} logo`} />}
           </SideMenuItem>
         );
       })}

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;

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;
       }
     }