Tracing: Make show filters only keyboard accessible (#70890)

* Make show filters only keyboard accessible

* Update test

* Update styling

public/app/features/explore/TraceView/components/TracePageHeader/NewTracePageSearchBar.test.tsx

@@ -16,6 +16,8 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
+import { createTheme } from '@grafana/data';
+
 import { defaultFilters } from '../../useSearch';
 
 import NewTracePageSearchBar, { getStyles } from './NewTracePageSearchBar';
@@ -101,7 +103,7 @@ describe('<NewTracePageSearchBar>', () => {
 
   it('renders correctly when there are no matches i.e. too many filters added', async () => {
     const { container } = render(<NewTracePageSearchBarWithProps matches={[]} />);
-    const styles = getStyles();
+    const styles = getStyles(createTheme());
     const tooltip = container.querySelector('.' + styles.matchesTooltip);
     expect(screen.getByText('0 matches')).toBeDefined();
     userEvent.hover(tooltip!);

public/app/features/explore/TraceView/components/TracePageHeader/NewTracePageSearchBar.tsx

@@ -15,6 +15,7 @@
 import { css } from '@emotion/css';
 import React, { memo, Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
 
+import { GrafanaTheme2 } from '@grafana/data';
 import { config, reportInteraction } from '@grafana/runtime';
 import { Button, Icon, Switch, Tooltip, useStyles2 } from '@grafana/ui';
 
@@ -147,9 +148,14 @@ export default memo(function NewTracePageSearchBar(props: TracePageSearchBarProp
                 onChange={(value) => setShowSpanFilterMatchesOnly(value.currentTarget.checked ?? false)}
                 label="Show matches only switch"
               />
-              {/* TODO: fix keyboard a11y */}
-              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-              <span onClick={() => setShowSpanFilterMatchesOnly(!showSpanFilterMatchesOnly)}>Show matches only</span>
+              <Button
+                onClick={() => setShowSpanFilterMatchesOnly(!showSpanFilterMatchesOnly)}
+                className={styles.clearMatchesButton}
+                variant="secondary"
+                fill="text"
+              >
+                Show matches only
+              </Button>
             </div>
           </div>
           <div className={styles.nextPrevButtons}>
@@ -181,7 +187,7 @@ export default memo(function NewTracePageSearchBar(props: TracePageSearchBarProp
   );
 });
 
-export const getStyles = () => {
+export const getStyles = (theme: GrafanaTheme2) => {
   return {
     searchBar: css`
       display: inline;
@@ -190,10 +196,10 @@ export const getStyles = () => {
       display: inline-flex;
       margin: 0 0 0 10px;
       vertical-align: middle;
+      align-items: center;
 
       span {
         cursor: pointer;
-        margin: -3px 0 0 5px;
       }
     `,
     buttons: css`
@@ -204,6 +210,13 @@ export const getStyles = () => {
     clearButton: css`
       order: 1;
     `,
+    clearMatchesButton: css`
+      color: ${theme.colors.text.primary};
+      &:hover {
+        background: inherit;
+        color: inherit;
+      }
+    `,
     nextPrevButtons: css`
       margin-left: auto;
       order: 2;