[v9.3.x] Accessibility: Improved keyboard accessibility in BigValue (#…

…60317)

Accessibility: Improved keyboard accessibility in BigValue  (#59830)

use appropriate elements when rendering BigValue

(cherry picked from commit c75ed8f)

Co-authored-by: Leo <108552997+lpskdl@users.noreply.github.com>

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

@@ -1,9 +1,11 @@
+import { cx } from '@emotion/css';
 import React, { PureComponent } from 'react';
 
 import { DisplayValue, DisplayValueAlignmentFactors, FieldSparkline, VizOrientation } from '@grafana/data';
 import { VizTextDisplayOptions } from '@grafana/schema';
 
 import { Themeable2 } from '../../types';
+import { clearButtonStyles } from '../Button';
 import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay';
 
 import { buildLayout } from './BigValueLayout';
@@ -79,7 +81,7 @@ export class BigValue extends PureComponent<Props> {
   };
 
   render() {
-    const { onClick, className, hasLinks } = this.props;
+    const { onClick, className, hasLinks, theme } = this.props;
     const layout = buildLayout(this.props);
     const panelStyles = layout.getPanelStyles();
     const valueAndTitleContainerStyles = layout.getValueAndTitleContainerStyles();
@@ -90,14 +92,32 @@ export class BigValue extends PureComponent<Props> {
     // When there is an outer data link this tooltip will override the outer native tooltip
     const tooltip = hasLinks ? undefined : textValues.tooltip;
 
+    if (!onClick) {
+      return (
+        <div className={className} style={panelStyles} title={tooltip}>
+          <div style={valueAndTitleContainerStyles}>
+            {textValues.title && <div style={titleStyles}>{textValues.title}</div>}
+            <FormattedValueDisplay value={textValues} style={valueStyles} />
+          </div>
+          {layout.renderChart()}
+        </div>
+      );
+    }
+
     return (
-      <div className={className} style={panelStyles} onClick={onClick} title={tooltip}>
+      <button
+        type="button"
+        className={cx(clearButtonStyles(theme), className)}
+        style={panelStyles}
+        onClick={onClick}
+        title={tooltip}
+      >
         <div style={valueAndTitleContainerStyles}>
           {textValues.title && <div style={titleStyles}>{textValues.title}</div>}
           <FormattedValueDisplay value={textValues} style={valueStyles} />
         </div>
         {layout.renderChart()}
-      </div>
+      </button>
     );
   }
 }