fix(accordion): clickable element inside accordion

packages/examples/react-webpack/src/app/App.tsx

@@ -5,8 +5,8 @@ import styles from './app.scss';
 // import { FormFormik } from './components/formFormik/FormFormik';
 // import { FormHookForm } from './components/formHookForm/FormHookForm';
 // import { FormNative } from './components/formNative/FormNative';
-import { TestTimepicker } from './components/testTimepicker/TestTimepicker';
-// import { TestAccordion } from './components/testAccordion/TestAccordion';
+// import { TestTimepicker } from './components/testTimepicker/TestTimepicker';
+import { TestAccordion } from './components/testAccordion/TestAccordion';
 // import { TestModal } from './components/testModal/TestModal';
 // import { TestSelect } from './components/testSelect/TestSelect';
 // import { TestToggle } from './components/testToggle/TestToggle';
@@ -20,12 +20,12 @@ function App(): ReactElement {
       {/*<FormFormik />*/}
       {/*<FormHookForm />*/}
       {/* <FormNative /> */}
-      {/* <TestAccordion /> */}
+      <TestAccordion />
       {/*<QueryClientProvider client={queryClient}>*/}
       {/*  <TestSelect />*/}
       {/*</QueryClientProvider>*/}
       {/*<TestToggle />*/}
-      <TestTimepicker timezones='all' className='' />
+      {/* <TestTimepicker timezones='all' className='' /> */}
     </div>
   );
 }

packages/examples/react-webpack/src/app/components/testAccordion/TestAccordion.tsx

@@ -6,29 +6,36 @@ function TestAccordion(): ReactElement {
   const [isOpen, setIsOpen] = useState(false);
   const accordionRef = useRef<HTMLOdsAccordionElement>(null);
 
-  function onToggleClick() {
-    accordionRef.current?.toggle();
+  function onButtonClick() {
+    console.log('click');
   }
 
+  function onButtonSummaryClick() {
+    console.log('click on summary button')
+  }
+
+
   return (
     <div>
       <p>
         Accordion isOpen value: { isOpen.toString() }
       </p>
 
       <OdsAccordion onOdsToggle={ (e: OdsAccordionToggleEvent) => setIsOpen(e.detail.isOpen) }
-                    ref={ accordionRef }>
-        <span slot="summary">Hello, world!</span>
+        ref={ accordionRef }>
+        <span slot="summary">
+          Hello, world!
+          <OdsButton label="Click me summary" onClick={ onButtonSummaryClick }>
+          </OdsButton>
+        </span>
 
         <span>
           Lorem ipsum dolor sit amet ...
+
+          <OdsButton onClick={ onButtonClick }
+            label="Click me" />
         </span>
       </OdsAccordion>
-
-      <br /><br />
-
-      <OdsButton onClick={ onToggleClick }
-                 label="Toggle accordion" />
     </div>
   );
 }

packages/ods/react/tests/_app/src/components/ods-accordion.tsx

@@ -1,14 +1,30 @@
 import React from 'react-dom/client';
-import { OdsAccordion, OdsText } from 'ods-components-react';
+import { OdsAccordion, OdsButton, OdsText } from 'ods-components-react';
 
 const Accordion = () => {
+  function onDetailButtonClick() {
+    console.log('click on detail button')
+  }
+
+  function onSummaryButtonClick() {
+    console.log('click on summary button')
+  }
+
   return (
-    <OdsAccordion>
-      <span slot="summary">Hello, world!</span>
+    <OdsAccordion isOpen>
+      <span slot="summary">
+        Hello, world!
+        <OdsButton id="summary-button" label="Click me summary" onClick={ onSummaryButtonClick }>
+        </OdsButton>
+      </span>
 
-      <OdsText preset="span">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
-      </OdsText>
+      <div>
+        <OdsText preset="span">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
+        </OdsText>
+        <OdsButton id="detail-button" label="Click me detail" onClick={ onDetailButtonClick }>
+        </OdsButton>
+      </div>
     </OdsAccordion>
   );
 };

packages/ods/react/tests/e2e/ods-accordion.e2e.ts

@@ -20,4 +20,41 @@ describe('ods-accordion react', () => {
     expect(boundingBox?.height).toBeGreaterThan(0);
     expect(boundingBox?.width).toBeGreaterThan(0);
   });
+
+  it('should open accordion', async () => {
+    const elem = await page.$('ods-accordion');
+    await elem?.click();
+
+    const detail = await page.$('ods-accordion >>> .ods-accordion__details');
+    const openProperty = await detail?.getProperty('open');
+    expect(await openProperty?.jsonValue()).toBe(true);
+  });
+
+  it('trigger the odsClick handler on summary button inside accordion', async () => {
+    const elem = await page.$('ods-accordion #summary-button');
+    let consoleLog = '';
+    page.on('console', (consoleObj) => {
+      consoleLog = consoleObj.text();
+    });
+
+    await elem?.click();
+    // Small delay to ensure page console event has been resolved
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(consoleLog).toBe('click on summary button');
+  });
+
+  it('trigger the odsClick handler on detail button inside accordion', async () => {
+    const elem = await page.$('ods-accordion #detail-button');
+    let consoleLog = '';
+    page.on('console', (consoleObj) => {
+      consoleLog = consoleObj.text();
+    });
+
+    await elem?.click();
+    // Small delay to ensure page console event has been resolved
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(consoleLog).toBe('click on detail button');
+  });
 });

