refactor(aria/accordion): Change to use template references to match panel with trigger

Author: adolgachev

goldens/aria/accordion/index.api.md

@@ -7,6 +7,7 @@
 import * as _angular_cdk_bidi from '@angular/cdk/bidi';
 import * as _angular_core from '@angular/core';
 import { OnDestroy } from '@angular/core';
+import { OnInit } from '@angular/core';
 import { WritableSignal } from '@angular/core';
 
 // @public
@@ -19,7 +20,6 @@ export class AccordionContent {
 
 // @public
 export class AccordionGroup {
-    constructor();
     collapseAll(): void;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly element: HTMLElement;
@@ -30,7 +30,7 @@ export class AccordionGroup {
     readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
     readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AccordionGroup, "[ngAccordionGroup]", ["ngAccordionGroup"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "multiExpandable": { "alias": "multiExpandable"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, {}, ["_triggers", "_panels"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AccordionGroup, "[ngAccordionGroup]", ["ngAccordionGroup"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "multiExpandable": { "alias": "multiExpandable"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, {}, ["_triggers"], never, true, never>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionGroup, never>;
 }
@@ -42,31 +42,30 @@ export class AccordionPanel {
     collapse(): void;
     expand(): void;
     readonly id: _angular_core.InputSignal<string>;
-    readonly panelId: _angular_core.InputSignal<string>;
-    readonly _pattern: AccordionPanelPattern;
     toggle(): void;
     readonly visible: _angular_core.Signal<boolean>;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AccordionPanel, "[ngAccordionPanel]", ["ngAccordionPanel"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "panelId": { "alias": "panelId"; "required": true; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AccordionPanel, "[ngAccordionPanel]", ["ngAccordionPanel"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionPanel, never>;
 }
 
 // @public
-export class AccordionTrigger {
-    readonly _accordionPanelPattern: WritableSignal<AccordionPanelPattern | undefined>;
+export class AccordionTrigger implements OnInit {
     readonly active: _angular_core.Signal<boolean>;
     collapse(): void;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly element: HTMLElement;
     expand(): void;
     readonly expanded: _angular_core.ModelSignal<boolean>;
     readonly id: _angular_core.InputSignal<string>;
-    readonly panelId: _angular_core.InputSignal<string>;
-    readonly _pattern: AccordionTriggerPattern;
+    // (undocumented)
+    ngOnInit(): void;
+    readonly panel: _angular_core.InputSignal<AccordionPanel>;
+    _pattern: AccordionTriggerPattern;
     toggle(): void;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AccordionTrigger, "[ngAccordionTrigger]", ["ngAccordionTrigger"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "panelId": { "alias": "panelId"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AccordionTrigger, "[ngAccordionTrigger]", ["ngAccordionTrigger"], { "panel": { "alias": "panel"; "required": true; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, never, true, never>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionTrigger, never>;
 }

goldens/aria/private/index.api.md

@@ -31,43 +31,24 @@ export class AccordionGroupPattern {
     toggle(): void;
 }
 
-// @public
-export interface AccordionPanelInputs {
-    accordionTrigger: SignalLike<AccordionTriggerPattern | undefined>;
-    id: SignalLike<string>;
-    panelId: SignalLike<string>;
-}
-
-// @public
-export class AccordionPanelPattern {
-    constructor(inputs: AccordionPanelInputs);
-    accordionTrigger: SignalLike<AccordionTriggerPattern | undefined>;
-    hidden: SignalLike<boolean>;
-    id: SignalLike<string>;
-    // (undocumented)
-    readonly inputs: AccordionPanelInputs;
-}
-
 // @public
 export interface AccordionTriggerInputs extends Omit<ListNavigationItem & ListFocusItem, 'index'>, Omit<ExpansionItem, 'expandable'> {
     accordionGroup: SignalLike<AccordionGroupPattern>;
-    accordionPanel: SignalLike<AccordionPanelPattern | undefined>;
-    panelId: SignalLike<string>;
+    accordionPanelId: SignalLike<string>;
 }
 
 // @public
 export class AccordionTriggerPattern implements ListNavigationItem, ListFocusItem, ExpansionItem {
     constructor(inputs: AccordionTriggerInputs);
     readonly active: SignalLike<boolean>;
     close(): void;
-    readonly controls: SignalLike<string | undefined>;
+    readonly controls: SignalLike<string>;
     readonly disabled: SignalLike<boolean>;
     readonly element: SignalLike<HTMLElement>;
     readonly expandable: SignalLike<boolean>;
     readonly expanded: WritableSignalLike<boolean>;
     readonly hardDisabled: SignalLike<boolean>;
     readonly id: SignalLike<string>;
-    readonly index: SignalLike<number>;
     // (undocumented)
     readonly inputs: AccordionTriggerInputs;
     open(): void;

src/aria/accordion/accordion-group.ts

@@ -12,15 +12,13 @@ import {
   ElementRef,
   inject,
   contentChildren,
-  afterRenderEffect,
   signal,
   booleanAttribute,
   computed,
 } from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
 import {AccordionGroupPattern, AccordionTriggerPattern} from '../private';
 import {AccordionTrigger} from './accordion-trigger';
-import {AccordionPanel} from './accordion-panel';
 import {ACCORDION_GROUP} from './accordion-tokens';
 
 /**
@@ -32,22 +30,22 @@ import {ACCORDION_GROUP} from './accordion-tokens';
  * It supports both single and multiple expansion modes.
  *
  * ```html
- * <div ngAccordionGroup [multiExpandable]="true" [(expandedPanels)]="expandedItems">
+ * <div ngAccordionGroup [multiExpandable]="true">
  *   <div class="accordion-item">
  *     <h3>
- *       <button ngAccordionTrigger panelId="item-1">Item 1</button>
+ *       <button ngAccordionTrigger panel="panel1">Item 1</button>
  *     </h3>
- *     <div ngAccordionPanel panelId="item-1">
+ *     <div ngAccordionPanel #panel1="ngAccordionTrigger">
  *       <ng-template ngAccordionContent>
  *         <p>Content for Item 1.</p>
  *       </ng-template>
  *     </div>
  *   </div>
  *   <div class="accordion-item">
  *     <h3>
- *       <button ngAccordionTrigger panelId="item-2">Item 2</button>
+ *       <button ngAccordionTrigger panel="panel2">Item 2</button>
  *     </h3>
- *     <div ngAccordionPanel panelId="item-2">
+ *     <div ngAccordionPanel #panel2="ngAccordionTrigger">
  *       <ng-template ngAccordionContent>
  *         <p>Content for Item 2.</p>
  *       </ng-template>
@@ -80,10 +78,11 @@ export class AccordionGroup {
   private readonly _triggers = contentChildren(AccordionTrigger, {descendants: true});
 
   /** The AccordionTrigger patterns nested inside this group. */
-  private readonly _triggerPatterns = computed(() => this._triggers().map(t => t._pattern));
-
-  /** The AccordionPanels nested inside this group. */
-  private readonly _panels = contentChildren(AccordionPanel, {descendants: true});
+  private readonly _triggerPatterns = computed(() =>
+    this._triggers()
+      .map(t => t._pattern)
+      .filter(p => !!p),
+  );
 
   /** The text direction (ltr or rtl). */
   readonly textDirection = inject(Directionality).valueSignal;
@@ -114,22 +113,6 @@ export class AccordionGroup {
     element: () => this.element,
   });
 
-  constructor() {
-    // Effect to link triggers with their corresponding panels and update the group's items.
-    afterRenderEffect(() => {
-      const triggers = this._triggers();
-      const panels = this._panels();
-
-      for (const trigger of triggers) {
-        const panel = panels.find(p => p.panelId() === trigger.panelId());
-        trigger._accordionPanelPattern.set(panel?._pattern);
-        if (panel) {
-          panel._accordionTriggerPattern.set(trigger._pattern);
-        }
-      }
-    });
-  }
-
   /** Expands all accordion panels if multi-expandable. */
   expandAll() {
     this._pattern.expansionBehavior.openAll();

src/aria/accordion/accordion-panel.ts

@@ -16,21 +16,20 @@ import {
   WritableSignal,
 } from '@angular/core';
 import {_IdGenerator} from '@angular/cdk/a11y';
-import {DeferredContentAware, AccordionPanelPattern, AccordionTriggerPattern} from '../private';
+import {DeferredContentAware, AccordionTriggerPattern} from '../private';
 
 /**
  * The content panel of an accordion item that is conditionally visible.
  *
- * This directive is a container for the content that is shown or hidden. It requires
- * a `panelId` that must match the `panelId` of its corresponding `ngAccordionTrigger`.
+ * This directive is a container for the content that is shown or hidden. It should
+ * exlse a template reference that will be used by the corresponding `ngAccordionTrigger`.
  * The content within the panel should be provided using an `ng-template` with the
  * `ngAccordionContent` directive so that the content is not rendered on the page until the trigger
  * is expanded. It applies `role="region"` for accessibility and uses the `inert` attribute to hide
  * its content from assistive technologies when not visible.
  *
  * ```html
- * <div ngAccordionPanel panelId="unique-id-1">
- *   <ng-template ngAccordionContent>
+ * <div ngAccordionPanel #panel="ngAccordionTrigger">
  *     <p>This content is lazily rendered and will be shown when the panel is expanded.</p>
  *   </ng-template>
  * </div>
@@ -50,8 +49,8 @@ import {DeferredContentAware, AccordionPanelPattern, AccordionTriggerPattern} fr
   ],
   host: {
     'role': 'region',
-    '[attr.id]': '_pattern.id()',
-    '[attr.aria-labelledby]': '_pattern.accordionTrigger()?.id()',
+    '[attr.id]': 'id()',
+    '[attr.aria-labelledby]': '_accordionTriggerPattern()?.id()',
     '[attr.inert]': '!visible() ? true : null',
   },
 })
@@ -62,23 +61,13 @@ export class AccordionPanel {
   /** A global unique identifier for the panel. */
   readonly id = input(inject(_IdGenerator).getId('ng-accordion-panel-', true));
 
-  /** A local unique identifier for the panel, used to match with its trigger's `panelId`. */
-  readonly panelId = input.required<string>();
-
   /** Whether the accordion panel is visible. True if the associated trigger is expanded. */
-  readonly visible = computed(() => !this._pattern.hidden());
+  readonly visible = computed(() => this._accordionTriggerPattern()?.expanded() === true);
 
   /** The parent accordion trigger pattern that controls this panel. This is set by AccordionGroup. */
   readonly _accordionTriggerPattern: WritableSignal<AccordionTriggerPattern | undefined> =
     signal(undefined);
 
-  /** The UI pattern instance for this panel. */
-  readonly _pattern: AccordionPanelPattern = new AccordionPanelPattern({
-    id: this.id,
-    panelId: this.panelId,
-    accordionTrigger: () => this._accordionTriggerPattern(),
-  });
-
   constructor() {
     // Connect the panel's hidden state to the DeferredContentAware's visibility.
     afterRenderEffect(() => {

src/aria/accordion/accordion-trigger.ts

@@ -10,28 +10,28 @@ import {
   Directive,
   input,
   ElementRef,
+  OnInit,
   inject,
-  signal,
   model,
   booleanAttribute,
   computed,
-  WritableSignal,
 } from '@angular/core';
 import {_IdGenerator} from '@angular/cdk/a11y';
-import {AccordionPanelPattern, AccordionTriggerPattern} from '../private';
+import {AccordionTriggerPattern} from '../private';
 import {ACCORDION_GROUP} from './accordion-tokens';
+import {AccordionPanel} from './accordion-panel';
 
 /**
  * The trigger that toggles the visibility of its associated `ngAccordionPanel`.
  *
- * This directive requires a `panelId` that must match the `panelId` of the `ngAccordionPanel` it
- * controls. When clicked, it will expand or collapse the panel. It also handles keyboard
+ * This directive requires the `panel` input be set to the template reference of the `ngAccordionPanel`
+ * it controls. When clicked, it will expand or collapse the panel. It also handles keyboard
  * interactions for navigation within the `ngAccordionGroup`. It applies `role="button"` and manages
  * `aria-expanded`, `aria-controls`, and `aria-disabled` attributes for accessibility.
  * The `disabled` input can be used to disable the trigger.
  *
  * ```html
- * <button ngAccordionTrigger panelId="unique-id-1">
+ * <button ngAccordionTrigger panel="panel">
  *   Accordion Trigger Text
  * </button>
  * ```
@@ -45,15 +45,15 @@ import {ACCORDION_GROUP} from './accordion-tokens';
   host: {
     '[attr.data-active]': 'active()',
     'role': 'button',
-    '[id]': '_pattern.id()',
+    '[id]': 'id()',
     '[attr.aria-expanded]': 'expanded()',
     '[attr.aria-controls]': '_pattern.controls()',
     '[attr.aria-disabled]': '_pattern.disabled()',
     '[attr.disabled]': '_pattern.hardDisabled() ? true : null',
     '[attr.tabindex]': '_pattern.tabIndex()',
   },
 })
-export class AccordionTrigger {
+export class AccordionTrigger implements OnInit {
   /** A reference to the trigger element. */
   private readonly _elementRef = inject(ElementRef);
 
@@ -63,32 +63,33 @@ export class AccordionTrigger {
   /** The parent AccordionGroup. */
   private readonly _accordionGroup = inject(ACCORDION_GROUP);
 
+  /** The associated AccordionPanel. */
+  readonly panel = input.required<AccordionPanel>();
+
   /** A unique identifier for the widget. */
   readonly id = input(inject(_IdGenerator).getId('ng-accordion-trigger-', true));
 
-  /** A local unique identifier for the trigger, used to match with its panel's `panelId`. */
-  readonly panelId = input.required<string>();
-
   /** Whether the trigger is disabled. */
   readonly disabled = input(false, {transform: booleanAttribute});
 
   /** Whether the corresponding panel is expanded. */
   readonly expanded = model<boolean>(false);
 
   /** Whether the trigger is active. */
-  readonly active = computed(() => this._pattern.active());
-
-  /** The accordion panel pattern controlled by this trigger. This is set by AccordionGroup. */
-  readonly _accordionPanelPattern: WritableSignal<AccordionPanelPattern | undefined> =
-    signal(undefined);
+  readonly active = computed(() => this._pattern!.active());
 
   /** The UI pattern instance for this trigger. */
-  readonly _pattern: AccordionTriggerPattern = new AccordionTriggerPattern({
-    ...this,
-    accordionGroup: computed(() => this._accordionGroup._pattern),
-    accordionPanel: this._accordionPanelPattern,
-    element: () => this.element,
-  });
+  _pattern!: AccordionTriggerPattern;
+
+  ngOnInit() {
+    this._pattern = new AccordionTriggerPattern({
+      ...this,
+      accordionGroup: computed(() => this._accordionGroup._pattern),
+      accordionPanelId: () => this.panel().id(),
+      element: () => this.element,
+    });
+    this.panel()._accordionTriggerPattern.set(this._pattern);
+  }
 
   /** Expands this item. */
   expand() {

src/aria/accordion/accordion.spec.ts

@@ -387,13 +387,13 @@ describe('AccordionGroup', () => {
         <div class="item-container">
           <button
             ngAccordionTrigger
-            [panelId]="item.panelId"
+            [panel]="panel"
             [disabled]="item.disabled"
             [(expanded)]="item.expanded"
           >{{ item.header }}</button>
           <div
             ngAccordionPanel
-            [panelId]="item.panelId"
+            #panel="ngAccordionPanel"
           >
             <ng-template ngAccordionContent>
               {{ item.content }}