From a16ca209fba95abcd393567b900ceadb13f8e476 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 21 Dec 2022 17:26:18 +0000
Subject: [PATCH] Segment: Individual segments are now keyboard accessible
 (#60555)

use <button> for keyboard accessibility
---
 .../components/Segment/useExpandableLabel.tsx | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx b/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx
index 2c493c3fb37..1a7a3fc3dc7 100644
--- a/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx
+++ b/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx
@@ -1,5 +1,8 @@
 import React, { useState, useRef, ReactElement } from 'react';
 
+import { useStyles2 } from '../../themes';
+import { clearButtonStyles } from '../Button';
+
 interface LabelProps {
   Component: ReactElement;
   onClick?: () => void;
@@ -10,7 +13,8 @@ export const useExpandableLabel = (
   initialExpanded: boolean,
   onExpandedChange?: (expanded: boolean) => void
 ): [React.ComponentType<LabelProps>, number, boolean, (expanded: boolean) => void] => {
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLButtonElement>(null);
+  const buttonStyles = useStyles2(clearButtonStyles);
   const [expanded, setExpanded] = useState<boolean>(initialExpanded);
   const [width, setWidth] = useState(0);
 
@@ -22,24 +26,21 @@ export const useExpandableLabel = (
   };
 
   const Label: React.FC<LabelProps> = ({ Component, onClick, disabled }) => (
-    <div
+    <button
+      type="button"
+      className={buttonStyles}
       ref={ref}
-      onClick={
-        disabled
-          ? undefined
-          : () => {
-              setExpandedWrapper(true);
-              if (ref && ref.current) {
-                setWidth(ref.current.clientWidth * 1.25);
-              }
-              if (onClick) {
-                onClick();
-              }
-            }
-      }
+      disabled={disabled}
+      onClick={() => {
+        setExpandedWrapper(true);
+        if (ref && ref.current) {
+          setWidth(ref.current.clientWidth * 1.25);
+        }
+        onClick?.();
+      }}
     >
       {Component}
-    </div>
+    </button>
   );
 
   return [Label, width, expanded, setExpandedWrapper];