fix(web-components): defer Accordion item setup for SSR/DSD hydration (microsoft#35954)

Author: radium-v

change/@fluentui-web-components-231343f5-ab7c-48d2-9501-1355f61f5720.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: enhance Accordion component with improved item handling and lifecycle management",
+  "packageName": "@fluentui/web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/web-components.api.md

@@ -22,9 +22,11 @@ import { ViewTemplate } from '@microsoft/fast-element';
 export class Accordion extends FASTElement {
     // @internal (undocumented)
     protected accordionItems: Element[];
+    // (undocumented)
+    connectedCallback(): void;
     expandmode: AccordionExpandMode;
     // (undocumented)
-    expandmodeChanged(prev: AccordionExpandMode, next: AccordionExpandMode): void;
+    expandmodeChanged(prev: AccordionExpandMode | undefined, next: AccordionExpandMode): void;
     // @internal
     handleChange(source: any, propertyName: string): void;
     // @internal (undocumented)

packages/web-components/src/accordion-item/accordion-item.options.ts

@@ -1,4 +1,5 @@
-import type { ValuesOf } from '../utils/index.js';
+import { isCustomElement, type ValuesOf } from '../utils/typings.js';
+import type { BaseAccordionItem } from './accordion-item.base.js';
 
 /**
  * An Accordion Item header font size can be small, medium, large, and extra-large
@@ -29,3 +30,18 @@ export const AccordionItemMarkerPosition = {
  * @public
  */
 export type AccordionItemMarkerPosition = ValuesOf<typeof AccordionItemMarkerPosition>;
+
+/**
+ * Predicate function that determines if the element should be considered an accordion item element.
+ *
+ * @param element - The element to check.
+ * @param tagName - The tag name to check against, defaults to '-accordion-item'.
+ * @returns True if the element is an accordion item element, false otherwise.
+ * @public
+ */
+export function isAccordionItem(
+  element?: Node | null,
+  tagName: string = '-accordion-item',
+): element is BaseAccordionItem {
+  return isCustomElement(tagName)(element);
+}

packages/web-components/src/accordion/accordion.ts

@@ -1,6 +1,7 @@
-import { Observable } from '@microsoft/fast-element';
-import { attr, FASTElement, observable } from '@microsoft/fast-element';
+import { attr, FASTElement, Observable, observable, Updates } from '@microsoft/fast-element';
 import { BaseAccordionItem } from '../accordion-item/accordion-item.base.js';
+import { waitForConnectedDescendants } from '../utils/request-idle-callback.js';
+import { isAccordionItem } from '../accordion-item/accordion-item.options.js';
 import { AccordionExpandMode } from './accordion.options.js';
 
 /**
@@ -24,8 +25,8 @@ export class Accordion extends FASTElement {
    * HTML attribute: expand-mode
    */
   @attr({ attribute: 'expand-mode' })
-  public expandmode: AccordionExpandMode = AccordionExpandMode.multi;
-  public expandmodeChanged(prev: AccordionExpandMode, next: AccordionExpandMode) {
+  public expandmode!: AccordionExpandMode;
+  public expandmodeChanged(prev: AccordionExpandMode | undefined, next: AccordionExpandMode) {
     if (!this.$fastController.isConnected) {
       return;
     }
@@ -88,14 +89,13 @@ export class Accordion extends FASTElement {
    * @returns {void}
    */
   private findExpandedItem(): BaseAccordionItem | Element | null {
-    if (this.accordionItems.length === 0) {
+    if (!this.accordionItems || this.accordionItems?.length === 0) {
       return null;
     }
 
     return (
-      this.accordionItems.find(
-        (item: Element | BaseAccordionItem) => item instanceof BaseAccordionItem && item.expanded,
-      ) ?? this.accordionItems[0]
+      this.accordionItems.find((item: Element | BaseAccordionItem) => isAccordionItem(item) && item.expanded) ??
+      this.accordionItems[0]
     );
   }
 
@@ -105,29 +105,31 @@ export class Accordion extends FASTElement {
    * @returns {void}
    */
   private setItems = (): void => {
-    if (this.slottedAccordionItems.length === 0) {
-      return;
-    }
+    waitForConnectedDescendants(this, () => {
+      if (this.slottedAccordionItems.length === 0) {
+        return;
+      }
 
-    // Get all existing children and remove event listeners
-    const children: Element[] = Array.from(this.children);
-    this.removeItemListeners(children);
+      // Get all existing children and remove event listeners
+      const children: Element[] = Array.from(this.children);
+      this.removeItemListeners(children);
 
-    // Resubscribe to the `disabled` attribute of all children
-    children.forEach((child: Element) => Observable.getNotifier(child).subscribe(this, 'disabled'));
+      // Resubscribe to the `disabled` attribute of all children
+      children.forEach((child: Element) => Observable.getNotifier(child).subscribe(this, 'disabled'));
 
-    // Add event listeners to each non-disabled AccordionItem
-    this.accordionItems = children.filter(child => !child.hasAttribute('disabled'));
-    this.accordionItems.forEach((item: Element, index: number) => {
-      item.addEventListener('click', this.expandedChangedHandler);
-      // Subscribe to the expanded attribute of the item
-      Observable.getNotifier(item).subscribe(this, 'expanded');
-    });
+      // Add event listeners to each non-disabled AccordionItem
+      this.accordionItems = children.filter(child => !child.hasAttribute('disabled'));
+      this.accordionItems.forEach((item: Element, index: number) => {
+        item.addEventListener('click', this.expandedChangedHandler);
+        // Subscribe to the expanded attribute of the item
+        Observable.getNotifier(item).subscribe(this, 'expanded');
+      });
 
-    if (this.isSingleExpandMode()) {
-      const expandedItem = this.findExpandedItem() as BaseAccordionItem;
-      this.setSingleExpandMode(expandedItem);
-    }
+      if (this.isSingleExpandMode()) {
+        const expandedItem = this.findExpandedItem() as BaseAccordionItem;
+        this.setSingleExpandMode(expandedItem);
+      }
+    });
   };
 
   /**
@@ -144,25 +146,27 @@ export class Accordion extends FASTElement {
    * @returns {void}
    */
   private setSingleExpandMode(expandedItem: Element): void {
-    if (this.accordionItems.length === 0) {
-      return;
-    }
-    const currentItems = Array.from(this.accordionItems);
-    this.activeItemIndex = currentItems.indexOf(expandedItem);
-
-    currentItems.forEach((item: Element, index: number) => {
-      if (item instanceof BaseAccordionItem) {
-        if (this.activeItemIndex === index) {
-          item.expanded = true;
-          item.expandbutton.setAttribute('aria-disabled', 'true');
-        } else {
-          item.expanded = false;
-
-          if (!item.hasAttribute('disabled')) {
-            item.expandbutton.removeAttribute('aria-disabled');
+    requestAnimationFrame(() => {
+      if (this.accordionItems.length === 0) {
+        return;
+      }
+      const currentItems = Array.from(this.accordionItems);
+      this.activeItemIndex = currentItems.indexOf(expandedItem);
+
+      currentItems.forEach((item: Element, index: number) => {
+        if (isAccordionItem(item)) {
+          if (this.activeItemIndex === index) {
+            item.expanded = true;
+            item.expandbutton.setAttribute('aria-disabled', 'true');
+          } else {
+            item.expanded = false;
+
+            if (!item.hasAttribute('disabled')) {
+              item.expandbutton.removeAttribute('aria-disabled');
+            }
           }
         }
-      }
+      });
     });
   }
 
@@ -186,7 +190,7 @@ export class Accordion extends FASTElement {
   private expandedChangedHandler: EventListener = (evt: Event): void => {
     const item = evt.target as HTMLElement;
 
-    if (item instanceof BaseAccordionItem) {
+    if (isAccordionItem(item)) {
       if (!this.isSingleExpandMode()) {
         item.expanded = !item.expanded;
         // setSingleExpandMode sets activeItemIndex on its own
@@ -198,4 +202,13 @@ export class Accordion extends FASTElement {
       this.$emit('change');
     }
   };
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    requestAnimationFrame(() => {
+      this.expandmode = this.expandmode || AccordionExpandMode.multi;
+      this.setItems();
+    });
+  }
 }