refactor(multiple): use afterNextRender for setDefaultState across all aria directives

Author: adolgachev

src/aria/grid/grid.ts

@@ -7,6 +7,7 @@
  */
 
 import {
+  afterNextRender,
   afterRenderEffect,
   booleanAttribute,
   computed,
@@ -151,7 +152,7 @@ export class Grid {
     });
 
     // Use Write mode for all direct DOM focus management actions.
-    afterRenderEffect({write: () => this._pattern.setDefaultStateEffect()});
+    afterNextRender({write: () => this._pattern.setDefaultStateEffect()});
     afterRenderEffect({write: () => this._pattern.resetStateEffect()});
     afterRenderEffect({write: () => this._pattern.resetFocusEffect()});
     afterRenderEffect({write: () => this._pattern.restoreFocusEffect()});

src/aria/listbox/listbox.ts

@@ -7,6 +7,7 @@
  */
 
 import {
+  afterNextRender,
   afterRenderEffect,
   booleanAttribute,
   computed,
@@ -158,6 +159,8 @@ export class Listbox<V> {
       this._popup._controls.set(this._pattern as ComboboxListboxPattern<V>);
     }
 
+    afterNextRender({write: () => this._pattern.setDefaultState()});
+
     afterRenderEffect(() => {
       if (typeof ngDevMode === 'undefined' || ngDevMode) {
         const violations = this._pattern.validate();
@@ -167,10 +170,6 @@ export class Listbox<V> {
       }
     });
 
-    afterRenderEffect(() => {
-      this._pattern.setDefaultStateEffect();
-    });
-
     // Ensure that if the active item is removed from
     // the list, the listbox updates it's focus state.
     afterRenderEffect(() => {

src/aria/menu/menu-bar.ts

@@ -7,7 +7,7 @@
  */
 
 import {
-  afterRenderEffect,
+  afterNextRender,
   booleanAttribute,
   computed,
   contentChildren,
@@ -123,9 +123,7 @@ export class MenuBar<V> {
       element: computed(() => this._elementRef.nativeElement),
     });
 
-    afterRenderEffect(() => {
-      this._pattern.setDefaultStateEffect();
-    });
+    afterNextRender({write: () => this._pattern.setDefaultState()});
   }
 
   /** Closes the menubar. */

src/aria/menu/menu.ts

@@ -9,6 +9,7 @@
 import {
   Directive,
   ElementRef,
+  afterNextRender,
   afterRenderEffect,
   booleanAttribute,
   computed,
@@ -166,6 +167,8 @@ export class Menu<V> {
       }
     });
 
+    afterNextRender({write: () => this._pattern.setDefaultState()});
+
     // 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
@@ -178,10 +181,6 @@ export class Menu<V> {
         }
       },
     });
-
-    afterRenderEffect(() => {
-      this._pattern.setDefaultStateEffect();
-    });
   }
 
   /** Closes the menu. */

src/aria/tabs/tab-list.ts

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

src/aria/toolbar/toolbar.ts

@@ -7,7 +7,7 @@
  */
 
 import {
-  afterRenderEffect,
+  afterNextRender,
   Directive,
   ElementRef,
   inject,
@@ -106,9 +106,7 @@ export class Toolbar<V> {
   });
 
   constructor() {
-    afterRenderEffect(() => {
-      this._pattern.setDefaultStateEffect();
-    });
+    afterNextRender({write: () => this._pattern.setDefaultState()});
   }
 
   _register(widget: ToolbarWidget<V>) {

src/aria/tree/tree.ts

@@ -9,6 +9,7 @@
 import {
   Directive,
   ElementRef,
+  afterNextRender,
   afterRenderEffect,
   booleanAttribute,
   computed,
@@ -171,6 +172,8 @@ export class Tree<V> {
       this._popup?._controls?.set(this._pattern as ComboboxTreePattern<V>);
     }
 
+    afterNextRender({write: () => this._pattern.setDefaultState()});
+
     afterRenderEffect(() => {
       if (typeof ngDevMode === 'undefined' || ngDevMode) {
         const violations = this._pattern.validate();
@@ -180,10 +183,6 @@ export class Tree<V> {
       }
     });
 
-    afterRenderEffect(() => {
-      this._pattern.setDefaultStateEffect();
-    });
-
     afterRenderEffect(() => {
       const items = inputs.items();
       const activeItem = untracked(() => inputs.activeItem());