From d217d2aa402a9867d148e0db8e47814f25e74360 Mon Sep 17 00:00:00 2001
From: Yaelle Chaudy <42030685+yaelleC@users.noreply.github.com>
Date: Fri, 1 Apr 2022 14:00:09 +0200
Subject: [PATCH] A11y : Fix a11y in CollapsibleSection (#46455)

* Fix a11y in CollapsibleSection

* Added type to button to avoid form submit on enter
---
 .../alerting/unified/components/CollapseToggle.tsx        | 1 +
 .../components/receivers/form/CollapsibleSection.tsx      | 8 +++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/public/app/features/alerting/unified/components/CollapseToggle.tsx b/public/app/features/alerting/unified/components/CollapseToggle.tsx
index 3c73a4779cd..c63256e077f 100644
--- a/public/app/features/alerting/unified/components/CollapseToggle.tsx
+++ b/public/app/features/alerting/unified/components/CollapseToggle.tsx
@@ -26,6 +26,7 @@ export const CollapseToggle: FC<Props> = ({
 
   return (
     <Button
+      type="button"
       fill="text"
       aria-expanded={!isCollapsed}
       aria-controls={idControlled}
diff --git a/public/app/features/alerting/unified/components/receivers/form/CollapsibleSection.tsx b/public/app/features/alerting/unified/components/receivers/form/CollapsibleSection.tsx
index 16a1470f244..ff80c184290 100644
--- a/public/app/features/alerting/unified/components/receivers/form/CollapsibleSection.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/CollapsibleSection.tsx
@@ -1,15 +1,17 @@
 import { css, cx } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
-import { Icon, useStyles2 } from '@grafana/ui';
+import { IconSize, useStyles2 } from '@grafana/ui';
 import React, { FC, useState } from 'react';
+import { CollapseToggle } from '../../CollapseToggle';
 
 interface Props {
   label: string;
   description?: string;
   className?: string;
+  size?: IconSize;
 }
 
-export const CollapsibleSection: FC<Props> = ({ label, description, children, className }) => {
+export const CollapsibleSection: FC<Props> = ({ label, description, children, className, size = 'xl' }) => {
   const styles = useStyles2(getStyles);
   const [isCollapsed, setIsCollapsed] = useState(true);
 
@@ -18,7 +20,7 @@ export const CollapsibleSection: FC<Props> = ({ label, description, children, cl
   return (
     <div className={cx(styles.wrapper, className)}>
       <div className={styles.heading} onClick={toggleCollapse}>
-        <Icon className={styles.caret} size="xl" name={isCollapsed ? 'angle-right' : 'angle-down'} />
+        <CollapseToggle className={styles.caret} size={size} onToggle={toggleCollapse} isCollapsed={isCollapsed} />
         <h6>{label}</h6>
       </div>
       {description && <p className={styles.description}>{description}</p>}