From 6325bd89b231b537a4d13deda08fc65a923d59dd Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 12 Aug 2021 11:39:47 +0200
Subject: [PATCH] Chore: Low hanging a11y fruits (#37783) (#37831)

* aria-label disallowed on header element

* A11y issues for Getting Started and panel header

* Add unique identifier to search navigation

* Add dashboard header markup

* Fix news panel low hanging fruits

(cherry picked from commit b6ede8d96db820e025dbe63d0d123956f1f00a11)

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
---
 packages/grafana-e2e-selectors/src/selectors/components.ts | 2 +-
 .../grafana-ui/src/components/PageLayout/PageToolbar.tsx   | 2 +-
 .../dashboard/dashgrid/PanelHeader/PanelHeader.tsx         | 2 +-
 .../dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx   | 6 +++---
 public/app/plugins/panel/gettingstarted/GettingStarted.tsx | 4 ++--
 .../plugins/panel/gettingstarted/components/DocsCard.tsx   | 7 +++++--
 public/app/plugins/panel/news/NewsPanel.tsx                | 2 ++
 7 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index 7997356efb2..c09f0548eba 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/components.ts
@@ -44,7 +44,7 @@ export const Components = {
   },
   Panels: {
     Panel: {
-      title: (title: string) => `Panel header ${title}`,
+      title: (title: string) => `data-testid Panel header ${title}`,
       headerItems: (item: string) => `Panel header item ${item}`,
       containerByTitle: (title: string) => `${title} panel`,
       headerCornerInfo: (mode: string) => `Panel header ${mode}`,
diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
index 86c41af1c10..ddb1212f7be 100644
--- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
+++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
@@ -63,7 +63,7 @@ export const PageToolbar: FC<Props> = React.memo(
             />
           </div>
         )}
-        <nav className={styles.navElement}>
+        <nav aria-label="Search links" className={styles.navElement}>
           {parent && parentHref && (
             <>
               <Link
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
index 32f37f6490f..9affee3d3c8 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -44,7 +44,7 @@ export const PanelHeader: FC<Props> = ({ panel, error, isViewing, isEditing, dat
         error={error}
       />
       <div className={className}>
-        <PanelHeaderMenuTrigger aria-label={selectors.components.Panels.Panel.title(title)}>
+        <PanelHeaderMenuTrigger data-testid={selectors.components.Panels.Panel.title(title)}>
           {({ closeMenu, panelMenuOpen }) => {
             return (
               <div className="panel-title">
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
index 6e70c6c282c..31a21a441ea 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
@@ -84,10 +84,10 @@ export class PanelHeaderCorner extends Component<Props> {
 
     return (
       <Tooltip content={content} placement="top-start" theme={theme}>
-        <div className={className} onClick={onClick} aria-label={ariaLabel}>
-          <i className="fa" />
+        <section className={className} onClick={onClick} aria-label={ariaLabel}>
+          <i aria-hidden className="fa" />
           <span className="panel-info-corner-inner" />
-        </div>
+        </section>
       </Tooltip>
     );
   }
diff --git a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx
index 7203b1ea62b..9f23ec1fd3a 100644
--- a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx
+++ b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx
@@ -99,7 +99,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
             </div>
             {currentStep === steps.length - 1 && (
               <div className={cx(styles.backForwardButtons, styles.previous)} onClick={this.onPreviousClick}>
-                <Button icon="angle-left" variant="secondary" />
+                <Button aria-label="To advanced tutorials" icon="angle-left" variant="secondary" />
               </div>
             )}
             <div className={styles.content}>
@@ -107,7 +107,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
             </div>
             {currentStep < steps.length - 1 && (
               <div className={cx(styles.backForwardButtons, styles.forward)} onClick={this.onForwardClick}>
-                <Button icon="angle-right" variant="secondary" />
+                <Button aria-label="To basic tutorials" icon="angle-right" variant="secondary" />
               </div>
             )}
           </>
diff --git a/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx b/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx
index 6b4d57b22e5..2a143c61045 100644
--- a/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx
+++ b/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx
@@ -16,7 +16,7 @@ export const DocsCard: FC<Props> = ({ card }) => {
   return (
     <div className={styles.card}>
       <div className={cardContent}>
-        <a href={`${card.href}?utm_source=grafana_gettingstarted`}>
+        <a href={`${card.href}?utm_source=grafana_gettingstarted`} className={styles.url}>
           <div className={styles.heading}>{card.done ? 'complete' : card.heading}</div>
           <h4 className={styles.title}>{card.title}</h4>
           <div>
@@ -26,7 +26,7 @@ export const DocsCard: FC<Props> = ({ card }) => {
       </div>
       <a
         href={`${card.learnHref}?utm_source=grafana_gettingstarted`}
-        className={styles.url}
+        className={styles.learnUrl}
         target="_blank"
         rel="noreferrer"
       >
@@ -56,6 +56,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme, complete: boolean) => {
       margin-bottom: ${theme.spacing.md};
     `,
     url: css`
+      display: inline-block;
+    `,
+    learnUrl: css`
       border-top: 1px solid ${theme.colors.border1};
       position: absolute;
       bottom: 0;
diff --git a/public/app/plugins/panel/news/NewsPanel.tsx b/public/app/plugins/panel/news/NewsPanel.tsx
index f28d33489a8..54c59ff8bb5 100755
--- a/public/app/plugins/panel/news/NewsPanel.tsx
+++ b/public/app/plugins/panel/news/NewsPanel.tsx
@@ -83,6 +83,7 @@ export class NewsPanel extends PureComponent<Props, State> {
             <article key={index} className={cx(styles.item, useWideLayout && styles.itemWide)}>
               {showImage && item.ogImage && (
                 <a
+                  tabIndex={-1}
                   href={textUtil.sanitizeUrl(item.link)}
                   target="_blank"
                   rel="noopener noreferrer"
@@ -152,6 +153,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
   `,
   link: css`
     color: ${theme.colors.text.link};
+    display: inline-block;
 
     &:hover {
       color: ${theme.colors.text.link};