chore(components): use the post-collapsible-trigger within the post-a…

…ccordion-item (#3215)

Co-authored-by: Philipp Gfeller <[email protected]>
Co-authored-by: Oliver Schürch <[email protected]>

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

@@ -70,17 +70,13 @@ export class PostAccordionItem {
     return (
       <Host id={this.id} data-version={version}>
         <div part="accordion-item" class="accordion-item">
-          <HeadingTag class="accordion-header" id={`${this.id}--header`}>
-            <button
-              aria-controls={`${this.id}--collapse`}
-              aria-expanded={`${!this.collapsed}`}
-              class={`accordion-button${this.collapsed ? ' collapsed' : ''}`}
-              onClick={() => this.toggle()}
-              type="button"
-            >
-              <slot name="header" />
-            </button>
-          </HeadingTag>
+          <post-collapsible-trigger for={`${this.id}--collapse`}>
+            <HeadingTag class="accordion-header" id={`${this.id}--header`}>
+              <button type="button" class={`accordion-button${this.collapsed ? ' collapsed' : ''}`}>
+                <slot name="header" />
+              </button>
+            </HeadingTag>
+          </post-collapsible-trigger>
 
           <post-collapsible
             id={`${this.id}--collapse`}

packages/components/src/components/post-accordion-item/readme.md

@@ -51,11 +51,13 @@ Type: `Promise<boolean>`
 
 ### Depends on
 
+- [post-collapsible-trigger](../post-collapsible-trigger)
 - [post-collapsible](../post-collapsible)
 
 ### Graph
 ```mermaid
 graph TD;
+  post-accordion-item --> post-collapsible-trigger
   post-accordion-item --> post-collapsible
   style post-accordion-item fill:#f9f,stroke:#333,stroke-width:4px
 ```

packages/components/src/components/post-collapsible-trigger/post-collapsible-trigger.tsx

@@ -1,6 +1,6 @@
-import { Component, Element, Listen, Method, Prop, Watch } from '@stencil/core';
+import { Component, Element, Method, Prop, Watch } from '@stencil/core';
 import { version } from '@root/package.json';
-import { checkNonEmpty, checkType, debounce } from '@/utils';
+import { checkNonEmpty, checkType, debounce, getRoot } from '@/utils';
 import { PostCollapsibleCustomEvent } from '@/components';
 
 @Component({
@@ -9,6 +9,7 @@ import { PostCollapsibleCustomEvent } from '@/components';
 export class PostCollapsibleTrigger {
   private trigger?: HTMLButtonElement;
   private observer = new MutationObserver(() => this.setTrigger());
+  private root?: Document | ShadowRoot;
 
   @Element() host: HTMLPostCollapsibleTriggerElement;
 
@@ -35,6 +36,19 @@ export class PostCollapsibleTrigger {
     this.observer.observe(this.host, { childList: true, subtree: true });
   }
 
+  /**
+   * Attach a "postToggle" event listener to the root node
+   * to update the trigger's "aria-expanded" attribute whenever the controlled post-collapsible is toggled
+   */
+  componentWillLoad() {
+    this.root = getRoot(this.host);
+
+    this.root.addEventListener('postToggle', (e: PostCollapsibleCustomEvent<boolean>) => {
+      if (!this.trigger || !e.target.isEqualNode(this.collapsible)) return;
+      this.trigger.setAttribute('aria-expanded', `${e.detail}`);
+    });
+  }
+
   /**
    * Add the "data-version" to the host element and set the trigger
    */
@@ -52,15 +66,6 @@ export class PostCollapsibleTrigger {
     this.observer.disconnect();
   }
 
-  /**
-   * Update the "aria-expanded" attribute on the trigger anytime the controlled post-collapsible is toggled
-   */
-  @Listen('postToggle', { target: 'document' })
-  setAriaExpanded(e: PostCollapsibleCustomEvent<boolean>) {
-    if (!this.trigger || !e.target.isEqualNode(this.collapsible)) return;
-    this.trigger.setAttribute('aria-expanded', `${e.detail}`);
-  }
-
   /**
    * Update the "aria-controls" and "aria-expanded" attributes on the trigger button
    */
@@ -96,7 +101,8 @@ export class PostCollapsibleTrigger {
    * Retrieve the post-collapsible controlled by the trigger
    */
   private get collapsible(): HTMLPostCollapsibleElement | null {
-    const ref = document.getElementById(this.for);
+    const ref = this.root.getElementById(this.for);
+
     if (ref && ref.localName === 'post-collapsible') {
       return ref as HTMLPostCollapsibleElement;
     }

packages/components/src/components/post-collapsible-trigger/readme.md

@@ -25,6 +25,19 @@ Type: `Promise<void>`
 
 
 
+## Dependencies
+
+### Used by
+
+ - [post-accordion-item](../post-accordion-item)
+
+### Graph
+```mermaid
+graph TD;
+  post-accordion-item --> post-collapsible-trigger
+  style post-collapsible-trigger fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

packages/components/src/utils/get-root.ts

@@ -0,0 +1,11 @@
+export function getRoot(element: HTMLElement): Document | ShadowRoot {
+  const root = element.getRootNode();
+
+  if (root instanceof Document || root instanceof ShadowRoot) {
+    return root;
+  }
+
+  throw new Error(
+    'Attempting to access root node before the element is attached to the document or shadow tree.',
+  );
+}

packages/components/src/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './property-checkers';
 export * from './debounce';
+export * from './get-root';
 export * from './is-motion-reduced';
 export * from './sass-export';
 export * from './timeout';

packages/documentation/src/stories/components/collapsible/collapsible.stories.ts

@@ -50,6 +50,7 @@ function renderCollapsible(
   setTimeout(() => {
     ignoreToggle = false;
   }, 200);
+
   return html`
     <post-collapsible-trigger for=${context.id}>
       <button class="btn btn-secondary">Toggle Collapsible</button>