Accessibility: Improved keyboard accessibility in BarGauge

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

@@ -1,4 +1,5 @@
 // Library
+import { cx } from '@emotion/css';
 import React, { CSSProperties, PureComponent, ReactNode } from 'react';
 import tinycolor from 'tinycolor2';
 
@@ -23,6 +24,7 @@ import { VizTextDisplayOptions } from '@grafana/schema';
 
 import { Themeable2 } from '../../types';
 import { calculateFontSize, measureText } from '../../utils/measureText';
+import { clearButtonStyles } from '../Button';
 import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay';
 
 const MIN_VALUE_HEIGHT = 18;
@@ -77,23 +79,23 @@ export class BarGauge extends PureComponent<Props> {
   };
 
   render() {
-    const { onClick, className } = this.props;
+    const { onClick, className, theme } = this.props;
     const { title } = this.props.value;
     const styles = getTitleStyles(this.props);
 
     if (!title) {
       return (
-        <div style={styles.wrapper} onClick={onClick} className={className}>
+        <button style={styles.wrapper} onClick={onClick} className={cx(clearButtonStyles(theme), className)}>
           {this.renderBarAndValue()}
-        </div>
+        </button>
       );
     }
 
     return (
-      <div style={styles.wrapper} onClick={onClick} className={className}>
+      <button style={styles.wrapper} onClick={onClick} className={cx(clearButtonStyles(theme), className)}>
         <div style={styles.title}>{title}</div>
         {this.renderBarAndValue()}
-      </div>
+      </button>
     );
   }