[EuiAccordion] Allow interactive content within the buttonContent (#…

…5258)

* Make accordion arrows always EuiButtonIcons
* Added `element` and `buttonElement` to customize HTML elements
* Added `arrowProps` so collapsible group could change its color for dark
* Hard coded example of stopPropagation

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Updated `tokenKeyword` to match the definition of keyword field type ([#5251](https://github.com/elastic/eui/pull/5251))
+- Added `element`, `buttonElement`, and `arrowProps` props to further customize `EuiAccordion` ([#5258](https://github.com/elastic/eui/pull/5258))
 
 **Breaking changes**
 

src-docs/src/views/accordion/accordion_buttonElement.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { EuiAccordion, EuiLink, EuiPanel } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
+
+export default () => {
+  const buttonElementAccordionId = useGeneratedHtmlId({
+    prefix: 'buttonElementAccordion',
+  });
+
+  return (
+    <EuiAccordion
+      id={buttonElementAccordionId}
+      buttonElement="div"
+      buttonContent={
+        <EuiLink
+          onClick={(e) => e.stopPropagation()}
+          href="#/layout/accordion#interactive-content-in-the-trigger"
+        >
+          This is a nested link
+        </EuiLink>
+      }
+    >
+      <EuiPanel color="subdued">
+        Any content inside of <strong>EuiAccordion</strong> will appear here.
+      </EuiPanel>
+    </EuiAccordion>
+  );
+};

src-docs/src/views/accordion/accordion_example.js

@@ -86,6 +86,9 @@ const accordionIsLoadingSnippet = [
 </EuiAccordion>`,
 ];
 
+import AccordionButtonElement from './accordion_buttonElement';
+const accordionButtonElementSource = require('!!raw-loader!./accordion_buttonElement');
+
 export const AccordionExample = {
   title: 'Accordion',
   intro: (
@@ -327,6 +330,37 @@ export const AccordionExample = {
       ),
       demo: <AccordionGrow />,
     },
+    {
+      title: 'Interactive content in the trigger',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: accordionButtonElementSource,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            Passing interactive content like links, buttons, or form elements as
+            the <EuiCode>buttonContent</EuiCode>, will cause issues with the
+            wrapping button element. To fix this, you can change this wrapping
+            element to a div using <EuiCode>{'buttonElement="div"'}</EuiCode>.
+          </p>
+          <p>
+            If you don&apos;t want the interactive content to trigger the
+            accordion expansion, you will have to apply{' '}
+            <EuiCode language="js">e.stopPropagation()</EuiCode> to your element
+            manually.
+          </p>
+          <EuiCallOut
+            iconType="accessibility"
+            color="warning"
+            title="Accordions need a focusable button for accessibility, so changing the element to anything other than a button will enforce the display of the arrow."
+          />
+        </>
+      ),
+      demo: <AccordionButtonElement />,
+    },
     {
       title: 'Styled for forms',
       source: [
@@ -358,12 +392,22 @@ export const AccordionExample = {
               hide it until hover or focus
             </li>
           </ul>
+          <p>
+            We also recommend creating a fieldset/legend combination for better
+            accessibility and DOM structure by passing{' '}
+            <EuiCode language="tsx">{'element="fieldset"'}</EuiCode>. This will
+            set the entire accordion as a{' '}
+            <EuiCode language="html">{'<fieldset>'}</EuiCode> and automatically
+            change the <EuiCode>{'buttonElement'}</EuiCode> to a{' '}
+            <EuiCode language="html">{'<legend>'}</EuiCode>.
+          </p>
         </>
       ),
       demo: <AccordionForm />,
       snippet: `<EuiAccordion
   id={accordionId4}
   className="euiAccordionForm"
+  element="fieldset"
   buttonClassName="euiAccordionForm__button"
   buttonContent={buttonContent}
   extraAction={<EuiButtonIcon

src-docs/src/views/accordion/accordion_form.js

@@ -92,6 +92,7 @@ export default () => {
     <div>
       <EuiAccordion
         id={formAccordionId__1}
+        element="fieldset"
         className="euiAccordionForm"
         buttonClassName="euiAccordionForm__button"
         buttonContent={buttonContent}
@@ -103,6 +104,7 @@ export default () => {
 
       <EuiAccordion
         id={formAccordionId__2}
+        element="fieldset"
         className="euiAccordionForm"
         buttonClassName="euiAccordionForm__button"
         buttonContent={buttonContent}