[EuiAccordion] Added buttonProps to pass the <button> element

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Added `size='l'` prop to `EuiTabs` ([#4501](https://github.com/elastic/eui/pull/4501))
 - Added content-specific props (`pageTitle`, `description`, `tabs`, `rightSideItems`) to `EuiPageHeader` by creating a new `EuiPageHeaderContent` component ([#4451](https://github.com/elastic/eui/pull/4451))
 - Added `isActive` parameter to the `useIsWithinBreakpoints` hook ([#4451](https://github.com/elastic/eui/pull/4451))
+- Added `buttonProps` prop to `EuiAccordion` ([#4510](https://github.com/elastic/eui/pull/4510))
 
 **Bug fixes**
 

src/components/accordion/__snapshots__/accordion.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EuiAccordion behavior closes when clicked twice 1`] = `
 <EuiAccordion
   arrowDisplay="left"
-  id="12"
+  id="13"
   initialIsOpen={false}
   isLoading={false}
   isLoadingMessage={false}
@@ -16,7 +16,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
       className="euiAccordion__triggerWrapper"
     >
       <button
-        aria-controls="12"
+        aria-controls="13"
         aria-expanded={false}
         className="euiAccordion__button"
         id="generated-id"
@@ -46,7 +46,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
     <div
       aria-labelledby="generated-id"
       className="euiAccordion__childWrapper"
-      id="12"
+      id="13"
       role="region"
       tabIndex={-1}
     >
@@ -67,7 +67,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
 exports[`EuiAccordion behavior opens when clicked once 1`] = `
 <EuiAccordion
   arrowDisplay="left"
-  id="11"
+  id="12"
   initialIsOpen={false}
   isLoading={false}
   isLoadingMessage={false}
@@ -80,7 +80,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
       className="euiAccordion__triggerWrapper"
     >
       <button
-        aria-controls="11"
+        aria-controls="12"
         aria-expanded={true}
         className="euiAccordion__button"
         id="generated-id"
@@ -110,7 +110,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
     <div
       aria-labelledby="generated-id"
       className="euiAccordion__childWrapper"
-      id="11"
+      id="12"
       role="region"
       tabIndex={-1}
     >
@@ -181,7 +181,7 @@ exports[`EuiAccordion props arrowDisplay none is rendered 1`] = `
     class="euiAccordion__triggerWrapper"
   >
     <button
-      aria-controls="6"
+      aria-controls="7"
       aria-expanded="false"
       class="euiAccordion__button"
       id="generated-id"
@@ -195,7 +195,7 @@ exports[`EuiAccordion props arrowDisplay none is rendered 1`] = `
   <div
     aria-labelledby="generated-id"
     class="euiAccordion__childWrapper"
-    id="6"
+    id="7"
     role="region"
     tabindex="-1"
   >
@@ -220,7 +220,7 @@ exports[`EuiAccordion props arrowDisplay right is rendered 1`] = `
     class="euiAccordion__triggerWrapper"
   >
     <button
-      aria-controls="5"
+      aria-controls="6"
       aria-expanded="false"
       class="euiAccordion__button euiAccordion__buttonReverse"
       id="generated-id"
@@ -242,7 +242,7 @@ exports[`EuiAccordion props arrowDisplay right is rendered 1`] = `
   <div
     aria-labelledby="generated-id"
     class="euiAccordion__childWrapper"
-    id="5"
+    id="6"
     role="region"
     tabindex="-1"
   >
@@ -349,7 +349,7 @@ exports[`EuiAccordion props buttonContentClassName is rendered 1`] = `
 </div>
 `;
 
-exports[`EuiAccordion props extraAction is rendered 1`] = `
+exports[`EuiAccordion props buttonProps is rendered 1`] = `
 <div
   class="euiAccordion"
 >
@@ -359,6 +359,51 @@ exports[`EuiAccordion props extraAction is rendered 1`] = `
     <button
       aria-controls="3"
       aria-expanded="false"
+      aria-label="aria-label"
+      class="euiAccordion__button testClass1 testClass2"
+      data-test-subj="test subject string"
+      id="generated-id"
+      type="button"
+    >
+      <span
+        class="euiAccordion__iconWrapper"
+      >
+        <span
+          class="euiAccordion__icon"
+          data-euiicon-type="arrowRight"
+        />
+      </span>
+      <span
+        class="euiIEFlexWrapFix"
+      />
+    </button>
+  </div>
+  <div
+    aria-labelledby="generated-id"
+    class="euiAccordion__childWrapper"
+    id="3"
+    role="region"
+    tabindex="-1"
+  >
+    <div>
+      <div
+        class=""
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiAccordion props extraAction is rendered 1`] = `
+<div
+  class="euiAccordion"
+>
+  <div
+    class="euiAccordion__triggerWrapper"
+  >
+    <button
+      aria-controls="4"
+      aria-expanded="false"
       class="euiAccordion__button"
       id="generated-id"
       type="button"
@@ -386,7 +431,7 @@ exports[`EuiAccordion props extraAction is rendered 1`] = `
   <div
     aria-labelledby="generated-id"
     class="euiAccordion__childWrapper"
-    id="3"
+    id="4"
     role="region"
     tabindex="-1"
   >
@@ -407,7 +452,7 @@ exports[`EuiAccordion props forceState is rendered 1`] = `
     class="euiAccordion__triggerWrapper"
   >
     <button
-      aria-controls="7"
+      aria-controls="8"
       aria-expanded="false"
       class="euiAccordion__button"
       id="generated-id"
@@ -429,7 +474,7 @@ exports[`EuiAccordion props forceState is rendered 1`] = `
   <div
     aria-labelledby="generated-id"
     class="euiAccordion__childWrapper"
-    id="7"
+    id="8"
     role="region"
     tabindex="-1"
   >
@@ -454,7 +499,7 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
     class="euiAccordion__triggerWrapper"
   >
     <button
-      aria-controls="4"
+      aria-controls="5"
       aria-expanded="true"
       class="euiAccordion__button"
       id="generated-id"
@@ -476,7 +521,7 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
   <div
     aria-labelledby="generated-id"
     class="euiAccordion__childWrapper"
-    id="4"
+    id="5"
     role="region"
     tabindex="-1"
   >
@@ -501,7 +546,7 @@ exports[`EuiAccordion props isLoading is rendered 1`] = `
     class="euiAccordion__triggerWrapper"
   >
     <button
-      aria-controls="9"
+      aria-controls="10"
       aria-expanded="false"
       class="euiAccordion__button"
       id="generated-id"
@@ -530,7 +575,7 @@ exports[`EuiAccordion props isLoading is rendered 1`] = `
   <div
     aria-labelledby="generated-id"
     class="euiAccordion__childWrapper"
-    id="9"
+    id="10"
     role="region"
     tabindex="-1"
   >
@@ -555,7 +600,7 @@ exports[`EuiAccordion props isLoadingMessage is rendered 1`] = `
     class="euiAccordion__triggerWrapper"
   >
     <button
-      aria-controls="10"
+      aria-controls="11"
       aria-expanded="false"
       class="euiAccordion__button"
       id="generated-id"
@@ -584,7 +629,7 @@ exports[`EuiAccordion props isLoadingMessage is rendered 1`] = `
   <div
     aria-labelledby="generated-id"
     class="euiAccordion__childWrapper"
-    id="10"
+    id="11"
     role="region"
     tabindex="-1"
   >

src/components/accordion/accordion.test.tsx

@@ -60,6 +60,16 @@ describe('EuiAccordion', () => {
       });
     });
 
+    describe('buttonProps', () => {
+      it('is rendered', () => {
+        const component = render(
+          <EuiAccordion id={getId()} buttonProps={requiredProps} />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+
     describe('extraAction', () => {
       it('is rendered', () => {
         const component = render(

src/components/accordion/accordion.tsx

@@ -47,6 +47,10 @@ export type EuiAccordionProps = CommonProps &
      * Class that will apply to the trigger for the accordion.
      */
     buttonClassName?: string;
+    /**
+     * Apply more props to the triggering button
+     */
+    buttonProps?: CommonProps & HTMLAttributes<HTMLButtonElement>;
     /**
      * Class that will apply to the trigger content for the accordion.
      */
@@ -170,6 +174,7 @@ export class EuiAccordion extends Component<
       forceState,
       isLoading,
       isLoadingMessage,
+      buttonProps,
       ...rest
     } = this.props;
 
@@ -196,7 +201,8 @@ export class EuiAccordion extends Component<
       {
         euiAccordion__buttonReverse: !extraAction && arrowDisplay === 'right',
       },
-      buttonClassName
+      buttonClassName,
+      buttonProps?.className
     );
 
     const iconClasses = classNames('euiAccordion__icon', {
@@ -214,7 +220,7 @@ export class EuiAccordion extends Component<
 
     let icon;
     let iconButton;
-    const buttonId = htmlIdGenerator()();
+    const buttonId = buttonProps?.id ?? htmlIdGenerator()();
     if (extraAction && arrowDisplay === 'right') {
       iconButton = (
         <button
@@ -267,6 +273,7 @@ export class EuiAccordion extends Component<
       <div className={classes} {...rest}>
         <div className="euiAccordion__triggerWrapper">
           <button
+            {...buttonProps}
             id={buttonId}
             aria-controls={id}
             aria-expanded={isOpen}

src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap

@@ -235,6 +235,72 @@ exports[`EuiCollapsibleNavGroup throws a warning if iconType is passed without a
 </div>
 `;
 
+exports[`EuiCollapsibleNavGroup when isCollapsible is true accepts accordion props 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiAccordion euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiAccordion__triggerWrapper"
+  >
+    <button
+      aria-controls="id"
+      aria-expanded="false"
+      aria-label="aria-label"
+      class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading testClass1 testClass2"
+      data-test-subj="test subject string"
+      id="generated-id"
+      type="button"
+    >
+      <span
+        class="euiAccordion__iconWrapper"
+      >
+        <span
+          class="euiAccordion__icon"
+          data-euiicon-type="arrowRight"
+        />
+      </span>
+      <span
+        class="euiIEFlexWrapFix"
+      >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+        >
+          <div
+            class="euiFlexItem"
+          >
+            <h3
+              class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+              id="id__title"
+            >
+              Title
+            </h3>
+          </div>
+        </div>
+      </span>
+    </button>
+  </div>
+  <div
+    aria-labelledby="generated-id"
+    class="euiAccordion__childWrapper"
+    id="id"
+    role="region"
+    tabindex="-1"
+  >
+    <div>
+      <div
+        class=""
+      >
+        <div
+          class="euiCollapsibleNavGroup__children"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accordion 1`] = `
 <div
   class="euiAccordion euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"

src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.test.tsx

@@ -119,6 +119,21 @@ describe('EuiCollapsibleNavGroup', () => {
 
       expect(component).toMatchSnapshot();
     });
+
+    test('accepts accordion props', () => {
+      const component = render(
+        <EuiCollapsibleNavGroup
+          isCollapsible={true}
+          initialIsOpen={false}
+          title="Title"
+          id="id"
+          {...requiredProps}
+          buttonProps={requiredProps}
+        />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
   });
 
   describe('throws a warning', () => {