fix: Adding better details to accordion events (#1769)

* 1764: Adding better details to accordion events

* Adding toggle:header to change event test

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: wesruv

elements/pfe-accordion/src/pfe-accordion-header.js

@@ -161,10 +161,11 @@ class PfeAccordionHeader extends PFElement {
     }
   }
 
-  _clickHandler() {
+  _clickHandler(event) {
     this.emitEvent(PfeAccordionHeader.events.change, {
       detail: {
         expanded: !this.expanded,
+        toggle: event.target,
       },
     });
   }

elements/pfe-accordion/src/pfe-accordion.js

@@ -178,7 +178,12 @@ class PfeAccordion extends PFElement {
 
     header.focus();
 
-    this.emitEvent(PfeAccordion.events.expand);
+    this.emitEvent(PfeAccordion.events.expand, {
+      detail: {
+        toggle: header,
+        panel: panel,
+      },
+    });
   }
 
   /**
@@ -207,7 +212,12 @@ class PfeAccordion extends PFElement {
     this._collapseHeader(header);
     this._collapsePanel(panel);
 
-    this.emitEvent(PfeAccordion.events.collapse);
+    this.emitEvent(PfeAccordion.events.collapse, {
+      detail: {
+        toggle: header,
+        panel: panel,
+      },
+    });
   }
 
   /**

elements/pfe-accordion/test/pfe-accordion.spec.js

@@ -179,14 +179,14 @@ describe("<pfe-accordion>", () => {
     const pfeAccordion = await createFixture(testElement);
     const header = pfeAccordion.querySelector('pfe-accordion-header');
     // const panel = pfeAccordion.querySelector('pfe-accordion-panel');
-    
+
     setTimeout(() => header.click(), 100);
 
     const { detail } = await oneEvent(pfeAccordion, "pfe-accordion:change");
 
     assert.deepEqual(detail, {
       expanded: true,
-      // toggle: header,
+      toggle: header,
       // panel: panel
     });
   });
@@ -215,12 +215,12 @@ describe("<pfe-accordion>", () => {
 
     // Wait until the animation is complete
     await oneEvent(pfeAccordion, "transitionend");
-    
+
     [2,3].forEach(idx => {
       const header = headers[idx - 1];
       assert.isTrue(header.expanded);
       assert.isTrue(header.hasAttribute("expanded"));
-  
+
       const panel = pfeAccordion._panelForHeader(header);
       assert.isTrue(panel.expanded);
       assert.isTrue(panel.hasAttribute("expanded"));
@@ -244,7 +244,7 @@ describe("<pfe-accordion>", () => {
 
     assert.equal(headers.length, 1);
     assert.equal(panels.length, 1);
-    
+
     await elementUpdated(pfeAccordion);
 
     assert.equal(headers[0].getAttribute('disclosure'), 'true');
@@ -274,7 +274,7 @@ describe("<pfe-accordion>", () => {
   it("should switch from an accordion to a disclosure if the disclosure attribute switches from false to true", async () => {
     const pfeAccordion = await createFixture(testElement);
     pfeAccordion.setAttribute("disclosure", "false");
-    
+
     const header = pfeAccordion.querySelector("pfe-accordion-header");
     const panel = pfeAccordion.querySelector("pfe-accordion-panel");