From 3ed5ade78de2184fa7fe61a8a0e3aa21b45e7636 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 27 Oct 2021 16:35:59 +0100
Subject: [PATCH] Suggestions: Make the visualization suggestions more
 accessible (#40944)

* Suggestions: Make the visualization suggestions more accessible

* Reintroduce wrapping div to prevent title overlapping
---
 .../VizTypePicker/VisualizationPreview.tsx          | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/public/app/features/panel/components/VizTypePicker/VisualizationPreview.tsx b/public/app/features/panel/components/VizTypePicker/VisualizationPreview.tsx
index ce1c749cf8d..96beaa1f212 100644
--- a/public/app/features/panel/components/VizTypePicker/VisualizationPreview.tsx
+++ b/public/app/features/panel/components/VizTypePicker/VisualizationPreview.tsx
@@ -34,9 +34,15 @@ export function VisualizationPreview({ data, suggestion, onChange, width, showTi
   }
 
   return (
-    <div onClick={onClick} data-testid={selectors.components.VisualizationPreview.card(suggestion.name)}>
+    <div>
       {showTitle && <div className={styles.name}>{suggestion.name}</div>}
-      <div className={styles.vizBox} style={outerStyles}>
+      <button
+        aria-label={suggestion.name}
+        className={styles.vizBox}
+        data-testid={selectors.components.VisualizationPreview.card(suggestion.name)}
+        style={outerStyles}
+        onClick={onClick}
+      >
         <Tooltip content={suggestion.name}>
           <div style={innerStyles} className={styles.renderContainer}>
             <PanelRenderer
@@ -51,7 +57,7 @@ export function VisualizationPreview({ data, suggestion, onChange, width, showTi
             <div className={styles.hoverPane} />
           </div>
         </Tooltip>
-      </div>
+      </button>
     </div>
   );
 }
@@ -68,6 +74,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     vizBox: css`
       position: relative;
+      background: none;
       border-radius: ${theme.shape.borderRadius(1)};
       cursor: pointer;
       border: 1px solid ${theme.colors.border.strong};