refactor(multiple): Clean up afterRenderEffect usage across angular aria

goldens/aria/combobox/index.api.md

@@ -36,11 +36,12 @@ export class ComboboxDialog {
     // (undocumented)
     close(): void;
     readonly combobox: Combobox<any>;
-    readonly element: HTMLElement;
+    readonly element: HTMLDialogElement;
+    readonly id: _angular_core.InputSignal<string>;
     // (undocumented)
     readonly _pattern: ComboboxDialogPattern;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxDialog, "dialog[ngComboboxDialog]", ["ngComboboxDialog"], {}, {}, never, never, true, [{ directive: typeof ComboboxPopup; inputs: {}; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxDialog, "dialog[ngComboboxDialog]", ["ngComboboxDialog"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof ComboboxPopup; inputs: {}; outputs: {}; }]>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxDialog, never>;
 }

src/aria/accordion/accordion-panel.ts

@@ -72,8 +72,10 @@ export class AccordionPanel {
 
   constructor() {
     // Connect the panel's hidden state to the DeferredContentAware's visibility.
-    afterRenderEffect(() => {
-      this._deferredContentAware.contentVisible.set(this.visible());
+    afterRenderEffect({
+      write: () => {
+        this._deferredContentAware.contentVisible.set(this.visible());
+      },
     });
   }
 

src/aria/combobox/BUILD.bazel

@@ -11,6 +11,7 @@ ng_project(
     deps = [
         "//:node_modules/@angular/core",
         "//src/aria/private",
+        "//src/cdk/a11y",
         "//src/cdk/bidi",
     ],
 )

src/aria/combobox/combobox-dialog.ts

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {afterRenderEffect, Directive, ElementRef, inject} from '@angular/core';
+import {afterRenderEffect, Directive, ElementRef, inject, input} from '@angular/core';
+import {_IdGenerator} from '@angular/cdk/a11y';
 import {ComboboxDialogPattern} from '../private';
 import {Combobox} from './combobox';
 import {ComboboxPopup} from './combobox-popup';
@@ -46,35 +47,34 @@ export class ComboboxDialog {
   private readonly _elementRef = inject(ElementRef<HTMLDialogElement>);
 
   /** A reference to the dialog element. */
-  readonly element = this._elementRef.nativeElement as HTMLElement;
+  readonly element = this._elementRef.nativeElement as HTMLDialogElement;
 
   /** The combobox that the dialog belongs to. */
   readonly combobox = inject(Combobox);
 
+  /** The unique identifier for the trigger. */
+  readonly id = input(inject(_IdGenerator).getId('ng-combobox-dialog-', true));
+
   /** A reference to the parent combobox popup, if one exists. */
   private readonly _popup = inject<ComboboxPopup<unknown>>(ComboboxPopup, {
     optional: true,
   });
 
-  readonly _pattern: ComboboxDialogPattern;
+  readonly _pattern: ComboboxDialogPattern = new ComboboxDialogPattern({
+    id: this.id,
+    element: () => this.element,
+    combobox: this.combobox._pattern,
+  });
 
   constructor() {
-    this._pattern = new ComboboxDialogPattern({
-      id: () => '',
-      element: () => this._elementRef.nativeElement,
-      combobox: this.combobox._pattern,
-    });
-
     if (this._popup) {
       this._popup._controls.set(this._pattern);
     }
 
-    afterRenderEffect(() => {
-      if (this._elementRef) {
-        this.combobox._pattern.expanded()
-          ? this._elementRef.nativeElement.showModal()
-          : this._elementRef.nativeElement.close();
-      }
+    afterRenderEffect({
+      write: () => {
+        this.combobox._pattern.expanded() ? this.element.showModal() : this.element.close();
+      },
     });
   }
 

src/aria/combobox/combobox-input.ts

@@ -81,10 +81,12 @@ export class ComboboxInput {
     }
 
     /** Focuses & selects the first item in the combobox if the user changes the input value. */
-    afterRenderEffect(() => {
-      this.value();
-      controls?.items();
-      untracked(() => this.combobox._pattern.onFilter());
+    afterRenderEffect({
+      write: () => {
+        this.value();
+        controls?.items();
+        untracked(() => this.combobox._pattern.onFilter());
+      },
     });
   }
 }

src/aria/combobox/combobox.ts

@@ -140,13 +140,15 @@ export class Combobox<V> {
       }
     });
 
-    afterRenderEffect(() => {
-      if (
-        !this._deferredContentAware?.contentVisible() &&
-        (this._pattern.isFocused() || this.alwaysExpanded())
-      ) {
-        this._deferredContentAware?.contentVisible.set(true);
-      }
+    afterRenderEffect({
+      write: () => {
+        if (
+          !this._deferredContentAware?.contentVisible() &&
+          (this._pattern.isFocused() || this.alwaysExpanded())
+        ) {
+          this._deferredContentAware?.contentVisible.set(true);
+        }
+      },
     });
   }
 

src/aria/grid/grid-cell-widget.ts

@@ -108,18 +108,22 @@ export class GridCellWidget {
   }
 
   constructor() {
-    afterRenderEffect(() => {
-      const activateEvent = this._pattern.lastActivateEvent();
-      if (activateEvent) {
-        this.activated.emit(activateEvent);
-      }
+    afterRenderEffect({
+      read: () => {
+        const activateEvent = this._pattern.lastActivateEvent();
+        if (activateEvent) {
+          this.activated.emit(activateEvent);
+        }
+      },
     });
 
-    afterRenderEffect(() => {
-      const deactivateEvent = this._pattern.lastDeactivateEvent();
-      if (deactivateEvent) {
-        this.deactivated.emit(deactivateEvent);
-      }
+    afterRenderEffect({
+      read: () => {
+        const deactivateEvent = this._pattern.lastDeactivateEvent();
+        if (deactivateEvent) {
+          this.deactivated.emit(deactivateEvent);
+        }
+      },
     });
   }
 

src/aria/grid/grid.ts

@@ -129,11 +129,12 @@ export class Grid {
   });
 
   constructor() {
-    afterRenderEffect(() => this._pattern.setDefaultStateEffect());
-    afterRenderEffect(() => this._pattern.resetStateEffect());
-    afterRenderEffect(() => this._pattern.resetFocusEffect());
-    afterRenderEffect(() => this._pattern.restoreFocusEffect());
-    afterRenderEffect(() => this._pattern.focusEffect());
+    // Use Write mode for all direct DOM focus management actions.
+    afterRenderEffect({write: () => this._pattern.setDefaultStateEffect()});
+    afterRenderEffect({write: () => this._pattern.resetStateEffect()});
+    afterRenderEffect({write: () => this._pattern.resetFocusEffect()});
+    afterRenderEffect({write: () => this._pattern.restoreFocusEffect()});
+    afterRenderEffect({write: () => this._pattern.focusEffect()});
   }
 
   /** Gets the cell pattern for a given element. */

src/aria/listbox/listbox.ts

@@ -158,38 +158,44 @@ export class Listbox<V> {
       this._popup._controls.set(this._pattern as ComboboxListboxPattern<V>);
     }
 
-    afterRenderEffect(() => {
-      if (typeof ngDevMode === 'undefined' || ngDevMode) {
-        const violations = this._pattern.validate();
-        for (const violation of violations) {
-          console.error(violation);
+    // Check for any violationns after the DOM has been updated.
+    afterRenderEffect({
+      read: () => {
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+          const violations = this._pattern.validate();
+          for (const violation of violations) {
+            console.error(violation);
+          }
         }
-      }
+      },
     });
 
-    afterRenderEffect(() => {
-      this._pattern.setDefaultStateEffect();
-    });
+    afterRenderEffect({write: () => this._pattern.setDefaultStateEffect()});
 
     // Ensure that if the active item is removed from
     // the list, the listbox updates it's focus state.
-    afterRenderEffect(() => {
-      const items = inputs.items();
-      const activeItem = untracked(() => inputs.activeItem());
+    afterRenderEffect({
+      write: () => {
+        const items = inputs.items();
+        const activeItem = untracked(() => inputs.activeItem());
 
-      if (!items.some(i => i === activeItem) && activeItem) {
-        this._pattern.listBehavior.unfocus();
-      }
+        if (!items.some(i => i === activeItem) && activeItem) {
+          this._pattern.listBehavior.unfocus();
+        }
+      },
     });
 
     // Ensure that the value is always in sync with the available options.
-    afterRenderEffect(() => {
-      const items = inputs.items();
-      const value = untracked(() => this.value());
-
-      if (items && value.some(v => !items.some(i => i.value() === v))) {
-        this.value.set(value.filter(v => items.some(i => i.value() === v)));
-      }
+    // This needs to be after the render for the value to always be available.
+    afterRenderEffect({
+      write: () => {
+        const items = inputs.items();
+        const value = untracked(() => this.value());
+
+        if (items && value.some(v => !items.some(i => i.value() === v))) {
+          this.value.set(value.filter(v => items.some(i => i.value() === v)));
+        }
+      },
     });
   }
 

src/aria/menu/menu-bar.ts

@@ -104,7 +104,7 @@ export class MenuBar<V> {
   readonly _pattern: MenuBarPattern<V>;
 
   /** The menu items as a writable signal. */
-  private readonly _itemPatterns = signal<any[]>([]);
+  private readonly _itemPatterns = computed(() => this._items().map(i => i._pattern));
 
   /** A callback function triggered when a menu item is selected. */
   readonly itemSelected = output<V>();
@@ -123,13 +123,7 @@ export class MenuBar<V> {
       element: computed(() => this._elementRef.nativeElement),
     });
 
-    afterRenderEffect(() => {
-      this._itemPatterns.set(this._items().map(i => i._pattern));
-    });
-
-    afterRenderEffect(() => {
-      this._pattern.setDefaultStateEffect();
-    });
+    afterRenderEffect({write: () => this._pattern.setDefaultStateEffect()});
   }
 
   /** Closes the menubar. */

src/aria/menu/menu.ts

@@ -154,31 +154,33 @@ export class Menu<V> {
       itemSelected: (value: V) => this.itemSelected.emit(value),
     });
 
-    afterRenderEffect(() => {
-      const parent = this.parent();
-      if (parent instanceof MenuItem && parent.parent instanceof MenuBar) {
-        this._deferredContentAware?.contentVisible.set(true);
-      } else {
-        this._deferredContentAware?.contentVisible.set(
-          this._pattern.visible() || !!this.parent()?._pattern.hasBeenInteracted(),
-        );
-      }
+    afterRenderEffect({
+      write: () => {
+        const parent = this.parent();
+        if (parent instanceof MenuItem && parent.parent instanceof MenuBar) {
+          this._deferredContentAware?.contentVisible.set(true);
+        } else {
+          this._deferredContentAware?.contentVisible.set(
+            this._pattern.visible() || !!this.parent()?._pattern.hasBeenInteracted(),
+          );
+        }
+      },
     });
 
     // TODO(wagnermaciel): This is a redundancy needed for if the user uses display: none to hide
     // submenus. In those cases, the ui pattern is calling focus() before the ui has a chance to
     // update the display property. The result is focus() being called on an element that is not
     // focusable. This simply retries focusing the element after render.
-    afterRenderEffect(() => {
-      if (this._pattern.visible()) {
-        const activeItem = untracked(() => this._pattern.inputs.activeItem());
-        this._pattern.listBehavior.goto(activeItem!);
-      }
+    afterRenderEffect({
+      write: () => {
+        if (this.visible()) {
+          const activeItem = untracked(() => this._pattern.inputs.activeItem());
+          this._pattern.listBehavior.goto(activeItem!);
+        }
+      },
     });
 
-    afterRenderEffect(() => {
-      this._pattern.setDefaultStateEffect();
-    });
+    afterRenderEffect({write: () => this._pattern.setDefaultStateEffect()});
   }
 
   /** Closes the menu. */

src/aria/private/deferred-content/deferred-content.ts

@@ -53,17 +53,19 @@ export class DeferredContent implements OnDestroy {
   readonly deferredContentAware = signal(this._deferredContentAware);
 
   constructor() {
-    afterRenderEffect(() => {
-      if (this.deferredContentAware()?.contentVisible()) {
-        if (!this._isRendered) {
+    afterRenderEffect({
+      write: () => {
+        if (this.deferredContentAware()?.contentVisible()) {
+          if (!this._isRendered) {
+            this._destroyContent();
+            this._currentViewRef = this._viewContainerRef.createEmbeddedView(this._templateRef);
+            this._isRendered = true;
+          }
+        } else if (!this.deferredContentAware()?.preserveContent()) {
           this._destroyContent();
-          this._currentViewRef = this._viewContainerRef.createEmbeddedView(this._templateRef);
-          this._isRendered = true;
+          this._isRendered = false;
         }
-      } else if (!this.deferredContentAware()?.preserveContent()) {
-        this._destroyContent();
-        this._isRendered = false;
-      }
+      },
     });
   }
 

src/aria/tabs/tab-list.ts

@@ -8,6 +8,7 @@
 
 import {Directionality} from '@angular/cdk/bidi';
 import {
+  afterRenderEffect,
   booleanAttribute,
   computed,
   Directive,
@@ -16,7 +17,6 @@ import {
   input,
   model,
   signal,
-  afterRenderEffect,
   OnInit,
   OnDestroy,
 } from '@angular/core';
@@ -118,9 +118,7 @@ export class TabList implements OnInit, OnDestroy {
   });
 
   constructor() {
-    afterRenderEffect(() => {
-      this._pattern.setDefaultStateEffect();
-    });
+    afterRenderEffect({write: () => this._pattern.setDefaultStateEffect()});
 
     afterRenderEffect(() => {
       const tab = this._pattern.selectedTab();

src/aria/tabs/tab-panel.ts

@@ -90,7 +90,11 @@ export class TabPanel implements OnInit, OnDestroy {
   });
 
   constructor() {
-    afterRenderEffect(() => this._deferredContentAware.contentVisible.set(this.visible()));
+    afterRenderEffect({
+      write: () => {
+        this._deferredContentAware.contentVisible.set(this.visible());
+      },
+    });
   }
 
   ngOnInit() {