Accessibility: Render gauge as a button when onClick is provided (#60396)

render gauge as a button when onClick is provided

packages/grafana-ui/src/components/Gauge/Gauge.test.tsx

@@ -1,4 +1,5 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { ThresholdsMode, FieldConfig, FieldColorModeId, createTheme } from '@grafana/data';
@@ -41,4 +42,13 @@ describe('Gauge', () => {
   it('should render without blowing up', () => {
     expect(() => render(<Gauge {...props} />)).not.toThrow();
   });
+
+  it('should render as a button when an onClick is provided', async () => {
+    const mockOnClick = jest.fn();
+    render(<Gauge {...props} onClick={mockOnClick} />);
+    const gaugeButton = screen.getByRole('button');
+    expect(gaugeButton).toBeInTheDocument();
+    await userEvent.click(gaugeButton);
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+  });
 });

packages/grafana-ui/src/components/Gauge/Gauge.tsx

@@ -8,12 +8,12 @@ import {
   ThresholdsMode,
   GAUGE_DEFAULT_MAXIMUM,
   GAUGE_DEFAULT_MINIMUM,
-  GrafanaTheme,
   GrafanaTheme2,
 } from '@grafana/data';
 import { VizTextDisplayOptions } from '@grafana/schema';
 
 import { calculateFontSize } from '../../utils/measureText';
+import { clearButtonStyles } from '../Button';
 
 import { calculateGaugeAutoProps, DEFAULT_THRESHOLDS, getFormattedThresholds } from './utils';
 
@@ -27,7 +27,7 @@ export interface Props {
   text?: VizTextDisplayOptions;
   onClick?: React.MouseEventHandler<HTMLElement>;
   className?: string;
-  theme: GrafanaTheme | GrafanaTheme2;
+  theme: GrafanaTheme2;
 }
 
 export class Gauge extends PureComponent<Props> {
@@ -56,7 +56,7 @@ export class Gauge extends PureComponent<Props> {
 
     const autoProps = calculateGaugeAutoProps(width, height, value.title);
     const dimension = Math.min(width, autoProps.gaugeHeight);
-    const backgroundColor = 'v1' in theme ? theme.colors.background.secondary : theme.colors.bg2;
+    const backgroundColor = theme.colors.background.secondary;
     const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;
     const gaugeWidth = Math.min(dimension / 5.5, 40) / gaugeWidthReduceRatio;
     const thresholdMarkersWidth = gaugeWidth / 5;
@@ -145,16 +145,24 @@ export class Gauge extends PureComponent<Props> {
   }
 
   renderVisualization = () => {
-    const { width, value, height, onClick, text } = this.props;
+    const { width, value, height, onClick, text, theme } = this.props;
     const autoProps = calculateGaugeAutoProps(width, height, value.title);
+    const gaugeElement = (
+      <div
+        style={{ height: `${autoProps.gaugeHeight}px`, width: '100%' }}
+        ref={(element) => (this.canvasElement = element)}
+      />
+    );
 
     return (
       <>
-        <div
+        {onClick ? (
-          style={{ height: `${autoProps.gaugeHeight}px`, width: '100%' }}
+          <button className={clearButtonStyles(theme)} type="button" onClick={onClick}>
-          ref={(element) => (this.canvasElement = element)}
+            {gaugeElement}
-          onClick={onClick}
+          </button>
-        />
+        ) : (
+          gaugeElement
+        )}
         {autoProps.showLabel && (
           <div
             style={{