packages/ods/src/components/accordion/src/components/ods-accordion/ods-accordion.tsx

@@ -75,9 +75,9 @@ export class OdsAccordion {
   }
 
   private preventToggle(event: Event): void {
-    // This allows interactive elements to be put in the component without triggering the toggle on click
-    if (!this.isDisabled) {
-      event.stopImmediatePropagation();
+    // This block open detail when disabled
+    if (this.isDisabled) {
+      event.preventDefault();
     }
   }
 
@@ -89,13 +89,12 @@ export class OdsAccordion {
             'ods-accordion__details': true,
             'ods-accordion__details--disabled': this.isDisabled,
           }}
-          onClick={ (e: Event) => e.preventDefault() }
+          onClick={ (e: Event) => this.preventToggle(e) }
           open={ this.isOpen }
           part="accordion"
           ref={ (el) => this.detailsElement = el as HTMLDetailsElement }>
           <summary
             class="ods-accordion__details__summary"
-            onClick={ (e: Event) => this.preventToggle(e) }
             part="summary"
             tabindex={ this.isDisabled ? -1 : 0 }>
             <div class="ods-accordion__details__summary__slot">
@@ -110,7 +109,6 @@ export class OdsAccordion {
 
           <div
             class="ods-accordion__details__content"
-            onClick={ (e: Event) => this.preventToggle(e) }
             part="content">
             <slot></slot>
           </div>

packages/ods/src/components/accordion/src/index.html

@@ -21,14 +21,14 @@
   <ods-accordion id="default">
     <div slot="summary" style="display: grid; grid-template-columns: 1fr max-content; column-gap: 8px;">
       <span>Hello, world!</span>
-      <button>Details button</button>
+      <button id="summary-btn">Summary button</button>
     </div>
 
     <div>
       <ods-text preset="span">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       </ods-text>
-      <button>Summary button</button>
+      <button id="detail-btn">Detail button</button>
     </div>
   </ods-accordion>
 
@@ -37,20 +37,30 @@
 
   <script>
     const accordion = document.querySelector('#default');
+    const summaryButton = document.querySelector('#summary-btn');
     const toggleButton = document.querySelector('#toggle-btn');
+    const detailButton = document.querySelector('#detail-btn');
 
     accordion.addEventListener('odsToggle', (e) => {
       console.log('toggled: ', e.detail)
     });
 
     toggleButton.addEventListener('click', () => {
       accordion.toggle();
+    });
+    summaryButton.addEventListener('click', () => {
+      console.log('summary click')
+      // accordion.toggle();
       // if (accordion.hasAttribute('is-disabled')) {
       //   accordion.removeAttribute('is-disabled');
       // } else {
       //   accordion.setAttribute('is-disabled', '');
       // }
     });
+
+    detailButton.addEventListener('click', () => {
+      console.log('click')
+    });
   </script>
 
   <ods-accordion is-open>

packages/ods/src/components/accordion/tests/behaviour/ods-accordion.e2e.ts

@@ -102,6 +102,35 @@ describe('ods-popover behaviour', () => {
 
         expect((await isDetailsOpen())).toBe(false);
       });
+
+      it('should not toggle when clickable element inside', async() => {
+        await setup(`
+          <ods-accordion>
+            <span slot="summary">
+              Hello, world!
+              <button id="summary-btn">Summary button</button>
+            </span>
+
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
+            </p>
+            <button id="detail-btn">Detail button</button>
+          </ods-accordion>
+        `);
+        const summaryButton = await page.find('#summary-btn');
+        const detailButton = await page.find('#detail-btn');
+
+        await summaryButton.click();
+        await page.waitForChanges();
+        expect((await isDetailsOpen())).toBe(false);
+
+        await accordionElement.callMethod('toggle');
+        await page.waitForChanges();
+
+        await detailButton.click();
+        await page.waitForChanges();
+        expect((await isDetailsOpen())).toBe(true);
+      });
     });
   });
 });

packages/ods/src/components/accordion/tests/navigation/ods-accordion.e2e.ts

@@ -153,4 +153,35 @@ describe('ods-accordion navigation', () => {
 
     expect((await isDetailsOpen())).toBe(false);
   });
+
+  it('should not open / close summary when clickable element inside', async() => {
+    await setup(`
+      <ods-accordion>
+        <span slot="summary">
+          Hello, world!
+          <button id="summary-btn">Summary button</button>
+        </span>
+
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
+        </p>
+        <button id="detail-btn">Detail button</button>
+      </ods-accordion>
+    `);
+
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    await page.waitForChanges();
+
+    expect((await isDetailsOpen())).toBe(false);
+
+    await details.click();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    await page.waitForChanges();
+
+    expect((await isDetailsOpen())).toBe(true);
+  });
 });