refactor(aria/accordion): simplify code by using template references instead of user id to match panels with triggers

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

@@ -10,7 +10,6 @@ import { untracked } from '@angular/core/primitives/signals';
 
 // @public
 export interface AccordionGroupInputs extends Omit<ListNavigationInputs<AccordionTriggerPattern> & ListFocusInputs<AccordionTriggerPattern> & Omit<ListExpansionInputs, 'items'>, 'focusMode'> {
-    getItem: (e: Element | null | undefined) => AccordionTriggerPattern | undefined;
 }
 
 // @public
@@ -31,43 +30,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

@@ -8,19 +8,17 @@
 
 import {
   Directive,
-  input,
   ElementRef,
-  inject,
-  contentChildren,
-  afterRenderEffect,
-  signal,
   booleanAttribute,
   computed,
+  contentChildren,
+  inject,
+  input,
+  signal,
 } from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
-import {AccordionGroupPattern, AccordionTriggerPattern} from '../private';
+import {AccordionGroupPattern} 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="ngAccordionPanel">
  *       <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="ngAccordionPanel">
  *       <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;
@@ -110,26 +109,9 @@ export class AccordionGroup {
     items: this._triggerPatterns,
     // TODO(ok7sai): Investigate whether an accordion should support horizontal mode.
     orientation: () => 'vertical',
-    getItem: e => this._getItem(e),
     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();
@@ -139,20 +121,4 @@ export class AccordionGroup {
   collapseAll() {
     this._pattern.expansionBehavior.closeAll();
   }
-
-  /** Gets the trigger pattern for a given element. */
-  private _getItem(element: Element | null | undefined): AccordionTriggerPattern | undefined {
-    let target = element;
-
-    while (target) {
-      const pattern = this._triggerPatterns().find(t => t.element() === target);
-      if (pattern) {
-        return pattern;
-      }
-
-      target = target.parentElement?.closest('[ngAccordionTrigger]');
-    }
-
-    return undefined;
-  }
 }

src/aria/accordion/accordion-panel.ts

@@ -8,28 +8,28 @@
 
 import {
   Directive,
-  input,
-  inject,
+  WritableSignal,
   afterRenderEffect,
-  signal,
   computed,
-  WritableSignal,
+  inject,
+  input,
+  signal,
 } 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
+ * expose 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">
+ * <div ngAccordionPanel #panel="ngAccordionPanel">
  *   <ng-template ngAccordionContent>
  *     <p>This content is lazily rendered and will be shown when the panel is expanded.</p>
  *   </ng-template>
@@ -50,8 +50,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 +62,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(() => {