Chore: Low hanging a11y fruits (#37783)

* 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

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}`,

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

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">

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}>
+        <section className={className} onClick={onClick} aria-label={ariaLabel}>
-          <i className="fa" />
+          <i aria-hidden className="fa" />
           <span className="panel-info-corner-inner" />
-        </div>
+        </section>
       </Tooltip>
     );
   }

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>
             )}
           </>

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;

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