[v9.3.x] Accessibility: Improve keyboard accessibility in Collapse (#59097)

Accessibility: Improve keyboard accessibility in `Collapse` (#59022)

fix keyboard accessibility in Collapse

(cherry picked from commit 19e97a1f31)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

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

@@ -4,6 +4,7 @@ import React, { FunctionComponent, useState } from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 
 import { useStyles2 } from '../../themes/ThemeContext';
+import { clearButtonStyles } from '../Button';
 import { Icon } from '../Icon/Icon';
 
 const getStyles = (theme: GrafanaTheme2) => ({
@@ -71,9 +72,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     label: collapse__header;
     padding: ${theme.spacing(1, 2, 1, 2)};
     display: flex;
-    cursor: inherit;
     transition: all 0.1s linear;
-    cursor: pointer;
   `,
   headerCollapsed: css`
     label: collapse__header--collapsed;
@@ -132,6 +131,7 @@ export const Collapse = ({
   className,
   children,
 }: React.PropsWithChildren<Props>) => {
+  const buttonStyles = useStyles2(clearButtonStyles);
   const style = useStyles2(getStyles);
   const onClickToggle = () => {
     if (onToggle) {
@@ -145,10 +145,10 @@ export const Collapse = ({
 
   return (
     <div className={panelClass}>
-      <div className={headerClass} onClick={onClickToggle}>
+      <button type="button" className={cx(buttonStyles, headerClass)} onClick={onClickToggle}>
         {collapsible && <Icon className={style.icon} name={isOpen ? 'angle-down' : 'angle-right'} />}
         <div className={cx([style.headerLabel])}>{label}</div>
-      </div>
+      </button>
       {isOpen && (
         <div className={cx([style.collapseBody])}>
           <div className={loaderClass} />