fix(components): Unexpected behavior of multilevel accordions

.changeset/big-frogs-admire.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fixed a bug in nested accordions where closing a child item unintentionally closed all parent accordion elements.

packages/components/src/components/post-accordion-item/post-accordion-item.tsx

@@ -51,7 +51,7 @@ export class PostAccordionItem {
   // capture to make sure the "collapsed" property is updated before the event is consumed
   @Listen('postToggle', { capture: true })
   onCollapseToggle(event: CustomEvent<boolean>): void {
-    if ((event.target as HTMLElement).localName === 'post-accordion-item') {
+    if (event.target === this.host) {
       this.collapsed = !event.detail;
     }
   }

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

@@ -50,23 +50,24 @@ export class PostAccordion {
 
   @Listen('postToggle')
   collapseToggleHandler(event: CustomEvent<boolean>) {
-    if ((event.target as HTMLElement).localName === 'post-accordion-item') {
-      event.stopPropagation();
+    const toggledItem = event.target as HTMLElement;
+    const closestParentAccordion = toggledItem.closest('post-accordion');
 
-      const toggledItem = event.target as HTMLPostAccordionItemElement;
-      const isClosing = this.expandedItems.has(toggledItem);
+    if (closestParentAccordion === this.host) {
+      const toggledAccordionItem = event.target as HTMLPostAccordionItemElement;
+      const isClosing = this.expandedItems.has(toggledAccordionItem);
 
       if (isClosing) {
-        this.expandedItems.delete(toggledItem);
+        this.expandedItems.delete(toggledAccordionItem);
       } else {
-        this.expandedItems.add(toggledItem);
+        this.expandedItems.add(toggledAccordionItem);
       }
 
       if (this.multiple || isClosing) return;
 
       // close other open accordion items to have only one opened at a time
       Array.from(this.expandedItems.values())
-        .filter(item => item !== toggledItem)
+        .filter(item => item !== toggledAccordionItem)
         .forEach(item => {
           item.toggle(false);
         });