fix(TDOPS-5762): fix DS accordion that would submit forms

Talend · Nov 30, 2023 · b6b1e49 · b6b1e49
1 parent bd152f9
commit b6b1e49
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/.changeset/rich-kangaroos-fold.md b/.changeset/rich-kangaroos-fold.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+TDOPS-5762 - Fix Design System accordion button that would submit a form
diff --git a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx
@@ -1,16 +1,17 @@
 import { forwardRef, ReactChild, Ref } from 'react';
+
 import classnames from 'classnames';
 
 import tokens from '@talend/design-tokens';
 
 import { ButtonIcon } from '../../ButtonIcon';
-import { SizedIcon } from '../../Icon';
 import { Divider } from '../../Divider';
+import { SizedIcon } from '../../Icon';
 import { StackHorizontal } from '../../Stack';
 import { Status } from '../../Status';
 import { variants } from '../../Status/Primitive/StatusPrimitive';
-
 import { PanelHeaderAction } from './types';
+
 import styles from './CollapsiblePanelHeader.module.scss';
 
 export type CollapsiblePanelHeaderPropsType = {
@@ -149,6 +150,7 @@ const CollapsiblePanelHeader = forwardRef(
 				ref={ref}
 				data-test="panel.header"
 				data-testid="panel.header"
+				type="button"
 			>
 				{getContent()}
 			</button>

diff --git a/packages/design-system/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap b/packages/design-system/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`Accordion should render a11y html 1`] = `
       data-test="panel.header"
       data-testid="panel.header"
       id="CollapsiblePanel__control--id-mocked-uuid-0"
+      type="button"
     >
       <div
         class="theme-iconWrapper"
@@ -67,6 +68,7 @@ exports[`Accordion should render a11y html 1`] = `
       data-test="panel.header"
       data-testid="panel.header"
       id="CollapsiblePanel__control--id-mocked-uuid-1"
+      type="button"
     >
       <div
         class="theme-iconWrapper"
@@ -122,6 +124,7 @@ exports[`Accordion should render a11y html 1`] = `
       data-test="panel.header"
       data-testid="panel.header"
       id="CollapsiblePanel__control--id-mocked-uuid-2"
+      type="button"
     >
       <div
         class="theme-iconWrapper"
@@ -192,6 +195,7 @@ exports[`Accordion should render a11y html 1`] = `
       data-test="panel.header"
       data-testid="panel.header"
       id="CollapsiblePanel__control--id-mocked-uuid-3"
+      type="button"
     >
       <div
         class="theme-iconWrapper"
@@ -247,6 +251,7 @@ exports[`Accordion should render a11y html 1`] = `
       data-test="panel.header"
       data-testid="panel.header"
       id="CollapsiblePanel__control--id-mocked-uuid-4"
+      type="button"
     >
       <div
         class="theme-iconWrapper"