diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ab51d3a915..ec85a16072e 100644
--- a/CHANGELOG.md
+++ b/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**
diff --git a/src-docs/src/views/accordion/accordion.js b/src-docs/src/views/accordion/accordion.tsx
similarity index 100%
rename from src-docs/src/views/accordion/accordion.js
rename to src-docs/src/views/accordion/accordion.tsx
diff --git a/src-docs/src/views/accordion/accordion_buttonElement.tsx b/src-docs/src/views/accordion/accordion_buttonElement.tsx
new file mode 100644
index 00000000000..6571f7e31eb
--- /dev/null
+++ b/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 (
+ e.stopPropagation()}
+ href="#/layout/accordion#interactive-content-in-the-trigger"
+ >
+ This is a nested link
+
+ }
+ >
+
+ Any content inside of EuiAccordion will appear here.
+
+
+ );
+};
diff --git a/src-docs/src/views/accordion/accordion_example.js b/src-docs/src/views/accordion/accordion_example.js
index 61d79ab3d58..ff28c277b0a 100644
--- a/src-docs/src/views/accordion/accordion_example.js
+++ b/src-docs/src/views/accordion/accordion_example.js
@@ -86,6 +86,9 @@ const accordionIsLoadingSnippet = [
`,
];
+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: ,
},
+ {
+ title: 'Interactive content in the trigger',
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: accordionButtonElementSource,
+ },
+ ],
+ text: (
+ <>
+
+ Passing interactive content like links, buttons, or form elements as
+ the buttonContent, will cause issues with the
+ wrapping button element. To fix this, you can change this wrapping
+ element to a div using {'buttonElement="div"'}.
+
+
+ If you don't want the interactive content to trigger the
+ accordion expansion, you will have to apply{' '}
+ e.stopPropagation() to your element
+ manually.
+
+
+
+ ),
+ demo: ,
+ },
{
title: 'Styled for forms',
source: [
@@ -358,12 +392,22 @@ export const AccordionExample = {
hide it until hover or focus
+
+ We also recommend creating a fieldset/legend combination for better
+ accessibility and DOM structure by passing{' '}
+ {'element="fieldset"'}. This will
+ set the entire accordion as a{' '}
+ {' and automatically
+ change the {'buttonElement'} to a{' '}
+ {'.
+