From d9f697b41eabac549e648c1487d13f1eea4a84cc Mon Sep 17 00:00:00 2001
From: Leo <108552997+lpskdl@users.noreply.github.com>
Date: Thu, 1 Dec 2022 14:45:56 +0100
Subject: [PATCH] Accessibility: Improved keyboard accessibility in BarGauge
 (#59382)

* Accessibility: Improved keyboard accessibility in BarGauge

* use appropriate elements when rendering bargauge

* added space for focus-visible outline border

* Revert "added space for focus-visible outline border"

This reverts commit 9b83fa3a0b0a96c3e319e182a3deafdb973aad12.
---
 .../src/components/BarGauge/BarGauge.tsx      | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
index fd5bd1ad8d9..ac80738dd0e 100644
--- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
+++ b/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,21 +79,27 @@ 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) {
+    if (onClick) {
       return (
-        <div style={styles.wrapper} onClick={onClick} className={className}>
+        <button
+          type="button"
+          style={styles.wrapper}
+          onClick={onClick}
+          className={cx(clearButtonStyles(theme), className)}
+        >
+          <div style={styles.title}>{title}</div>
           {this.renderBarAndValue()}
-        </div>
+        </button>
       );
     }
 
     return (
-      <div style={styles.wrapper} onClick={onClick} className={className}>
-        <div style={styles.title}>{title}</div>
+      <div style={styles.wrapper} className={className}>
+        {title && <div style={styles.title}>{title}</div>}
         {this.renderBarAndValue()}
       </div>
     );