From 19e97a1f31a6d9ad9818b2b6f5d041b4596e9693 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 22 Nov 2022 11:19:57 +0000
Subject: [PATCH] Accessibility: Improve keyboard accessibility in `Collapse`
 (#59022)

fix keyboard accessibility in Collapse
---
 packages/grafana-ui/src/components/Collapse/Collapse.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/Collapse/Collapse.tsx b/packages/grafana-ui/src/components/Collapse/Collapse.tsx
index 76f1c0c98265..9676bba702ec 100644
--- a/packages/grafana-ui/src/components/Collapse/Collapse.tsx
+++ b/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} />