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

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