From 1735f9a56b50f4d0244696aead0e459c62a9b9e3 Mon Sep 17 00:00:00 2001
From: Maria Alexandra <239999+axelavargas@users.noreply.github.com>
Date: Mon, 16 Aug 2021 15:10:57 +0200
Subject: [PATCH] Navigation: Add aria-label to top section links to improve
 a11y for screen readers (#36953)

---
 .../src/selectors/pages.ts                    |   2 +-
 .../app/core/components/sidemenu/SideMenu.tsx |   2 +-
 .../sidemenu/TopSectionItem.test.tsx          |   9 +-
 .../components/sidemenu/TopSectionItem.tsx    |  11 +-
 .../TopSectionItem.test.tsx.snap              | 151 ------------------
 .../features/explore/ExplorePaneContainer.tsx |   2 +-
 6 files changed, 17 insertions(+), 160 deletions(-)
 delete mode 100644 public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap

diff --git a/packages/grafana-e2e-selectors/src/selectors/pages.ts b/packages/grafana-e2e-selectors/src/selectors/pages.ts
index d22c25ca06d..a99217651a6 100644
--- a/packages/grafana-e2e-selectors/src/selectors/pages.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/pages.ts
@@ -133,7 +133,7 @@ export const Pages = {
   Explore: {
     url: '/explore',
     General: {
-      container: 'Explore',
+      container: 'data-testid Explore',
       graph: 'Explore Graph',
       table: 'Explore Table',
       scrollBar: () => '.scrollbar-view',
diff --git a/public/app/core/components/sidemenu/SideMenu.tsx b/public/app/core/components/sidemenu/SideMenu.tsx
index 026c9e150e7..316ed7425c9 100644
--- a/public/app/core/components/sidemenu/SideMenu.tsx
+++ b/public/app/core/components/sidemenu/SideMenu.tsx
@@ -24,7 +24,7 @@ export const SideMenu: FC = React.memo(() => {
   }
 
   return (
-    <nav className="sidemenu" data-testid="sidemenu">
+    <nav className="sidemenu" data-testid="sidemenu" aria-label="Main menu">
       <a href={homeUrl} className="sidemenu__logo" key="logo">
         <Branding.MenuLogo />
       </a>
diff --git a/public/app/core/components/sidemenu/TopSectionItem.test.tsx b/public/app/core/components/sidemenu/TopSectionItem.test.tsx
index e6b9634a7f3..5fd71521ad7 100644
--- a/public/app/core/components/sidemenu/TopSectionItem.test.tsx
+++ b/public/app/core/components/sidemenu/TopSectionItem.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import TopSectionItem from './TopSectionItem';
 import { MemoryRouter } from 'react-router-dom';
 
@@ -15,7 +15,7 @@ const setup = (propOverrides?: object) => {
     propOverrides
   );
 
-  return mount(
+  return render(
     <MemoryRouter initialEntries={[{ pathname: '/', key: 'testKey' }]}>
       <TopSectionItem {...props} />
     </MemoryRouter>
@@ -24,7 +24,8 @@ const setup = (propOverrides?: object) => {
 
 describe('Render', () => {
   it('should render component', () => {
-    const wrapper = setup();
-    expect(wrapper).toMatchSnapshot();
+    setup();
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+    expect(screen.getByRole('menu')).toHaveTextContent('Hello');
   });
 });
diff --git a/public/app/core/components/sidemenu/TopSectionItem.tsx b/public/app/core/components/sidemenu/TopSectionItem.tsx
index d3ef287aa6b..dba932fc717 100644
--- a/public/app/core/components/sidemenu/TopSectionItem.tsx
+++ b/public/app/core/components/sidemenu/TopSectionItem.tsx
@@ -17,11 +17,18 @@ const TopSectionItem: FC<Props> = ({ link, onClick }) => {
   );
 
   const anchor = link.url ? (
-    <Link className="sidemenu-link" href={link.url} target={link.target} onClick={onClick}>
+    <Link
+      className="sidemenu-link"
+      href={link.url}
+      target={link.target}
+      aria-label={link.text}
+      onClick={onClick}
+      aria-haspopup="true"
+    >
       {linkContent}
     </Link>
   ) : (
-    <a className="sidemenu-link" onClick={onClick}>
+    <a className="sidemenu-link" onClick={onClick} aria-label={link.text}>
       {linkContent}
     </a>
   );
diff --git a/public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap
deleted file mode 100644
index e41b5ba9292..00000000000
--- a/public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap
+++ /dev/null
@@ -1,151 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "key": "testKey",
-        "pathname": "/",
-      },
-    ]
-  }
->
-  <Router
-    history={
-      Object {
-        "action": "POP",
-        "block": [Function],
-        "canGo": [Function],
-        "createHref": [Function],
-        "entries": Array [
-          Object {
-            "hash": "",
-            "key": "testKey",
-            "pathname": "/",
-            "search": "",
-          },
-        ],
-        "go": [Function],
-        "goBack": [Function],
-        "goForward": [Function],
-        "index": 0,
-        "length": 1,
-        "listen": [Function],
-        "location": Object {
-          "hash": "",
-          "key": "testKey",
-          "pathname": "/",
-          "search": "",
-        },
-        "push": [Function],
-        "replace": [Function],
-      }
-    }
-  >
-    <TopSectionItem
-      link={
-        Object {
-          "icon": "cloud",
-          "text": "Hello",
-          "url": "/asd",
-        }
-      }
-    >
-      <div
-        className="sidemenu-item dropdown"
-      >
-        <Link
-          className="sidemenu-link"
-          href="/asd"
-        >
-          <Link
-            className="sidemenu-link"
-            to="/asd"
-          >
-            <LinkAnchor
-              className="sidemenu-link"
-              href="/asd"
-              navigate={[Function]}
-            >
-              <a
-                className="sidemenu-link"
-                href="/asd"
-                onClick={[Function]}
-              >
-                <span
-                  className="icon-circle sidemenu-icon"
-                >
-                  <Icon
-                    name="cloud"
-                    size="xl"
-                  >
-                    <div
-                      className="css-1vzus6i-Icon"
-                    >
-                      <InlineSVG
-                        cacheRequests={true}
-                        className="css-sr6nr"
-                        height={24}
-                        src="public/img/iconsunicons/cloud.svg"
-                        uniquifyIDs={false}
-                        width={24}
-                      />
-                    </div>
-                  </Icon>
-                </span>
-              </a>
-            </LinkAnchor>
-          </Link>
-        </Link>
-        <SideMenuDropDown
-          link={
-            Object {
-              "icon": "cloud",
-              "text": "Hello",
-              "url": "/asd",
-            }
-          }
-        >
-          <ul
-            className="dropdown-menu dropdown-menu--sidemenu"
-            role="menu"
-          >
-            <li
-              className="side-menu-header"
-            >
-              <Link
-                className="side-menu-header-link"
-                href="/asd"
-              >
-                <Link
-                  className="side-menu-header-link"
-                  to="/asd"
-                >
-                  <LinkAnchor
-                    className="side-menu-header-link"
-                    href="/asd"
-                    navigate={[Function]}
-                  >
-                    <a
-                      className="side-menu-header-link"
-                      href="/asd"
-                      onClick={[Function]}
-                    >
-                      <span
-                        className="sidemenu-item-text"
-                      >
-                        Hello
-                      </span>
-                    </a>
-                  </LinkAnchor>
-                </Link>
-              </Link>
-            </li>
-          </ul>
-        </SideMenuDropDown>
-      </div>
-    </TopSectionItem>
-  </Router>
-</MemoryRouter>
-`;
diff --git a/public/app/features/explore/ExplorePaneContainer.tsx b/public/app/features/explore/ExplorePaneContainer.tsx
index a521fd83b10..f303361460b 100644
--- a/public/app/features/explore/ExplorePaneContainer.tsx
+++ b/public/app/features/explore/ExplorePaneContainer.tsx
@@ -86,7 +86,7 @@ export class ExplorePaneContainerUnconnected extends React.PureComponent<Props>
   render() {
     const exploreClass = this.props.split ? 'explore explore-split' : 'explore';
     return (
-      <div className={exploreClass} ref={this.getRef} aria-label={selectors.pages.Explore.General.container}>
+      <div className={exploreClass} ref={this.getRef} data-testid={selectors.pages.Explore.General.container}>
         {this.props.initialized && <Explore exploreId={this.props.exploreId} />}
       </div>
     );