refactor(aria/accordion): split directives and resolve circular dependencies

Splits up the directives across files and resolve circular dependencies in them.

(cherry picked from commit 80ef657)

Author: crisbeto

goldens/aria/accordion/index.api.md

@@ -30,7 +30,7 @@ export class AccordionGroup {
     readonly multiExpandable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly _pattern: AccordionGroupPattern;
     readonly softDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly textDirection: WritableSignal<_angular_cdk_bidi.Direction>;
+    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>;

src/aria/accordion/BUILD.bazel

@@ -4,10 +4,10 @@ package(default_visibility = ["//visibility:public"])
 
 ng_project(
     name = "accordion",
-    srcs = [
-        "accordion.ts",
-        "index.ts",
-    ],
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
     deps = [
         "//:node_modules/@angular/core",
         "//src/aria/private",

src/aria/accordion/accordion-content.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {Directive} from '@angular/core';
+import {DeferredContent} from '@angular/aria/private';
+
+/**
+ * A structural directive that provides a mechanism for lazily rendering the content for an
+ * `ngAccordionPanel`.
+ *
+ * This directive should be applied to an `ng-template` inside an `ngAccordionPanel`.
+ * It allows the content of the panel to be lazily rendered, improving performance
+ * by only creating the content when the panel is first expanded.
+ *
+ * ```html
+ * <div ngAccordionPanel panelId="unique-id-1">
+ *   <ng-template ngAccordionContent>
+ *     <p>This is the content that will be displayed inside the panel.</p>
+ *   </ng-template>
+ * </div>
+ * ```
+ *
+ * @developerPreview 21.0
+ */
+@Directive({
+  selector: 'ng-template[ngAccordionContent]',
+  hostDirectives: [DeferredContent],
+})
+export class AccordionContent {}

src/aria/accordion/accordion-group.ts

@@ -0,0 +1,157 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {
+  Directive,
+  input,
+  ElementRef,
+  inject,
+  contentChildren,
+  afterRenderEffect,
+  signal,
+  booleanAttribute,
+  computed,
+} from '@angular/core';
+import {Directionality} from '@angular/cdk/bidi';
+import {AccordionGroupPattern, AccordionTriggerPattern} from '@angular/aria/private';
+import {AccordionTrigger} from './accordion-trigger';
+import {AccordionPanel} from './accordion-panel';
+import {ACCORDION_GROUP} from './accordion-tokens';
+
+/**
+ * A container for a group of accordion items. It manages the overall state and
+ * interactions of the accordion, such as keyboard navigation and expansion mode.
+ *
+ * The `ngAccordionGroup` serves as the root of a group of accordion triggers and panels,
+ * coordinating the behavior of the `ngAccordionTrigger` and `ngAccordionPanel` elements within it.
+ * It supports both single and multiple expansion modes.
+ *
+ * ```html
+ * <div ngAccordionGroup [multiExpandable]="true" [(expandedPanels)]="expandedItems">
+ *   <div class="accordion-item">
+ *     <h3>
+ *       <button ngAccordionTrigger panelId="item-1">Item 1</button>
+ *     </h3>
+ *     <div ngAccordionPanel panelId="item-1">
+ *       <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>
+ *     </h3>
+ *     <div ngAccordionPanel panelId="item-2">
+ *       <ng-template ngAccordionContent>
+ *         <p>Content for Item 2.</p>
+ *       </ng-template>
+ *     </div>
+ *   </div>
+ * </div>
+ * ```
+ *
+ * @developerPreview 21.0
+ */
+@Directive({
+  selector: '[ngAccordionGroup]',
+  exportAs: 'ngAccordionGroup',
+  host: {
+    '(keydown)': '_pattern.onKeydown($event)',
+    '(pointerdown)': '_pattern.onPointerdown($event)',
+    '(focusin)': '_pattern.onFocus($event)',
+  },
+  providers: [{provide: ACCORDION_GROUP, useExisting: AccordionGroup}],
+})
+export class AccordionGroup {
+  /** A reference to the group element. */
+  private readonly _elementRef = inject(ElementRef);
+
+  /** A reference to the group element. */
+  readonly element = this._elementRef.nativeElement as HTMLElement;
+
+  /** The AccordionTriggers nested inside this group. */
+  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});
+
+  /** The text direction (ltr or rtl). */
+  readonly textDirection = inject(Directionality).valueSignal;
+
+  /** Whether the entire accordion group is disabled. */
+  readonly disabled = input(false, {transform: booleanAttribute});
+
+  /** Whether multiple accordion items can be expanded simultaneously. */
+  readonly multiExpandable = input(true, {transform: booleanAttribute});
+
+  /**
+   * Whether to allow disabled items to receive focus. When `true`, disabled items are
+   * focusable but not interactive. When `false`, disabled items are skipped during navigation.
+   */
+  readonly softDisabled = input(true, {transform: booleanAttribute});
+
+  /** Whether keyboard navigation should wrap around from the last item to the first, and vice-versa. */
+  readonly wrap = input(false, {transform: booleanAttribute});
+
+  /** The UI pattern instance for this accordion group. */
+  readonly _pattern: AccordionGroupPattern = new AccordionGroupPattern({
+    ...this,
+    activeItem: signal(undefined),
+    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();
+  }
+
+  /** Collapses all accordion panels. */
+  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

@@ -0,0 +1,106 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {
+  Directive,
+  input,
+  inject,
+  afterRenderEffect,
+  signal,
+  computed,
+  WritableSignal,
+} from '@angular/core';
+import {_IdGenerator} from '@angular/cdk/a11y';
+import {
+  DeferredContentAware,
+  AccordionPanelPattern,
+  AccordionTriggerPattern,
+} from '@angular/aria/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`.
+ * 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>
+ *     <p>This content is lazily rendered and will be shown when the panel is expanded.</p>
+ *   </ng-template>
+ * </div>
+ * ```
+ *
+ * @developerPreview 21.0
+ */
+@Directive({
+  selector: '[ngAccordionPanel]',
+  exportAs: 'ngAccordionPanel',
+  hostDirectives: [
+    {
+      directive: DeferredContentAware,
+      inputs: ['preserveContent'],
+    },
+  ],
+  host: {
+    'role': 'region',
+    '[attr.id]': '_pattern.id()',
+    '[attr.aria-labelledby]': '_pattern.accordionTrigger()?.id()',
+    '[attr.inert]': '!visible() ? true : null',
+  },
+})
+export class AccordionPanel {
+  /** The DeferredContentAware host directive. */
+  private readonly _deferredContentAware = inject(DeferredContentAware);
+
+  /** 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());
+
+  /** 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(() => {
+      this._deferredContentAware.contentVisible.set(this.visible());
+    });
+  }
+
+  /** Expands this item. */
+  expand() {
+    this._accordionTriggerPattern()?.open();
+  }
+
+  /** Collapses this item. */
+  collapse() {
+    this._accordionTriggerPattern()?.close();
+  }
+
+  /** Toggles the expansion state of this item. */
+  toggle() {
+    this._accordionTriggerPattern()?.toggle();
+  }
+}

src/aria/accordion/accordion-tokens.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {InjectionToken} from '@angular/core';
+import type {AccordionGroup} from './accordion-group';
+
+/** Token used to expose the accordion group. */
+export const ACCORDION_GROUP = new InjectionToken<AccordionGroup>('ACCORDION_GROUP');