From e07f115f9880b70f14fc4698b32bb375fa3d7ee8 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Fri, 18 Nov 2022 10:54:21 -0500
Subject: [PATCH] [v9.3.x] Accessibility: Improve keyboard accessibility in
 `GettingStarted` panel (#58977)

Accessibility: Improve keyboard accessibility in `GettingStarted` panel (#58966)

fix keyboard a11y in `GettingStarted` panel

(cherry picked from commit e19957bbc8949f4f69a62b91b1baa66aa478ad05)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
---
 .../panel/gettingstarted/GettingStarted.tsx   | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx
index 1687e268844..4941d87f6c5 100644
--- a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx
+++ b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx
@@ -90,21 +90,29 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
           </div>
         ) : (
           <>
-            <div className={styles.dismiss}>
-              <div onClick={this.dismiss}>Remove this panel</div>
-            </div>
+            <Button variant="secondary" fill="text" className={styles.dismiss} onClick={this.dismiss}>
+              Remove this panel
+            </Button>
             {currentStep === steps.length - 1 && (
-              <div className={cx(styles.backForwardButtons, styles.previous)} onClick={this.onPreviousClick}>
-                <Button aria-label="To advanced tutorials" icon="angle-left" variant="secondary" />
-              </div>
+              <Button
+                className={cx(styles.backForwardButtons, styles.previous)}
+                onClick={this.onPreviousClick}
+                aria-label="To advanced tutorials"
+                icon="angle-left"
+                variant="secondary"
+              />
             )}
             <div className={styles.content}>
               <Step step={step} />
             </div>
             {currentStep < steps.length - 1 && (
-              <div className={cx(styles.backForwardButtons, styles.forward)} onClick={this.onForwardClick}>
-                <Button aria-label="To basic tutorials" icon="angle-right" variant="secondary" />
-              </div>
+              <Button
+                className={cx(styles.backForwardButtons, styles.forward)}
+                onClick={this.onForwardClick}
+                aria-label="To basic tutorials"
+                icon="angle-right"
+                variant="secondary"
+              />
             )}
           </>
         )}
@@ -166,9 +174,8 @@ const getStyles = stylesFactory(() => {
     `,
     backForwardButtons: css`
       position: absolute;
-      bottom: 50%;
       top: 50%;
-      height: 50px;
+      transform: translateY(-50%);
     `,
     previous: css`
       left: 10px;
@@ -185,11 +192,8 @@ const getStyles = stylesFactory(() => {
       }
     `,
     dismiss: css`
-      display: flex;
-      justify-content: flex-end;
-      cursor: pointer;
+      align-self: flex-end;
       text-decoration: underline;
-      margin-right: ${theme.spacing(2)};
       margin-bottom: ${theme.spacing(1)};
     `,
     loading: css`