From 44e8fb628ed2dbb66361813b0d480941a879bf5c Mon Sep 17 00:00:00 2001
From: Giordano Ricci <me@giordanoricci.com>
Date: Fri, 18 Nov 2022 14:52:54 +0100
Subject: [PATCH] Explore: Fix a11y issue with show all series button in Graph
 (#58943)

* Explore: Fix a11y issue with show all series button in Graph

* remove extra space

* add spacing
---
 .../features/explore/Graph/ExploreGraph.tsx   | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/public/app/features/explore/Graph/ExploreGraph.tsx b/public/app/features/explore/Graph/ExploreGraph.tsx
index f8a0e02f0d4..ce4ec43e2c3 100644
--- a/public/app/features/explore/Graph/ExploreGraph.tsx
+++ b/public/app/features/explore/Graph/ExploreGraph.tsx
@@ -22,6 +22,7 @@ import {
 import { PanelRenderer } from '@grafana/runtime';
 import { GraphDrawStyle, LegendDisplayMode, TooltipDisplayMode, SortOrder } from '@grafana/schema';
 import {
+  Button,
   Icon,
   PanelContext,
   PanelContextProvider,
@@ -166,13 +167,15 @@ export function ExploreGraph({
       {dataWithConfig.length > MAX_NUMBER_OF_TIME_SERIES && !showAllTimeSeries && (
         <div className={cx([style.timeSeriesDisclaimer])}>
           <Icon className={style.disclaimerIcon} name="exclamation-triangle" />
-          {`Showing only ${MAX_NUMBER_OF_TIME_SERIES} time series. `}
-          <span
-            className={cx([style.showAllTimeSeries])}
-            onClick={() => {
-              setShowAllTimeSeries(true);
-            }}
-          >{`Show all ${dataWithConfig.length}`}</span>
+          Showing only {MAX_NUMBER_OF_TIME_SERIES} time series.
+          <Button
+            variant="primary"
+            fill="text"
+            onClick={() => setShowAllTimeSeries(true)}
+            className={style.showAllButton}
+          >
+            Show all {dataWithConfig.length}
+          </Button>
         </div>
       )}
       <PanelRenderer
@@ -192,7 +195,6 @@ export function ExploreGraph({
 const getStyles = (theme: GrafanaTheme2) => ({
   timeSeriesDisclaimer: css`
     label: time-series-disclaimer;
-    width: 300px;
     margin: ${theme.spacing(1)} auto;
     padding: 10px 0;
     border-radius: ${theme.spacing(2)};
@@ -204,9 +206,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     color: ${theme.colors.warning.main};
     margin-right: ${theme.spacing(0.5)};
   `,
-  showAllTimeSeries: css`
-    label: show-all-time-series;
-    cursor: pointer;
-    color: ${theme.colors.text.link};
+  showAllButton: css`
+    margin-left: ${theme.spacing(0.5)};
   `,
 });