Segment: Individual segments are now keyboard accessible (#60555)

use <button> for keyboard accessibility

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
-          : () => {
+      disabled={disabled}
+      onClick={() => {
         setExpandedWrapper(true);
         if (ref && ref.current) {
           setWidth(ref.current.clientWidth * 1.25);
         }
-              if (onClick) {
-                onClick();
-              }
-            }
-      }
+        onClick?.();
+      }}
     >
       {Component}
-    </div>
+    </button>
   );
 
   return [Label, width, expanded, setExpandedWrapper];