fix(aria/tree): tree item visibility issue (#32156)

Author: ok7sai

src/aria/tree/tree.ts

@@ -20,6 +20,7 @@ import {
   OnInit,
   OnDestroy,
   untracked,
+  afterNextRender,
 } from '@angular/core';
 import {_IdGenerator} from '@angular/cdk/a11y';
 import {Directionality} from '@angular/cdk/bidi';
@@ -267,7 +268,11 @@ export class TreeItem<V> extends DeferredContentAware implements OnInit, OnDestr
 
   constructor() {
     super();
-    this.preserveContent.set(true);
+    afterNextRender(() => {
+      if (this.tree().pattern instanceof ComboboxTreePattern) {
+        this.preserveContent.set(true);
+      }
+    });
     // Connect the group's hidden state to the DeferredContentAware's visibility.
     afterRenderEffect(() => {
       this.tree().pattern instanceof ComboboxTreePattern

src/aria/ui-patterns/tree/tree.spec.ts

@@ -1189,15 +1189,44 @@ describe('Tree Pattern', () => {
     });
 
     it('should correctly compute visible state', () => {
-      const {allItems} = createTree(treeExample, treeInputs);
+      const {allItems} = createTree(
+        [
+          {
+            value: 'Item 0',
+            children: [
+              {
+                value: 'Item 0-0',
+                children: [{value: 'Item 0-0-0', disabled: false, selectable: true}],
+                disabled: false,
+                selectable: true,
+              },
+              {
+                value: 'Item 0-1',
+                disabled: false,
+                selectable: true,
+              },
+            ],
+            disabled: false,
+            selectable: true,
+          },
+        ],
+        treeInputs,
+      );
       const item0 = getItemByValue(allItems(), 'Item 0');
       const item0_0 = getItemByValue(allItems(), 'Item 0-0');
+      const item0_0_0 = getItemByValue(allItems(), 'Item 0-0-0');
 
       expect(item0_0.visible()).toBe(false);
+      expect(item0_0_0.visible()).toBe(false);
       item0.expansion.open();
       expect(item0_0.visible()).toBe(true);
+      expect(item0_0_0.visible()).toBe(false);
+      item0_0.expansion.open();
+      expect(item0_0.visible()).toBe(true);
+      expect(item0_0_0.visible()).toBe(true);
       item0.expansion.close();
       expect(item0_0.visible()).toBe(false);
+      expect(item0_0_0.visible()).toBe(false);
     });
 
     it('should correctly compute expanded state', () => {

src/aria/ui-patterns/tree/tree.ts

@@ -80,7 +80,9 @@ export class TreeItemPattern<V> implements ListItem<V>, ExpansionItem {
   readonly expanded = computed(() => this.expansion.isExpanded());
 
   /** Whether this item is visible. */
-  readonly visible = computed(() => this.parent().expanded());
+  readonly visible: SignalLike<boolean> = computed(
+    () => this.parent().expanded() && this.parent().visible(),
+  );
 
   /** The number of items under the same parent at the same level. */
   readonly setsize = computed(() => this.parent().children().length);
@@ -183,6 +185,9 @@ export class TreePattern<V> {
   /** The root is always expanded. */
   readonly expanded = () => true;
 
+  /** The roow is always visible. */
+  readonly visible = () => true;
+
   /** The tabindex of the tree. */
   readonly tabindex: SignalLike<-1 | 0> = computed(() => this.listBehavior.tabindex());