From 0209cde7e04ad3091bf1de2292dcc21d49f5ee95 Mon Sep 17 00:00:00 2001
From: Joey Tawadrous <90795735+joey-grafana@users.noreply.github.com>
Date: Thu, 1 Dec 2022 11:23:33 +0000
Subject: [PATCH] Tracing: Add keyboard accessibility to SpanDetailRow (#59412)

SpanDetailRow keyboard accessibility
---
 .../src/TraceTimelineViewer/SpanDetailRow.tsx  | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.tsx
index bacd3cb6520..f1d483b8dec 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.tsx
@@ -13,10 +13,11 @@
 // limitations under the License.
 
 import { css } from '@emotion/css';
+import classNames from 'classnames';
 import React from 'react';
 
 import { GrafanaTheme2, LinkModel, TimeZone } from '@grafana/data';
-import { stylesFactory, withTheme2 } from '@grafana/ui';
+import { Button, clearButtonStyles, stylesFactory, withTheme2 } from '@grafana/ui';
 
 import { autoColor } from '../Theme';
 import { SpanLinkFunc } from '../types';
@@ -143,14 +144,13 @@ export class UnthemedSpanDetailRow extends React.PureComponent<SpanDetailRowProp
             addHoverIndentGuideId={addHoverIndentGuideId}
             removeHoverIndentGuideId={removeHoverIndentGuideId}
           />
-          <span>
-            <span
-              className={styles.expandedAccent}
-              onClick={this._detailToggle}
-              style={{ borderColor: color }}
-              data-testid="detail-row-expanded-accent"
-            />
-          </span>
+          <Button
+            fill="text"
+            onClick={this._detailToggle}
+            className={classNames(styles.expandedAccent, clearButtonStyles(theme))}
+            style={{ borderColor: color }}
+            data-testid="detail-row-expanded-accent"
+          ></Button>
         </TimelineRow.Cell>
         <TimelineRow.Cell width={1 - columnDivision}>
           <div className={styles.infoWrapper} style={{ borderTopColor: color }}>