Set type="button" on accordion buttons (#1468)

The <button> in <EuiAccordion> doesn’t set a type, so it triggers the submit action in forms.
elastic · Jan 23, 2019 · d077bd9 · d077bd9
1 parent b349c96
commit d077bd9
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Re-added EuiI18n, EuiI18nNumber, and EuiContext for localization ([#1466](https://github.com/elastic/eui/pull/1466))
+- Set `type="button"` on accordion buttons ([#1468](https://github.com/elastic/eui/pull/1468))
 
 ## [`6.6.0`](https://github.com/elastic/eui/tree/v6.6.0)
 

diff --git a/src/components/accordion/__snapshots__/accordion.test.js.snap b/src/components/accordion/__snapshots__/accordion.test.js.snap
@@ -33,6 +33,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
               aria-expanded={false}
               className="euiAccordion__button"
               onClick={[Function]}
+              type="button"
             >
               <EuiFlexGroup
                 alignItems="center"
@@ -167,6 +168,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
               aria-expanded={true}
               className="euiAccordion__button"
               onClick={[Function]}
+              type="button"
             >
               <EuiFlexGroup
                 alignItems="center"
@@ -283,6 +285,7 @@ exports[`EuiAccordion is rendered 1`] = `
         aria-controls="0"
         aria-expanded="false"
         class="euiAccordion__button"
+        type="button"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -346,6 +349,7 @@ exports[`EuiAccordion props buttonContent is rendered 1`] = `
         aria-controls="2"
         aria-expanded="false"
         class="euiAccordion__button"
+        type="button"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -413,6 +417,7 @@ exports[`EuiAccordion props buttonContentClassName is rendered 1`] = `
         aria-controls="1"
         aria-expanded="false"
         class="euiAccordion__button"
+        type="button"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -476,6 +481,7 @@ exports[`EuiAccordion props extraAction is rendered 1`] = `
         aria-controls="3"
         aria-expanded="false"
         class="euiAccordion__button"
+        type="button"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -546,6 +552,7 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
         aria-controls="4"
         aria-expanded="true"
         class="euiAccordion__button"
+        type="button"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"

diff --git a/src/components/accordion/accordion.js b/src/components/accordion/accordion.js
@@ -127,6 +127,7 @@ export class EuiAccordion extends Component {
               aria-expanded={!!this.state.isOpen}
               onClick={this.onToggle}
               className={buttonClasses}
+              type="button"
             >
               <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
                 <EuiFlexItem grow={false} className="euiAccordion__iconWrapper">