From edd45ed26158cf5c8765fb8ff5095b34138f6baf Mon Sep 17 00:00:00 2001
From: Cassandra Choi <cassc@google.com>
Date: Fri, 17 Feb 2023 16:47:22 -0500
Subject: [PATCH 01/18] feat(cdk/tree): add cache of nodes to the tree

---
 src/cdk/tree/tree.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts
index 780e8697ad1b..3255d4b35d8b 100644
--- a/src/cdk/tree/tree.ts
+++ b/src/cdk/tree/tree.ts
@@ -60,6 +60,10 @@ function coerceObservable<T>(data: T | Observable<T>): Observable<T> {
   return data;
 }
 
+function isNotNullish<T>(val: T | null | undefined): val is T {
+  return val != null;
+}
+
 /**
  * CDK tree component that connects with a data source to retrieve data of type `T` and renders
  * dataNodes with hierarchy. Updates the dataNodes when new data is provided by the data source.

From 6210d3dced3301b03f1f614af384c26f33a8bf8b Mon Sep 17 00:00:00 2001
From: Cassandra Choi <cassc@google.com>
Date: Fri, 17 Feb 2023 16:47:22 -0500
Subject: [PATCH 02/18] feat(cdk/tree): bug fixes for tree and key manager

---
 src/cdk/a11y/key-manager/tree-key-manager.ts |   8 ++
 src/cdk/tree/toggle.ts                       |   2 +-
 src/cdk/tree/tree.ts                         | 124 +++++++++++++++++--
 3 files changed, 126 insertions(+), 8 deletions(-)

diff --git a/src/cdk/a11y/key-manager/tree-key-manager.ts b/src/cdk/a11y/key-manager/tree-key-manager.ts
index e998ece5d102..f5103d05b42b 100644
--- a/src/cdk/a11y/key-manager/tree-key-manager.ts
+++ b/src/cdk/a11y/key-manager/tree-key-manager.ts
@@ -276,6 +276,14 @@ export class TreeKeyManager<T extends TreeKeyManagerItem> {
     return this._activeItem;
   }
 
+  /**
+   * Focus the initial element; this is intended to be called when the tree is focused for
+   * the first time.
+   */
+  onInitialFocus(): void {
+    this._focusFirstItem();
+  }
+
   private _setActiveItem(index: number): void;
   private _setActiveItem(item: T): void;
   private _setActiveItem(itemOrIndex: number | T) {
diff --git a/src/cdk/tree/toggle.ts b/src/cdk/tree/toggle.ts
index a5f95cee5fab..3a4466f776ca 100644
--- a/src/cdk/tree/toggle.ts
+++ b/src/cdk/tree/toggle.ts
@@ -18,7 +18,7 @@ import {CdkTree, CdkTreeNode} from './tree';
   selector: '[cdkTreeNodeToggle]',
   host: {
     '(click)': '_toggle($event)',
-    'tabindex': '0',
+    'tabindex': '-1',
   },
 })
 export class CdkTreeNodeToggle<T, K = T> {
diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts
index 3255d4b35d8b..532745e638da 100644
--- a/src/cdk/tree/tree.ts
+++ b/src/cdk/tree/tree.ts
@@ -5,7 +5,8 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {FocusableOption} from '@angular/cdk/a11y';
+import {TreeKeyManager, TreeKeyManagerItem} from '@angular/cdk/a11y';
+import {Directionality} from '@angular/cdk/bidi';
 import {coerceNumberProperty} from '@angular/cdk/coercion';
 import {CollectionViewer, DataSource, isDataSource, SelectionModel} from '@angular/cdk/collections';
 import {
@@ -16,12 +17,14 @@ import {
   ContentChildren,
   Directive,
   ElementRef,
+  EventEmitter,
   Input,
   IterableChangeRecord,
   IterableDiffer,
   IterableDiffers,
   OnDestroy,
   OnInit,
+  Output,
   QueryList,
   TrackByFunction,
   ViewChild,
@@ -75,6 +78,9 @@ function isNotNullish<T>(val: T | null | undefined): val is T {
   host: {
     'class': 'cdk-tree',
     'role': 'tree',
+    '[attr.tabindex]': '_getTabindex()',
+    '(keydown)': '_sendKeydownToKeyManager($event)',
+    '(focus)': '_focusInitialTreeItem()',
   },
   encapsulation: ViewEncapsulation.None,
 
@@ -214,7 +220,14 @@ export class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer,
     new Map<K, CdkTreeNode<T, K>>(),
   );
 
-  constructor(private _differs: IterableDiffers, private _changeDetectorRef: ChangeDetectorRef) {}
+  /** The key manager for this tree. Handles focus and activation based on user keyboard input. */
+  _keyManager: TreeKeyManager<CdkTreeNode<T, K>>;
+
+  constructor(
+    private _differs: IterableDiffers,
+    private _changeDetectorRef: ChangeDetectorRef,
+    private _dir: Directionality,
+  ) {}
 
   ngOnInit() {
     this._dataDiffer = this._differs.find([]).create(this.trackBy);
@@ -256,6 +269,26 @@ export class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer,
     }
   }
 
+  ngAfterContentInit() {
+    this._keyManager = new TreeKeyManager({
+      items: combineLatest([this._dataNodes, this._nodes]).pipe(
+        map(([dataNodes, nodes]) =>
+          dataNodes.map(data => nodes.get(this._getExpansionKey(data))).filter(isNotNullish),
+        ),
+      ),
+      trackBy: node => this._getExpansionKey(node.data),
+      typeAheadDebounceInterval: true,
+      horizontalOrientation: this._dir.value,
+    });
+
+    this._keyManager.change
+      .pipe(startWith(null), pairwise(), takeUntil(this._onDestroy))
+      .subscribe(([prev, next]) => {
+        prev?._setTabUnfocusable();
+        next?._setTabFocusable();
+      });
+  }
+
   ngAfterContentChecked() {
     const defaultNodeDefs = this._nodeDefs.filter(def => !def.when);
     if (defaultNodeDefs.length > 1 && (typeof ngDevMode === 'undefined' || ngDevMode)) {
@@ -268,13 +301,17 @@ export class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer,
     }
   }
 
-  // TODO(tinayuangao): Work on keyboard traversal and actions, make sure it's working for RTL
-  //     and nested trees.
+  _getTabindex() {
+    // If the `TreeKeyManager` has no active item, then we know that we need to focus the initial
+    // item when the tree is focused. We set the tabindex to be `0` so that we can capture
+    // the focus event and redirect it. Otherwise, we unset it.
+    return this._keyManager.getActiveItem() ? null : 0;
+  }
 
   /**
    * Switch to the provided data source by resetting the data and unsubscribing from the current
    * render change subscription if one exists. If the data source is null, interpret this by
-   * clearing the node outlet. Otherwise start listening for new data.
+   * clearIng the node outlet. Otherwise start listening for new data.
    */
   private _switchDataSource(dataSource: DataSource<T> | Observable<T[]> | T[]) {
     if (this._dataSource && typeof (this._dataSource as DataSource<T>).disconnect === 'function') {
@@ -649,6 +686,37 @@ export class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer,
     return group.indexOf(dataNode) + 1;
   }
 
+  /** Given a CdkTreeNode, gets the node that renders that node's parent's data. */
+  _getNodeParent(node: CdkTreeNode<T, K>) {
+    const parent = this._parents.get(node.data);
+    return parent && this._nodes.value.get(this._getExpansionKey(parent));
+  }
+
+  /** Given a CdkTreeNode, gets the nodes that renders that node's child data. */
+  _getNodeChildren(node: CdkTreeNode<T, K>) {
+    const children = coerceObservable(this._getChildrenAccessor()?.(node.data) ?? []);
+    return children.pipe(
+      map(children =>
+        children
+          .map(child => this._nodes.value.get(this._getExpansionKey(child)))
+          .filter(isNotNullish),
+      ),
+    );
+  }
+
+  /** `keydown` event handler; this just passes the event to the `TreeKeyManager`. */
+  _sendKeydownToKeyManager(event: KeyboardEvent) {
+    this._keyManager.onKeydown(event);
+  }
+
+  /** `focus` event handler; this focuses the initial item if there isn't already one available. */
+  _focusInitialTreeItem() {
+    if (this._keyManager.getActiveItem()) {
+      return;
+    }
+    this._keyManager.onInitialFocus();
+  }
+
   /**
    * Gets all nodes in the tree, through recursive expansion.
    *
@@ -811,9 +879,10 @@ export class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer,
     '[attr.aria-level]': 'level + 1',
     '[attr.aria-posinset]': '_getPositionInSet()',
     '[attr.aria-setsize]': '_getSetSize()',
+    'tabindex': '-1',
   },
 })
-export class CdkTreeNode<T, K = T> implements FocusableOption, OnDestroy, OnInit {
+export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerItem {
   /**
    * The role of the tree node.
    *
@@ -844,6 +913,16 @@ export class CdkTreeNode<T, K = T> implements FocusableOption, OnDestroy, OnInit
     }
   }
 
+  /**
+   * Whether or not this node is disabled. If it's disabled, then the user won't be able to focus
+   * or activate this node.
+   */
+  @Input() isDisabled?: boolean;
+
+  /** This emits when the node has been programatically activated. */
+  @Output()
+  readonly activation: EventEmitter<T> = new EventEmitter<T>();
+
   /**
    * The most recently created `CdkTreeNode`. We save it in static variable so we can retrieve it
    * in `CdkTree` and set the data to it.
@@ -918,11 +997,42 @@ export class CdkTreeNode<T, K = T> implements FocusableOption, OnDestroy, OnInit
     this._destroyed.complete();
   }
 
-  /** Focuses the menu item. Implements for FocusableOption. */
+  getParent(): CdkTreeNode<T, K> | null {
+    return this._tree._getNodeParent(this) ?? null;
+  }
+
+  getChildren(): Array<CdkTreeNode<T, K>> | Observable<Array<CdkTreeNode<T, K>>> {
+    return this._tree._getNodeChildren(this);
+  }
+
+  /** Focuses this data node. Implemented for TreeKeyManagerItem. */
   focus(): void {
     this._elementRef.nativeElement.focus();
   }
 
+  /** Emits an activation event. Implemented for TreeKeyManagerItem. */
+  activate(): void {
+    this.activation.next(this._data);
+  }
+
+  /** Collapses this data node. Implemented for TreeKeyManagerItem. */
+  collapse(): void {
+    this._tree.collapse(this._data);
+  }
+
+  /** Expands this data node. Implemented for TreeKeyManagerItem. */
+  expand(): void {
+    this._tree.expand(this._data);
+  }
+
+  _setTabFocusable() {
+    this._elementRef.nativeElement.setAttribute('tabindex', '0');
+  }
+
+  _setTabUnfocusable() {
+    this._elementRef.nativeElement.setAttribute('tabindex', '-1');
+  }
+
   // TODO: role should eventually just be set in the component host
   protected _setRoleFromData(): void {
     this.role = 'treeitem';

From 09e707d5b4659f2fe426a4d707d0894fde0c6d1b Mon Sep 17 00:00:00 2001
From: Cassandra Choi <cassc@google.com>
Date: Fri, 17 Feb 2023 16:47:22 -0500
Subject: [PATCH 03/18] feat(cdk/tree): flatten data that uses childrenAccessor

---
 src/cdk/tree/tree.ts | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts
index 532745e638da..84e3393f6c42 100644
--- a/src/cdk/tree/tree.ts
+++ b/src/cdk/tree/tree.ts
@@ -43,7 +43,17 @@ import {
   Subject,
   Subscription,
 } from 'rxjs';
-import {concatMap, map, reduce, startWith, switchMap, take, takeUntil, tap} from 'rxjs/operators';
+import {
+  concatMap,
+  map,
+  pairwise,
+  reduce,
+  startWith,
+  switchMap,
+  take,
+  takeUntil,
+  tap,
+} from 'rxjs/operators';
 import {TreeControl} from './control/tree-control';
 import {CdkTreeNodeDef, CdkTreeNodeOutletContext} from './node';
 import {CdkTreeNodeOutlet} from './outlet';
@@ -865,6 +875,22 @@ export class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer,
     }
     return null;
   }
+
+  private _flattenChildren(nodes: readonly T[]): Observable<readonly T[]> {
+    // If we're using TreeControl or levelAccessor, we don't need to manually
+    // flatten things here.
+    if (!this.childrenAccessor) {
+      return observableOf(nodes);
+    } else {
+      return observableOf(...nodes).pipe(
+        concatMap(node => concat(observableOf([node]), this._getAllChildrenRecursively(node))),
+        reduce((results, nodes) => {
+          results.push(...nodes);
+          return results;
+        }, [] as T[]),
+      );
+    }
+  }
 }
 
 /**

From d4543968248a73e6e391eab317c582d9bef5a6d4 Mon Sep 17 00:00:00 2001
From: Cassandra Choi <cassc@google.com>
Date: Fri, 17 Feb 2023 16:47:23 -0500
Subject: [PATCH 04/18] feat(cdk/tree): add examples, fix bugs

---
 src/cdk/tree/tree.ts                                   | 10 ++++++++--
 .../cdk/tree/cdk-tree-flat/cdk-tree-flat-example.html  |  4 +++-
 .../tree/cdk-tree-nested/cdk-tree-nested-example.html  | 10 ++++++++--
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts
index 84e3393f6c42..d1b6c0d73702 100644
--- a/src/cdk/tree/tree.ts
+++ b/src/cdk/tree/tree.ts
@@ -933,9 +933,9 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
   }
   set isExpanded(isExpanded: boolean) {
     if (isExpanded) {
-      this._tree.expand(this.data);
+      this.expand();
     } else {
-      this._tree.collapse(this.data);
+      this.collapse();
     }
   }
 
@@ -949,6 +949,10 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
   @Output()
   readonly activation: EventEmitter<T> = new EventEmitter<T>();
 
+  /** This emits when the node's expansion status has been changed. */
+  @Output()
+  readonly expandedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
   /**
    * The most recently created `CdkTreeNode`. We save it in static variable so we can retrieve it
    * in `CdkTree` and set the data to it.
@@ -1044,11 +1048,13 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
   /** Collapses this data node. Implemented for TreeKeyManagerItem. */
   collapse(): void {
     this._tree.collapse(this._data);
+    this.expandedChange.emit(this.isExpanded);
   }
 
   /** Expands this data node. Implemented for TreeKeyManagerItem. */
   expand(): void {
     this._tree.expand(this._data);
+    this.expandedChange.emit(this.isExpanded);
   }
 
   _setTabFocusable() {
diff --git a/src/components-examples/cdk/tree/cdk-tree-flat/cdk-tree-flat-example.html b/src/components-examples/cdk/tree/cdk-tree-flat/cdk-tree-flat-example.html
index aadb02f9da85..0f956d818f2a 100644
--- a/src/components-examples/cdk/tree/cdk-tree-flat/cdk-tree-flat-example.html
+++ b/src/components-examples/cdk/tree/cdk-tree-flat/cdk-tree-flat-example.html
@@ -2,6 +2,7 @@
   <!-- This is the tree node template for leaf nodes -->
   <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding
                  [style.display]="shouldRender(node) ? 'flex' : 'none'"
+                 [isDisabled]="!shouldRender(node)"
                  class="example-tree-node">
     <!-- use a disabled button to provide padding for tree leaf -->
     <button mat-icon-button disabled></button>
@@ -10,10 +11,11 @@
   <!-- This is the tree node template for expandable nodes -->
   <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
                  [style.display]="shouldRender(node) ? 'flex' : 'none'"
+                 [isDisabled]="!shouldRender(node)"
+                 (expandedChange)="node.isExpanded = $event"
                  class="example-tree-node">
     <button mat-icon-button cdkTreeNodeToggle
             [attr.aria-label]="'Toggle ' + node.name"
-            (click)="node.isExpanded = !node.isExpanded"
             [style.visibility]="node.expandable ? 'visible' : 'hidden'">
       <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
diff --git a/src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.html b/src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.html
index fb9a4132f97f..ec03afc6a8fa 100644
--- a/src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.html
+++ b/src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.html
@@ -1,12 +1,18 @@
 <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
   <!-- This is the tree node template for leaf nodes -->
-  <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="example-tree-node">
+  <cdk-nested-tree-node #treeNode="cdkNestedTreeNode"
+      *cdkTreeNodeDef="let node"
+      [isDisabled]="!!treeNode.getParent()?.isExpanded"
+      class="example-tree-node">
     <!-- use a disabled button to provide padding for tree leaf -->
     <button mat-icon-button disabled></button>
     {{node.name}}
   </cdk-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
-  <cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasChild" class="example-tree-node">
+  <cdk-nested-tree-node #treeNode="cdkNestedTreeNode"
+      *cdkTreeNodeDef="let node; when: hasChild"
+      [isDisabled]="!!treeNode.getParent()?.isExpanded"
+      class="example-tree-node">
     <button mat-icon-button [attr.aria-label]="'Toggle ' + node.name" cdkTreeNodeToggle>
       <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}

From 75a64affae3bc9a9af99f682fd1df957ebfa9749 Mon Sep 17 00:00:00 2001
From: Cassandra Choi <cassc@google.com>
Date: Fri, 17 Feb 2023 16:47:23 -0500
Subject: [PATCH 05/18] fix(cdk/tree): fix build errors

---
 src/cdk/tree/nested-node.ts |  2 +-
 src/cdk/tree/tree.ts        | 68 ++++++++++++++-----------------------
 2 files changed, 27 insertions(+), 43 deletions(-)

diff --git a/src/cdk/tree/nested-node.ts b/src/cdk/tree/nested-node.ts
index 91a328744e42..496dffa15610 100644
--- a/src/cdk/tree/nested-node.ts
+++ b/src/cdk/tree/nested-node.ts
@@ -95,7 +95,7 @@ export class CdkNestedTreeNode<T, K = T>
     }
     if (outlet && this._children) {
       const viewContainer = outlet.viewContainer;
-      this._tree._renderNodeChanges(this._children, this._dataDiffer, viewContainer, this._data);
+      this._tree.renderNodeChanges(this._children, this._dataDiffer, viewContainer, this._data);
     } else {
       // Reset the data differ if there's no children nodes displayed
       this._dataDiffer.diff([]);
diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts
index d1b6c0d73702..74ec95e29ecc 100644
--- a/src/cdk/tree/tree.ts
+++ b/src/cdk/tree/tree.ts
@@ -698,7 +698,7 @@ export class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer,
 
   /** Given a CdkTreeNode, gets the node that renders that node's parent's data. */
   _getNodeParent(node: CdkTreeNode<T, K>) {
-    const parent = this._parents.get(node.data);
+    const parent = this._parents.get(this._getExpansionKey(node.data));
     return parent && this._nodes.value.get(this._getExpansionKey(parent));
   }
 
@@ -817,39 +817,6 @@ export class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer,
     return this.expansionKey?.(dataNode) ?? (dataNode as unknown as K);
   }
 
-  /**
-   * Converts children for certain tree configurations. Note also that this
-   * caches the known nodes for use in other parts of the tree.
-   */
-  private _convertChildren(nodes: readonly T[]): Observable<readonly T[]> {
-    // The only situations where we have to convert children types is when
-    // they're mismatched; i.e. if the tree is using a childrenAccessor and the
-    // nodes are flat, or if the tree is using a levelAccessor and the nodes are
-    // nested.
-    if (this.childrenAccessor && this.nodeType === 'flat') {
-      // This flattens children into a single array.
-      return observableOf(...nodes).pipe(
-        concatMap(node => concat(observableOf([node]), this._getAllChildrenRecursively(node))),
-        reduce((results, children) => {
-          results.push(...children);
-          return results;
-        }, [] as T[]),
-        tap(allNodes => {
-          this._dataNodes.next(allNodes);
-        }),
-      );
-    } else if (this.levelAccessor && this.nodeType === 'nested') {
-      this._dataNodes.next(nodes);
-      // In the nested case, we only look for root nodes. The CdkNestedNode
-      // itself will handle rendering each individual node's children.
-      const levelAccessor = this.levelAccessor;
-      return observableOf(nodes.filter(node => levelAccessor(node) === 0));
-    } else {
-      this._dataNodes.next(nodes);
-      return observableOf(nodes);
-    }
-  }
-
   private _getNodeGroup(node: T) {
     const level = this._levels.get(this._getExpansionKey(node));
     const parent = this._parents.get(this._getExpansionKey(node));
@@ -876,19 +843,36 @@ export class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer,
     return null;
   }
 
-  private _flattenChildren(nodes: readonly T[]): Observable<readonly T[]> {
-    // If we're using TreeControl or levelAccessor, we don't need to manually
-    // flatten things here.
-    if (!this.childrenAccessor) {
-      return observableOf(nodes);
-    } else {
+  /**
+   * Converts children for certain tree configurations. Note also that this
+   * caches the known nodes for use in other parts of the tree.
+   */
+  private _convertChildren(nodes: readonly T[]): Observable<readonly T[]> {
+    // The only situations where we have to convert children types is when
+    // they're mismatched; i.e. if the tree is using a childrenAccessor and the
+    // nodes are flat, or if the tree is using a levelAccessor and the nodes are
+    // nested.
+    if (this.childrenAccessor && this.nodeType === 'flat') {
+      // This flattens children into a single array.
       return observableOf(...nodes).pipe(
         concatMap(node => concat(observableOf([node]), this._getAllChildrenRecursively(node))),
-        reduce((results, nodes) => {
-          results.push(...nodes);
+        reduce((results, children) => {
+          results.push(...children);
           return results;
         }, [] as T[]),
+        tap(allNodes => {
+          this._dataNodes.next(allNodes);
+        }),
       );
+    } else if (this.levelAccessor && this.nodeType === 'nested') {
+      this._dataNodes.next(nodes);
+      // In the nested case, we only look for root nodes. The CdkNestedNode
+      // itself will handle rendering each individual node's children.
+      const levelAccessor = this.levelAccessor;
+      return observableOf(nodes.filter(node => levelAccessor(node) === 0));
+    } else {
+      this._dataNodes.next(nodes);
+      return observableOf(nodes);
     }
   }
 }

From b078c7af04a3567848557682e18a45013c4cad7d Mon Sep 17 00:00:00 2001
From: Cassandra Choi <cassc@google.com>
Date: Fri, 17 Feb 2023 16:47:23 -0500
Subject: [PATCH 06/18] fix(cdk/tree): restoring incorrectly removed code

---
 src/cdk/tree/nested-node.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/cdk/tree/nested-node.ts b/src/cdk/tree/nested-node.ts
index 496dffa15610..91a328744e42 100644
--- a/src/cdk/tree/nested-node.ts
+++ b/src/cdk/tree/nested-node.ts
@@ -95,7 +95,7 @@ export class CdkNestedTreeNode<T, K = T>
     }
     if (outlet && this._children) {
       const viewContainer = outlet.viewContainer;
-      this._tree.renderNodeChanges(this._children, this._dataDiffer, viewContainer, this._data);
+      this._tree._renderNodeChanges(this._children, this._dataDiffer, viewContainer, this._data);
     } else {
       // Reset the data differ if there's no children nodes displayed
       this._dataDiffer.diff([]);

From 9e4970e3988d0cd8e437e0be5e2834ae5b8abdf8 Mon Sep 17 00:00:00 2001
From: Cassandra Choi <cassc@google.com>
Date: Fri, 17 Feb 2023 16:47:23 -0500
Subject: [PATCH 07/18] fix(cdk/tree): fix minor typo

---
 src/cdk/tree/tree.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts
index 74ec95e29ecc..c350cc66d2cb 100644
--- a/src/cdk/tree/tree.ts
+++ b/src/cdk/tree/tree.ts
@@ -321,7 +321,7 @@ export class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer,
   /**
    * Switch to the provided data source by resetting the data and unsubscribing from the current
    * render change subscription if one exists. If the data source is null, interpret this by
-   * clearIng the node outlet. Otherwise start listening for new data.
+   * clearing the node outlet. Otherwise start listening for new data.
    */
   private _switchDataSource(dataSource: DataSource<T> | Observable<T[]> | T[]) {
     if (this._dataSource && typeof (this._dataSource as DataSource<T>).disconnect === 'function') {

From 4d348e802c5e1b93c3e3453ea24c12b6bbddd4b8 Mon Sep 17 00:00:00 2001
From: Cassandra Choi <cassc@google.com>
Date: Tue, 18 Apr 2023 21:47:24 +0000
Subject: [PATCH 08/18] fix(cdk/tree): fix lint

---
 src/cdk/tree/tree.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts
index c350cc66d2cb..e6add6730369 100644
--- a/src/cdk/tree/tree.ts
+++ b/src/cdk/tree/tree.ts
@@ -11,6 +11,7 @@ import {coerceNumberProperty} from '@angular/cdk/coercion';
 import {CollectionViewer, DataSource, isDataSource, SelectionModel} from '@angular/cdk/collections';
 import {
   AfterContentChecked,
+  AfterContentInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -100,7 +101,9 @@ function isNotNullish<T>(val: T | null | undefined): val is T {
   // tslint:disable-next-line:validate-decorators
   changeDetection: ChangeDetectionStrategy.Default,
 })
-export class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
+export class CdkTree<T, K = T>
+  implements AfterContentChecked, AfterContentInit, CollectionViewer, OnDestroy, OnInit
+{
   /** Subject that emits when the component has been destroyed. */
   private readonly _onDestroy = new Subject<void>();
 
@@ -704,8 +707,7 @@ export class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer,
 
   /** Given a CdkTreeNode, gets the nodes that renders that node's child data. */
   _getNodeChildren(node: CdkTreeNode<T, K>) {
-    const children = coerceObservable(this._getChildrenAccessor()?.(node.data) ?? []);
-    return children.pipe(
+    return coerceObservable(this._getChildrenAccessor()?.(node.data) ?? []).pipe(
       map(children =>
         children
           .map(child => this._nodes.value.get(this._getExpansionKey(child)))
@@ -1015,7 +1017,7 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
     return this._tree._getNodeParent(this) ?? null;
   }
 
-  getChildren(): Array<CdkTreeNode<T, K>> | Observable<Array<CdkTreeNode<T, K>>> {
+  getChildren(): CdkTreeNode<T, K>[] | Observable<CdkTreeNode<T, K>[]> {
     return this._tree._getNodeChildren(this);
   }
 

From 7c849741006d39ecdf5f62fbd1346faae337a149 Mon Sep 17 00:00:00 2001
From: Cassandra Choi <cassc@google.com>
Date: Fri, 9 Jun 2023 22:10:38 +0000
Subject: [PATCH 09/18] feat(cdk/tree): add additional tests, fix bug with
 aria-posinset

---
 src/cdk/tree/tree-redesign.spec.ts | 184 ++++++++++++++++++++++-------
 src/cdk/tree/tree.ts               |  61 ++++++++--
 2 files changed, 189 insertions(+), 56 deletions(-)

diff --git a/src/cdk/tree/tree-redesign.spec.ts b/src/cdk/tree/tree-redesign.spec.ts
index 109d9b32a353..a82d64bd28a2 100644
--- a/src/cdk/tree/tree-redesign.spec.ts
+++ b/src/cdk/tree/tree-redesign.spec.ts
@@ -117,46 +117,6 @@ describe('CdkTree redesign', () => {
         expect(nodes[0].classList).toContain('customNodeClass');
       });
 
-      it('with the right accessibility roles', () => {
-        expect(treeElement.getAttribute('role')).toBe('tree');
-
-        expect(
-          getNodes(treeElement).every(node => {
-            return node.getAttribute('role') === 'treeitem';
-          }),
-        ).toBe(true);
-      });
-
-      it('with the right aria-levels', () => {
-        // add a child to the first node
-        let data = dataSource.data;
-        dataSource.addChild(data[0], true);
-
-        const ariaLevels = getNodes(treeElement).map(n => n.getAttribute('aria-level'));
-        expect(ariaLevels).toEqual(['2', '3', '2', '2']);
-      });
-
-      it('with the right aria-expanded attrs', () => {
-        // add a child to the first node
-        let data = dataSource.data;
-        dataSource.addChild(data[2]);
-        fixture.detectChanges();
-        expect(
-          getNodes(treeElement).every(node => {
-            return node.getAttribute('aria-expanded') === 'false';
-          }),
-        ).toBe(true);
-
-        component.expandAll();
-        fixture.detectChanges();
-
-        expect(
-          getNodes(treeElement).every(node => {
-            return node.getAttribute('aria-expanded') === 'true';
-          }),
-        ).toBe(true);
-      });
-
       it('with the right data', () => {
         expect(dataSource.data.length).toBe(3);
 
@@ -1157,6 +1117,135 @@ describe('CdkTree redesign', () => {
       expect(depthElements.length).toBe(5);
     });
   });
+
+  fdescribe('accessibility', () => {
+    let fixture: ComponentFixture<StaticNestedCdkTreeApp>;
+    let component: StaticNestedCdkTreeApp;
+    let nodes: HTMLElement[];
+
+    beforeEach(() => {
+      configureCdkTreeTestingModule([StaticNestedCdkTreeApp]);
+      fixture = TestBed.createComponent(StaticNestedCdkTreeApp);
+      fixture.detectChanges();
+
+      component = fixture.componentInstance;
+      dataSource = component.dataSource as FakeDataSource;
+      tree = component.tree;
+      treeElement = fixture.nativeElement.querySelector('cdk-tree');
+      nodes = getNodes(treeElement);
+    });
+
+    describe('focus management', () => {
+      it('the tree is tabbable when no element is active', () => {
+        expect(treeElement.getAttribute('tabindex')).toBe('0');
+      });
+
+      it('the tree is not tabbable when an element is active', () => {
+        // activate the second child by clicking on it
+        nodes[1].click();
+
+        expect(treeElement.getAttribute('tabindex')).toBe(null);
+      });
+
+      it('sets tabindex on the latest activated item, with all others "-1"', () => {
+        // activate the second child by clicking on it
+        nodes[1].click();
+
+        expect(getNodeAttributes(nodes, 'tabindex')).toEqual(['-1', '0', '-1', '-1', '-1', '-1']);
+
+        // activate the first child by clicking on it
+        nodes[0].click();
+
+        expect(getNodeAttributes(nodes, 'tabindex')).toEqual(['0', '-1', '-1', '-1', '-1', '-1']);
+      });
+
+      it('maintains tabindex when component is blurred', () => {
+        // activate the second child by clicking on it
+        nodes[1].click();
+
+        expect(document.activeElement).toBe(nodes[1]);
+        // blur the currently active element (which we just checked is the above node)
+        nodes[1].blur();
+
+        expect(treeElement.getAttribute('tabindex')).toBe(null);
+        expect(getNodeAttributes(nodes, 'tabindex')).toEqual(['-1', '0', '-1', '-1', '-1', '-1']);
+      });
+
+      it('ignores clicks on disabled items', () => {
+        dataSource.data[0].isDisabled = true;
+        fixture.detectChanges();
+
+        // attempt to click on the first child
+        nodes[0].click();
+
+        expect(treeElement.getAttribute('tabindex')).toBe('0');
+        expect(getNodeAttributes(nodes, 'tabindex')).toEqual(['-1', '-1', '-1', '-1', '-1', '-1']);
+      });
+
+      describe('when no item is currently active', () => {
+        it('redirects focus to the first item when the tree is focused', () => {
+          treeElement.focus();
+
+          expect(document.activeElement).toBe(nodes[0]);
+        });
+
+        it('redirects focus to the first non-disabled item when the tree is focused', () => {
+          dataSource.data[0].isDisabled = true;
+          fixture.detectChanges();
+
+          treeElement.focus();
+
+          expect(document.activeElement).toBe(nodes[1]);
+        });
+      });
+    });
+
+    describe('tree role & attributes', () => {
+      it('sets the tree role on the tree element', () => {
+        expect(treeElement.getAttribute('role')).toBe('tree');
+      });
+
+      it('sets the treeitem role on all nodes', () => {
+        expect(getNodeAttributes(nodes, 'role')).toEqual([
+          'treeitem',
+          'treeitem',
+          'treeitem',
+          'treeitem',
+          'treeitem',
+          'treeitem',
+        ]);
+      });
+
+      it('sets aria attributes for tree nodes', () => {
+        expect(getNodeAttributes(nodes, 'aria-expanded'))
+          .withContext('aria-expanded attributes')
+          .toEqual([null, 'false', 'false', null, null, null]);
+        expect(getNodeAttributes(nodes, 'aria-level'))
+          .withContext('aria-level attributes')
+          .toEqual(['1', '1', '2', '3', '3', '1']);
+        expect(getNodeAttributes(nodes, 'aria-posinset'))
+          .withContext('aria-posinset attributes')
+          .toEqual(['1', '2', '1', '1', '2', '3']);
+        expect(getNodeAttributes(nodes, 'aria-setsize'))
+          .withContext('aria-setsize attributes')
+          .toEqual(['3', '3', '1', '2', '2', '3']);
+      });
+
+      it('changes aria-expanded status when expanded or collapsed', () => {
+        tree.expand(dataSource.data[1]);
+        fixture.detectChanges();
+        expect(getNodeAttributes(nodes, 'aria-expanded'))
+          .withContext('aria-expanded attributes')
+          .toEqual([null, 'true', 'false', null, null, null]);
+
+        tree.collapse(dataSource.data[1]);
+        fixture.detectChanges();
+        expect(getNodeAttributes(nodes, 'aria-expanded'))
+          .withContext('aria-expanded attributes')
+          .toEqual([null, 'false', 'false', null, null, null]);
+      });
+    });
+  });
 });
 
 export class TestData {
@@ -1165,6 +1254,7 @@ export class TestData {
   pizzaBase: string;
   level: number;
   children: TestData[];
+  isDisabled?: boolean;
   readonly observableChildren: BehaviorSubject<TestData[]>;
 
   constructor(pizzaTopping: string, pizzaCheese: string, pizzaBase: string, level: number = 1) {
@@ -1339,6 +1429,10 @@ function expectNestedTreeToMatch(treeElement: Element, ...expectedTree: any[]) {
   }
 }
 
+function getNodeAttributes(nodes: HTMLElement[], attribute: string) {
+  return nodes.map(node => node.getAttribute(attribute));
+}
+
 @Component({
   template: `
     <cdk-tree [dataSource]="dataSource" [levelAccessor]="getLevel"
@@ -1407,9 +1501,13 @@ class NestedCdkTreeApp {
   template: `
     <cdk-tree [dataSource]="dataSource" [childrenAccessor]="getChildren"
         nodeType="nested">
-      <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="customNodeClass">
-                     {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
-         <ng-template cdkTreeNodeOutlet></ng-template>
+      <cdk-nested-tree-node
+          *cdkTreeNodeDef="let node"
+          class="customNodeClass"
+          [isExpandable]="node.children.length > 0"
+          [isDisabled]="node.isDisabled">
+        {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
+        <ng-template cdkTreeNodeOutlet></ng-template>
       </cdk-nested-tree-node>
     </cdk-tree>
   `,
diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts
index e6add6730369..66b792f4dbac 100644
--- a/src/cdk/tree/tree.ts
+++ b/src/cdk/tree/tree.ts
@@ -89,7 +89,6 @@ function isNotNullish<T>(val: T | null | undefined): val is T {
   host: {
     'class': 'cdk-tree',
     'role': 'tree',
-    '[attr.tabindex]': '_getTabindex()',
     '(keydown)': '_sendKeydownToKeyManager($event)',
     '(focus)': '_focusInitialTreeItem()',
   },
@@ -240,6 +239,7 @@ export class CdkTree<T, K = T>
     private _differs: IterableDiffers,
     private _changeDetectorRef: ChangeDetectorRef,
     private _dir: Directionality,
+    private _elementRef: ElementRef<HTMLElement>,
   ) {}
 
   ngOnInit() {
@@ -300,6 +300,11 @@ export class CdkTree<T, K = T>
         prev?._setTabUnfocusable();
         next?._setTabFocusable();
       });
+
+    this._keyManager.change.pipe(startWith(null), takeUntil(this._onDestroy)).subscribe(() => {
+      // refresh the tabindex when the active item changes.
+      this._setTabIndex();
+    });
   }
 
   ngAfterContentChecked() {
@@ -314,11 +319,21 @@ export class CdkTree<T, K = T>
     }
   }
 
-  _getTabindex() {
+  /**
+   * Sets the tabIndex on the host element.
+   *
+   * NB: we don't set this as a host binding since children being activated
+   * (e.g. on user click) doesn't trigger this component's change detection.
+   */
+  _setTabIndex() {
     // If the `TreeKeyManager` has no active item, then we know that we need to focus the initial
     // item when the tree is focused. We set the tabindex to be `0` so that we can capture
     // the focus event and redirect it. Otherwise, we unset it.
-    return this._keyManager.getActiveItem() ? null : 0;
+    if (!this._keyManager.getActiveItem()) {
+      this._elementRef.nativeElement.setAttribute('tabindex', '0');
+    } else {
+      this._elementRef.nativeElement.removeAttribute('tabindex');
+    }
   }
 
   /**
@@ -456,14 +471,11 @@ export class CdkTree<T, K = T>
     const parent = parentData ?? this._findParentForNode(nodeData, index);
     this._parents.set(this._getExpansionKey(nodeData), parent);
 
-    // Determine where to insert this new node into the group, then insert it.
-    // We do this by looking at the previous node in our flattened node list. If it's in the same
-    // group, we place the current node after. Otherwise, we place it at the start of the group.
+    // We're essentially replicating the tree structure within each `group`;
+    // we insert the node into the group at the specified index.
     const currentGroup = this._groups.get(context.level) ?? new Map<T | null, T[]>();
     const group = currentGroup.get(parent) ?? [];
-    const previousNode = this._dataNodes.value?.[index - 1];
-    const groupInsertionIndex = (previousNode && group.indexOf(previousNode) + 1) ?? 0;
-    group.splice(groupInsertionIndex, 0, nodeData);
+    group.splice(index, 0, nodeData);
     currentGroup.set(parent, group);
     this._groups.set(context.level, currentGroup);
 
@@ -887,11 +899,12 @@ export class CdkTree<T, K = T>
   exportAs: 'cdkTreeNode',
   host: {
     'class': 'cdk-tree-node',
-    '[attr.aria-expanded]': 'isExpanded',
+    '[attr.aria-expanded]': '_getAriaExpanded()',
     '[attr.aria-level]': 'level + 1',
     '[attr.aria-posinset]': '_getPositionInSet()',
     '[attr.aria-setsize]': '_getSetSize()',
     'tabindex': '-1',
+    '(click)': '_setActiveItem()',
   },
 })
 export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerItem {
@@ -907,8 +920,8 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
   }
 
   set role(_role: 'treeitem' | 'group') {
-    // TODO: move to host after View Engine deprecation
-    this._elementRef.nativeElement.setAttribute('role', _role);
+    // ignore any role setting, we handle this internally.
+    this._setRoleFromData();
   }
 
   @Input() isExpandable: boolean = false;
@@ -973,6 +986,18 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
     return this._tree._getLevel(this._data) ?? this._parentNodeAriaLevel;
   }
 
+  /**
+   * Determines the value for `aria-expanded`.
+   *
+   * For non-expandable nodes, this is `null`.
+   */
+  _getAriaExpanded(): string | null {
+    if (!this.isExpandable) {
+      return null;
+    }
+    return String(this.isExpanded);
+  }
+
   /**
    * Determines the size of this node's parent's child set.
    *
@@ -1028,6 +1053,9 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
 
   /** Emits an activation event. Implemented for TreeKeyManagerItem. */
   activate(): void {
+    if (this.isDisabled) {
+      return;
+    }
     this.activation.next(this._data);
   }
 
@@ -1051,9 +1079,16 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
     this._elementRef.nativeElement.setAttribute('tabindex', '-1');
   }
 
+  _setActiveItem() {
+    if (this.isDisabled) {
+      return;
+    }
+    this._tree._keyManager.onClick(this);
+  }
+
   // TODO: role should eventually just be set in the component host
   protected _setRoleFromData(): void {
-    this.role = 'treeitem';
+    this._elementRef.nativeElement.setAttribute('role', 'treeitem');
   }
 }
 

From 88f4ec7d961702a93b62eed5458053c5db0ba600 Mon Sep 17 00:00:00 2001
From: Cassandra Choi <cassc@google.com>
Date: Fri, 9 Jun 2023 22:34:16 +0000
Subject: [PATCH 10/18] fix(cdk/tree): update goldens, remove fdescribe

---
 src/cdk/tree/tree-redesign.spec.ts | 2 +-
 tools/public_api_guard/cdk/a11y.md | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/cdk/tree/tree-redesign.spec.ts b/src/cdk/tree/tree-redesign.spec.ts
index a82d64bd28a2..bfefe8ade504 100644
--- a/src/cdk/tree/tree-redesign.spec.ts
+++ b/src/cdk/tree/tree-redesign.spec.ts
@@ -1118,7 +1118,7 @@ describe('CdkTree redesign', () => {
     });
   });
 
-  fdescribe('accessibility', () => {
+  describe('accessibility', () => {
     let fixture: ComponentFixture<StaticNestedCdkTreeApp>;
     let component: StaticNestedCdkTreeApp;
     let nodes: HTMLElement[];
diff --git a/tools/public_api_guard/cdk/a11y.md b/tools/public_api_guard/cdk/a11y.md
index 6f476fe31815..dc134ebb51b5 100644
--- a/tools/public_api_guard/cdk/a11y.md
+++ b/tools/public_api_guard/cdk/a11y.md
@@ -431,6 +431,7 @@ export class TreeKeyManager<T extends TreeKeyManagerItem> {
     getActiveItem(): T | null;
     getActiveItemIndex(): number | null;
     onClick(treeItem: T): void;
+    onInitialFocus(): void;
     onKeydown(event: KeyboardEvent): void;
     readonly tabOut: Subject<void>;
 }

From 3b0d6d0eed0bbac2bddc4201c04bbf1887762ff1 Mon Sep 17 00:00:00 2001
From: Cassandra Choi <cassc@google.com>
Date: Mon, 12 Jun 2023 19:14:30 +0000
Subject: [PATCH 11/18] fix(cdk/tree): dev app compilation

---
 .../cdk-tree-flat-children-accessor-example.ts        |  6 +++++-
 .../cdk-tree-flat-level-accessor-example.ts           |  6 +++++-
 .../cdk-tree-nested-level-accessor-example.ts         |  7 ++++++-
 src/dev-app/tree/tree-demo.ts                         | 11 ++++++++++-
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components-examples/cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example.ts b/src/components-examples/cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example.ts
index 48ed2152d27a..fbd197ca15b6 100644
--- a/src/components-examples/cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example.ts
+++ b/src/components-examples/cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example.ts
@@ -1,6 +1,8 @@
 import {ArrayDataSource} from '@angular/cdk/collections';
-import {CdkTree} from '@angular/cdk/tree';
+import {CdkTree, CdkTreeModule} from '@angular/cdk/tree';
 import {Component, ViewChild} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
 import {timer} from 'rxjs';
 import {mapTo} from 'rxjs/operators';
 import {NestedFoodNode, NESTED_DATA} from '../tree-data';
@@ -23,6 +25,8 @@ function flattenNodes(nodes: NestedFoodNode[]): NestedFoodNode[] {
   selector: 'cdk-tree-flat-children-accessor-example',
   templateUrl: 'cdk-tree-flat-children-accessor-example.html',
   styleUrls: ['cdk-tree-flat-children-accessor-example.css'],
+  standalone: true,
+  imports: [CdkTreeModule, MatButtonModule, MatIconModule],
 })
 export class CdkTreeFlatChildrenAccessorExample {
   @ViewChild(CdkTree)
diff --git a/src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example.ts b/src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example.ts
index 3484953f7abb..863f5dc7197c 100644
--- a/src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example.ts
+++ b/src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example.ts
@@ -1,6 +1,8 @@
 import {ArrayDataSource} from '@angular/cdk/collections';
-import {CdkTree} from '@angular/cdk/tree';
+import {CdkTree, CdkTreeModule} from '@angular/cdk/tree';
 import {Component, ViewChild} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
 import {FlatFoodNode, FLAT_DATA} from '../tree-data';
 
 /**
@@ -10,6 +12,8 @@ import {FlatFoodNode, FLAT_DATA} from '../tree-data';
   selector: 'cdk-tree-flat-level-accessor-example',
   templateUrl: 'cdk-tree-flat-level-accessor-example.html',
   styleUrls: ['cdk-tree-flat-level-accessor-example.css'],
+  standalone: true,
+  imports: [CdkTreeModule, MatButtonModule, MatIconModule],
 })
 export class CdkTreeFlatLevelAccessorExample {
   @ViewChild(CdkTree)
diff --git a/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.ts b/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.ts
index 3a0ea4dd90b4..5e9c6da3ab82 100644
--- a/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.ts
+++ b/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.ts
@@ -1,6 +1,9 @@
 import {ArrayDataSource} from '@angular/cdk/collections';
+import {CdkTreeModule} from '@angular/cdk/tree';
 import {Component} from '@angular/core';
-import {FlatFoodNode, FLAT_DATA} from '../tree-data';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {FLAT_DATA, FlatFoodNode} from '../tree-data';
 
 /**
  * @title Tree with nested nodes
@@ -9,6 +12,8 @@ import {FlatFoodNode, FLAT_DATA} from '../tree-data';
   selector: 'cdk-tree-nested-level-accessor-example',
   templateUrl: 'cdk-tree-nested-level-accessor-example.html',
   styleUrls: ['cdk-tree-nested-level-accessor-example.css'],
+  standalone: true,
+  imports: [CdkTreeModule, MatButtonModule, MatIconModule],
 })
 export class CdkTreeNestedLevelAccessorExample {
   levelAccessor = (dataNode: FlatFoodNode) => dataNode.level;
diff --git a/src/dev-app/tree/tree-demo.ts b/src/dev-app/tree/tree-demo.ts
index af0ae1ed9d98..5bacdc861850 100644
--- a/src/dev-app/tree/tree-demo.ts
+++ b/src/dev-app/tree/tree-demo.ts
@@ -8,7 +8,13 @@
 import {Component} from '@angular/core';
 import {CdkTreeModule} from '@angular/cdk/tree';
 import {CommonModule} from '@angular/common';
-import {CdkTreeFlatExample, CdkTreeNestedExample} from '@angular/components-examples/cdk/tree';
+import {
+  CdkTreeFlatExample,
+  CdkTreeNestedExample,
+  CdkTreeFlatLevelAccessorExample,
+  CdkTreeNestedLevelAccessorExample,
+  CdkTreeFlatChildrenAccessorExample,
+} from '@angular/components-examples/cdk/tree';
 import {
   TreeChecklistExample,
   TreeDynamicExample,
@@ -36,6 +42,9 @@ import {MatTreeModule} from '@angular/material/tree';
     CdkTreeModule,
     CdkTreeFlatExample,
     CdkTreeNestedExample,
+    CdkTreeFlatChildrenAccessorExample,
+    CdkTreeFlatLevelAccessorExample,
+    CdkTreeNestedLevelAccessorExample,
     CommonModule,
     FormsModule,
     TreeChecklistExample,

From 573cd1d5075c4e066cf5902b650061defd06cee6 Mon Sep 17 00:00:00 2001
From: Cassandra Choi <cassc@google.com>
Date: Mon, 12 Jun 2023 21:08:18 +0000
Subject: [PATCH 12/18] fix(cdk/tree): fix tests

---
 src/cdk/tree/tree-redesign.spec.ts |  31 ++---
 src/cdk/tree/tree.spec.ts          | 201 ++++++++++++++++++++++-------
 2 files changed, 165 insertions(+), 67 deletions(-)

diff --git a/src/cdk/tree/tree-redesign.spec.ts b/src/cdk/tree/tree-redesign.spec.ts
index bfefe8ade504..53f96977fc6b 100644
--- a/src/cdk/tree/tree-redesign.spec.ts
+++ b/src/cdk/tree/tree-redesign.spec.ts
@@ -584,16 +584,6 @@ describe('CdkTree redesign', () => {
         expect(nodes[0].classList).toContain('customNodeClass');
       });
 
-      it('with the right accessibility roles', () => {
-        expect(treeElement.getAttribute('role')).toBe('tree');
-
-        expect(
-          getNodes(treeElement).every(node => {
-            return node.getAttribute('role') === 'treeitem';
-          }),
-        ).toBe(true);
-      });
-
       it('with the right data', () => {
         expect(dataSource.data.length).toBe(3);
 
@@ -757,11 +747,9 @@ describe('CdkTree redesign', () => {
       });
 
       it('with the right aria-expanded attrs', () => {
-        expect(
-          getNodes(treeElement).every(node => {
-            return node.getAttribute('aria-expanded') === 'false';
-          }),
-        ).toBe(true);
+        expect(getNodeAttributes(getNodes(treeElement), 'aria-expanded'))
+          .withContext('aria-expanded attributes')
+          .toEqual([null, null, null]);
 
         component.toggleRecursively = false;
         let data = dataSource.data;
@@ -772,8 +760,11 @@ describe('CdkTree redesign', () => {
         (getNodes(treeElement)[1] as HTMLElement).click();
         fixture.detectChanges();
 
-        const ariaExpanded = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
-        expect(ariaExpanded).toEqual(['false', 'true', 'false', 'false']);
+        // NB: only four elements are present here; children are not present
+        // in DOM unless the parent node is expanded.
+        expect(getNodeAttributes(getNodes(treeElement), 'aria-expanded'))
+          .withContext('aria-expanded attributes')
+          .toEqual([null, 'true', 'false', null]);
       });
 
       it('should expand/collapse the node multiple times', () => {
@@ -1584,7 +1575,9 @@ class CdkTreeAppWithToggle {
     <cdk-tree #tree [dataSource]="dataSource" [childrenAccessor]="getChildren"
         nodeType="nested">
       <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="customNodeClass"
-                            cdkTreeNodeToggle [cdkTreeNodeToggleRecursive]="toggleRecursively">
+                            [isExpandable]="isExpandable(node) | async"
+                            cdkTreeNodeToggle
+                            [cdkTreeNodeToggleRecursive]="toggleRecursively">
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
         <div *ngIf="tree.isExpanded(node)">
           <ng-template cdkTreeNodeOutlet></ng-template>
@@ -1597,6 +1590,8 @@ class NestedCdkTreeAppWithToggle {
   toggleRecursively: boolean = true;
 
   getChildren = (node: TestData) => node.observableChildren;
+  isExpandable = (node: TestData) =>
+    node.observableChildren.pipe(map(children => children.length > 0));
 
   dataSource: FakeDataSource | null = new FakeDataSource();
 
diff --git a/src/cdk/tree/tree.spec.ts b/src/cdk/tree/tree.spec.ts
index 3ba2ca114050..5e3607c77dda 100644
--- a/src/cdk/tree/tree.spec.ts
+++ b/src/cdk/tree/tree.spec.ts
@@ -116,46 +116,6 @@ describe('CdkTree', () => {
         expect(nodes[0].classList).toContain('customNodeClass');
       });
 
-      it('with the right accessibility roles', () => {
-        expect(treeElement.getAttribute('role')).toBe('tree');
-
-        expect(
-          getNodes(treeElement).every(node => {
-            return node.getAttribute('role') === 'treeitem';
-          }),
-        ).toBe(true);
-      });
-
-      it('with the right aria-levels', () => {
-        // add a child to the first node
-        let data = dataSource.data;
-        dataSource.addChild(data[0], true);
-
-        const ariaLevels = getNodes(treeElement).map(n => n.getAttribute('aria-level'));
-        expect(ariaLevels).toEqual(['2', '3', '2', '2']);
-      });
-
-      it('with the right aria-expanded attrs', () => {
-        // add a child to the first node
-        let data = dataSource.data;
-        dataSource.addChild(data[2]);
-        fixture.detectChanges();
-        expect(
-          getNodes(treeElement).every(node => {
-            return node.getAttribute('aria-expanded') === 'false';
-          }),
-        ).toBe(true);
-
-        component.treeControl.expandAll();
-        fixture.detectChanges();
-
-        expect(
-          getNodes(treeElement).every(node => {
-            return node.getAttribute('aria-expanded') === 'true';
-          }),
-        ).toBe(true);
-      });
-
       it('with the right data', () => {
         expect(dataSource.data.length).toBe(3);
 
@@ -796,11 +756,9 @@ describe('CdkTree', () => {
       });
 
       it('with the right aria-expanded attrs', () => {
-        expect(
-          getNodes(treeElement).every(node => {
-            return node.getAttribute('aria-expanded') === 'false';
-          }),
-        ).toBe(true);
+        expect(getNodeAttributes(getNodes(treeElement), 'aria-expanded'))
+          .withContext('aria-expanded attributes')
+          .toEqual([null, null, null]);
 
         component.toggleRecursively = false;
         let data = dataSource.data;
@@ -811,8 +769,11 @@ describe('CdkTree', () => {
         (getNodes(treeElement)[1] as HTMLElement).click();
         fixture.detectChanges();
 
-        const ariaExpanded = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
-        expect(ariaExpanded).toEqual(['false', 'true', 'false', 'false']);
+        // NB: only four elements are present here; children are not present
+        // in DOM unless the parent node is expanded.
+        expect(getNodeAttributes(getNodes(treeElement), 'aria-expanded'))
+          .withContext('aria-expanded attributes')
+          .toEqual([null, 'true', 'false', null]);
       });
 
       it('should expand/collapse the node multiple times', () => {
@@ -1156,6 +1117,135 @@ describe('CdkTree', () => {
       expect(depthElements.length).toBe(5);
     });
   });
+
+  describe('accessibility', () => {
+    let fixture: ComponentFixture<StaticNestedCdkTreeApp>;
+    let component: StaticNestedCdkTreeApp;
+    let nodes: HTMLElement[];
+
+    beforeEach(() => {
+      configureCdkTreeTestingModule([StaticNestedCdkTreeApp]);
+      fixture = TestBed.createComponent(StaticNestedCdkTreeApp);
+      fixture.detectChanges();
+
+      component = fixture.componentInstance;
+      dataSource = component.dataSource as FakeDataSource;
+      tree = component.tree;
+      treeElement = fixture.nativeElement.querySelector('cdk-tree');
+      nodes = getNodes(treeElement);
+    });
+
+    describe('focus management', () => {
+      it('the tree is tabbable when no element is active', () => {
+        expect(treeElement.getAttribute('tabindex')).toBe('0');
+      });
+
+      it('the tree is not tabbable when an element is active', () => {
+        // activate the second child by clicking on it
+        nodes[1].click();
+
+        expect(treeElement.getAttribute('tabindex')).toBe(null);
+      });
+
+      it('sets tabindex on the latest activated item, with all others "-1"', () => {
+        // activate the second child by clicking on it
+        nodes[1].click();
+
+        expect(getNodeAttributes(nodes, 'tabindex')).toEqual(['-1', '0', '-1', '-1', '-1', '-1']);
+
+        // activate the first child by clicking on it
+        nodes[0].click();
+
+        expect(getNodeAttributes(nodes, 'tabindex')).toEqual(['0', '-1', '-1', '-1', '-1', '-1']);
+      });
+
+      it('maintains tabindex when component is blurred', () => {
+        // activate the second child by clicking on it
+        nodes[1].click();
+
+        expect(document.activeElement).toBe(nodes[1]);
+        // blur the currently active element (which we just checked is the above node)
+        nodes[1].blur();
+
+        expect(treeElement.getAttribute('tabindex')).toBe(null);
+        expect(getNodeAttributes(nodes, 'tabindex')).toEqual(['-1', '0', '-1', '-1', '-1', '-1']);
+      });
+
+      it('ignores clicks on disabled items', () => {
+        dataSource.data[0].isDisabled = true;
+        fixture.detectChanges();
+
+        // attempt to click on the first child
+        nodes[0].click();
+
+        expect(treeElement.getAttribute('tabindex')).toBe('0');
+        expect(getNodeAttributes(nodes, 'tabindex')).toEqual(['-1', '-1', '-1', '-1', '-1', '-1']);
+      });
+
+      describe('when no item is currently active', () => {
+        it('redirects focus to the first item when the tree is focused', () => {
+          treeElement.focus();
+
+          expect(document.activeElement).toBe(nodes[0]);
+        });
+
+        it('redirects focus to the first non-disabled item when the tree is focused', () => {
+          dataSource.data[0].isDisabled = true;
+          fixture.detectChanges();
+
+          treeElement.focus();
+
+          expect(document.activeElement).toBe(nodes[1]);
+        });
+      });
+    });
+
+    describe('tree role & attributes', () => {
+      it('sets the tree role on the tree element', () => {
+        expect(treeElement.getAttribute('role')).toBe('tree');
+      });
+
+      it('sets the treeitem role on all nodes', () => {
+        expect(getNodeAttributes(nodes, 'role')).toEqual([
+          'treeitem',
+          'treeitem',
+          'treeitem',
+          'treeitem',
+          'treeitem',
+          'treeitem',
+        ]);
+      });
+
+      it('sets aria attributes for tree nodes', () => {
+        expect(getNodeAttributes(nodes, 'aria-expanded'))
+          .withContext('aria-expanded attributes')
+          .toEqual([null, 'false', 'false', null, null, null]);
+        expect(getNodeAttributes(nodes, 'aria-level'))
+          .withContext('aria-level attributes')
+          .toEqual(['1', '1', '2', '3', '3', '1']);
+        expect(getNodeAttributes(nodes, 'aria-posinset'))
+          .withContext('aria-posinset attributes')
+          .toEqual(['1', '2', '1', '1', '2', '3']);
+        expect(getNodeAttributes(nodes, 'aria-setsize'))
+          .withContext('aria-setsize attributes')
+          .toEqual(['3', '3', '1', '2', '2', '3']);
+      });
+
+      it('changes aria-expanded status when expanded or collapsed', () => {
+        tree.expand(dataSource.data[1]);
+        fixture.detectChanges();
+        expect(getNodeAttributes(nodes, 'aria-expanded'))
+          .withContext('aria-expanded attributes')
+          .toEqual([null, 'true', 'false', null, null, null]);
+
+        tree.collapse(dataSource.data[1]);
+        fixture.detectChanges();
+        expect(getNodeAttributes(nodes, 'aria-expanded'))
+          .withContext('aria-expanded attributes')
+          .toEqual([null, 'false', 'false', null, null, null]);
+      });
+    });
+  });
 });
 
 export class TestData {
@@ -1164,6 +1254,7 @@ export class TestData {
   pizzaBase: string;
   level: number;
   children: TestData[];
+  isDisabled?: boolean;
   readonly observableChildren: BehaviorSubject<TestData[]>;
 
   constructor(pizzaTopping: string, pizzaCheese: string, pizzaBase: string, level: number = 1) {
@@ -1329,6 +1420,10 @@ function expectNestedTreeToMatch(treeElement: Element, ...expectedTree: any[]) {
   }
 }
 
+function getNodeAttributes(nodes: HTMLElement[], attribute: string) {
+  return nodes.map(node => node.getAttribute(attribute));
+}
+
 @Component({
   template: `
     <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
@@ -1390,7 +1485,11 @@ class NestedCdkTreeApp {
 @Component({
   template: `
     <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
-      <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="customNodeClass">
+      <cdk-nested-tree-node
+          *cdkTreeNodeDef="let node"
+          class="customNodeClass"
+          [isExpandable]="node.children.length > 0"
+          [isDisabled]="node.isDisabled">
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
          <ng-template cdkTreeNodeOutlet></ng-template>
       </cdk-nested-tree-node>
@@ -1470,7 +1569,9 @@ class CdkTreeAppWithToggle {
   template: `
     <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
       <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="customNodeClass"
-                            cdkTreeNodeToggle [cdkTreeNodeToggleRecursive]="toggleRecursively">
+                            [isExpandable]="isExpandable(node) | async"
+                            cdkTreeNodeToggle
+                            [cdkTreeNodeToggleRecursive]="toggleRecursively">
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
         <div *ngIf="treeControl.isExpanded(node)">
           <ng-template cdkTreeNodeOutlet></ng-template>
@@ -1483,6 +1584,8 @@ class NestedCdkTreeAppWithToggle {
   toggleRecursively: boolean = true;
 
   getChildren = (node: TestData) => node.observableChildren;
+  isExpandable = (node: TestData) =>
+    node.observableChildren.pipe(map(children => children.length > 0));
 
   treeControl: TreeControl<TestData> = new NestedTreeControl(this.getChildren);
   dataSource: FakeDataSource | null = new FakeDataSource(this.treeControl);

From 0925b216091e3eed313e0fba1da0a503fd81d751 Mon Sep 17 00:00:00 2001
From: Cassandra Choi <cassc@google.com>
Date: Mon, 12 Jun 2023 22:10:59 +0000
Subject: [PATCH 13/18] fix(material/tree): update tests & API

---
 src/material/tree/node.ts      |  81 +++++++++----
 src/material/tree/tree.spec.ts | 205 ++++++++++++++++++++++++++-------
 src/material/tree/tree.ts      |   2 +
 3 files changed, 226 insertions(+), 62 deletions(-)

diff --git a/src/material/tree/node.ts b/src/material/tree/node.ts
index 437596f6add5..96e91171ad19 100644
--- a/src/material/tree/node.ts
+++ b/src/material/tree/node.ts
@@ -26,24 +26,60 @@ import {
 import {CanDisable, HasTabIndex, mixinDisabled, mixinTabIndex} from '@angular/material/core';
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 
-const _MatTreeNodeBase = mixinTabIndex(mixinDisabled(CdkTreeNode));
-
 /**
  * Wrapper for the CdkTree node with Material design styles.
  */
 @Directive({
   selector: 'mat-tree-node',
   exportAs: 'matTreeNode',
-  inputs: ['role', 'disabled', 'tabIndex'],
+  inputs: ['role', 'disabled', 'tabIndex', 'isExpandable', 'isExpanded', 'isDisabled'],
+  outputs: ['activation', 'expandedChange'],
   providers: [{provide: CdkTreeNode, useExisting: MatTreeNode}],
   host: {
     'class': 'mat-tree-node',
+    '[attr.aria-expanded]': '_getAriaExpanded()',
+    '[attr.aria-level]': 'level + 1',
+    '[attr.aria-posinset]': '_getPositionInSet()',
+    '[attr.aria-setsize]': '_getSetSize()',
+    'tabindex': '-1',
+    '(click)': '_setActiveItem()',
   },
 })
 export class MatTreeNode<T, K = T>
-  extends _MatTreeNodeBase<T, K>
+  extends CdkTreeNode<T, K>
   implements CanDisable, HasTabIndex, OnInit, OnDestroy
 {
+  /**
+   * The tabindex of the tree node.
+   *
+   * @deprecated This will be ignored; the tree will automatically determine the appropriate tabindex for the tree node. This input will be
+   *   removed in a future version.
+   * @breaking-change 12.0.0 Remove this input
+   */
+  tabIndex: number;
+
+  /**
+   * The tabindex of the tree node.
+   *
+   * @deprecated This will be ignored; the tree will automatically determine the appropriate tabindex for the tree node. This input will be
+   *   removed in a future version.
+   * @breaking-change 12.0.0 Remove this input
+   */
+  defaultTabIndex: number;
+
+  /**
+   * Whether the component is disabled.
+   *
+   * @deprecated This is an alias for `isDisabled`.
+   * @breaking-change 12.0.0 Remove this input
+   */
+  get disabled(): boolean {
+    return this.isDisabled ?? false;
+  }
+  set disabled(value: any) {
+    this.isDisabled = coerceBooleanProperty(value);
+  }
+
   constructor(
     elementRef: ElementRef<HTMLElement>,
     tree: CdkTree<T, K>,
@@ -83,7 +119,8 @@ export class MatTreeNodeDef<T> extends CdkTreeNodeDef<T> {
 @Directive({
   selector: 'mat-nested-tree-node',
   exportAs: 'matNestedTreeNode',
-  inputs: ['role', 'disabled', 'tabIndex'],
+  inputs: ['role', 'disabled', 'tabIndex', 'isExpandable', 'isExpanded', 'isDisabled'],
+  outputs: ['activation', 'expandedChange'],
   providers: [
     {provide: CdkNestedTreeNode, useExisting: MatNestedTreeNode},
     {provide: CdkTreeNode, useExisting: MatNestedTreeNode},
@@ -99,29 +136,33 @@ export class MatNestedTreeNode<T, K = T>
 {
   @Input('matNestedTreeNode') node: T;
 
-  /** Whether the node is disabled. */
-  @Input()
+  /**
+   * Whether the component is disabled.
+   *
+   * @deprecated This is an alias for `isDisabled`.
+   * @breaking-change 12.0.0 Remove this input
+   */
   get disabled(): boolean {
-    return this._disabled;
+    return this.isDisabled ?? false;
   }
-  set disabled(value: BooleanInput) {
-    this._disabled = coerceBooleanProperty(value);
+  set disabled(value: any) {
+    this.isDisabled = coerceBooleanProperty(value);
   }
-  private _disabled = false;
 
-  /** Tabindex for the node. */
-  @Input()
+  /**
+   * The tabindex of the tree node.
+   *
+   * @deprecated This will be ignored; the tree will automatically determine the appropriate tabindex for the tree node. This input will be
+   *   removed in a future version.
+   * @breaking-change 12.0.0 Remove this input
+   */
   get tabIndex(): number {
-    return this.disabled ? -1 : this._tabIndex;
+    return Number(this.elementRef.nativeElement.getAttribute('tabindex') ?? '-1');
   }
-  set tabIndex(value: number) {
-    // If the specified tabIndex value is null or undefined, fall back to the default value.
-    this._tabIndex = value != null ? value : 0;
-  }
-  private _tabIndex: number;
+  set tabIndex(value: number) {}
 
   constructor(
-    elementRef: ElementRef<HTMLElement>,
+    private elementRef: ElementRef<HTMLElement>,
     tree: CdkTree<T, K>,
     differs: IterableDiffers,
     @Attribute('tabindex') tabIndex: string,
diff --git a/src/material/tree/tree.spec.ts b/src/material/tree/tree.spec.ts
index 76774f7584de..29786cc29266 100644
--- a/src/material/tree/tree.spec.ts
+++ b/src/material/tree/tree.spec.ts
@@ -9,6 +9,7 @@ import {FlatTreeControl, NestedTreeControl, TreeControl} from '@angular/cdk/tree
 import {Component, ViewChild, Type} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {BehaviorSubject, Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
 import {
   MatTree,
   MatTreeFlatDataSource,
@@ -62,38 +63,6 @@ describe('MatTree', () => {
         });
       });
 
-      it('with the right aria-level attrs', () => {
-        // add a child to the first node
-        const data = underlyingDataSource.data;
-        underlyingDataSource.addChild(data[2]);
-        component.treeControl.expandAll();
-        fixture.detectChanges();
-
-        const ariaLevels = getNodes(treeElement).map(n => n.getAttribute('aria-level'));
-        expect(ariaLevels).toEqual(['1', '1', '1', '2']);
-      });
-
-      it('with the right aria-expanded attrs', () => {
-        // add a child to the first node
-        const data = underlyingDataSource.data;
-        underlyingDataSource.addChild(data[2]);
-        fixture.detectChanges();
-        expect(
-          getNodes(treeElement).every(node => {
-            return node.getAttribute('aria-expanded') === 'false';
-          }),
-        ).toBe(true);
-
-        component.treeControl.expandAll();
-        fixture.detectChanges();
-
-        expect(
-          getNodes(treeElement).every(node => {
-            return node.getAttribute('aria-expanded') === 'true';
-          }),
-        ).toBe(true);
-      });
-
       it('with the right data', () => {
         expect(underlyingDataSource.data.length).toBe(3);
 
@@ -470,11 +439,9 @@ describe('MatTree', () => {
       });
 
       it('with the right aria-expanded attrs', () => {
-        expect(
-          getNodes(treeElement).every(node => {
-            return node.getAttribute('aria-expanded') === 'false';
-          }),
-        ).toBe(true);
+        expect(getNodeAttributes(getNodes(treeElement), 'aria-expanded'))
+          .withContext('aria-expanded attributes')
+          .toEqual([null, null, null]);
 
         component.toggleRecursively = false;
         const data = underlyingDataSource.data;
@@ -485,8 +452,11 @@ describe('MatTree', () => {
         (getNodes(treeElement)[1] as HTMLElement).click();
         fixture.detectChanges();
 
-        const ariaExpanded = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
-        expect(ariaExpanded).toEqual(['false', 'true', 'false', 'false']);
+        // NB: only four elements are present here; children are not present
+        // in DOM unless the parent node is expanded.
+        expect(getNodeAttributes(getNodes(treeElement), 'aria-expanded'))
+          .withContext('aria-expanded attributes')
+          .toEqual([null, 'true', 'false', null]);
       });
 
       it('should expand/collapse the node', () => {
@@ -577,6 +547,142 @@ describe('MatTree', () => {
       });
     });
   });
+
+  describe('accessibility', () => {
+    let fixture: ComponentFixture<NestedMatTreeApp>;
+    let component: NestedMatTreeApp;
+    let nodes: HTMLElement[];
+    let tree: MatTree<TestData>;
+
+    beforeEach(() => {
+      configureMatTreeTestingModule([NestedMatTreeApp]);
+      fixture = TestBed.createComponent(NestedMatTreeApp);
+      fixture.detectChanges();
+
+      component = fixture.componentInstance;
+      underlyingDataSource = component.underlyingDataSource as FakeDataSource;
+      const data = underlyingDataSource.data;
+      const child = underlyingDataSource.addChild(data[1], false);
+      underlyingDataSource.addChild(child, false);
+      underlyingDataSource.addChild(child, false);
+      fixture.detectChanges();
+
+      tree = component.tree;
+      treeElement = fixture.nativeElement.querySelector('mat-tree');
+      nodes = getNodes(treeElement);
+    });
+
+    describe('focus management', () => {
+      it('the tree is tabbable when no element is active', () => {
+        expect(treeElement.getAttribute('tabindex')).toBe('0');
+      });
+
+      it('the tree is not tabbable when an element is active', () => {
+        // activate the second child by clicking on it
+        nodes[1].click();
+
+        expect(treeElement.getAttribute('tabindex')).toBe(null);
+      });
+
+      it('sets tabindex on the latest activated item, with all others "-1"', () => {
+        // activate the second child by clicking on it
+        nodes[1].click();
+
+        expect(getNodeAttributes(nodes, 'tabindex')).toEqual(['-1', '0', '-1', '-1', '-1', '-1']);
+
+        // activate the first child by clicking on it
+        nodes[0].click();
+
+        expect(getNodeAttributes(nodes, 'tabindex')).toEqual(['0', '-1', '-1', '-1', '-1', '-1']);
+      });
+
+      it('maintains tabindex when component is blurred', () => {
+        // activate the second child by clicking on it
+        nodes[1].click();
+
+        expect(document.activeElement).toBe(nodes[1]);
+        // blur the currently active element (which we just checked is the above node)
+        nodes[1].blur();
+
+        expect(treeElement.getAttribute('tabindex')).toBe(null);
+        expect(getNodeAttributes(nodes, 'tabindex')).toEqual(['-1', '0', '-1', '-1', '-1', '-1']);
+      });
+
+      it('ignores clicks on disabled items', () => {
+        underlyingDataSource.data[0].isDisabled = true;
+        fixture.detectChanges();
+
+        // attempt to click on the first child
+        nodes[0].click();
+
+        expect(treeElement.getAttribute('tabindex')).toBe('0');
+        expect(getNodeAttributes(nodes, 'tabindex')).toEqual(['-1', '-1', '-1', '-1', '-1', '-1']);
+      });
+
+      describe('when no item is currently active', () => {
+        it('redirects focus to the first item when the tree is focused', () => {
+          treeElement.focus();
+
+          expect(document.activeElement).toBe(nodes[0]);
+        });
+
+        it('redirects focus to the first non-disabled item when the tree is focused', () => {
+          underlyingDataSource.data[0].isDisabled = true;
+          fixture.detectChanges();
+
+          treeElement.focus();
+
+          expect(document.activeElement).toBe(nodes[1]);
+        });
+      });
+    });
+
+    describe('tree role & attributes', () => {
+      it('sets the tree role on the tree element', () => {
+        expect(treeElement.getAttribute('role')).toBe('tree');
+      });
+
+      it('sets the treeitem role on all nodes', () => {
+        expect(getNodeAttributes(nodes, 'role')).toEqual([
+          'treeitem',
+          'treeitem',
+          'treeitem',
+          'treeitem',
+          'treeitem',
+          'treeitem',
+        ]);
+      });
+
+      it('sets aria attributes for tree nodes', () => {
+        expect(getNodeAttributes(nodes, 'aria-expanded'))
+          .withContext('aria-expanded attributes')
+          .toEqual([null, 'false', 'false', null, null, null]);
+        expect(getNodeAttributes(nodes, 'aria-level'))
+          .withContext('aria-level attributes')
+          .toEqual(['1', '1', '2', '3', '3', '1']);
+        expect(getNodeAttributes(nodes, 'aria-posinset'))
+          .withContext('aria-posinset attributes')
+          .toEqual(['1', '2', '1', '1', '2', '3']);
+        expect(getNodeAttributes(nodes, 'aria-setsize'))
+          .withContext('aria-setsize attributes')
+          .toEqual(['3', '3', '1', '2', '2', '3']);
+      });
+
+      it('changes aria-expanded status when expanded or collapsed', () => {
+        tree.expand(underlyingDataSource.data[1]);
+        fixture.detectChanges();
+        expect(getNodeAttributes(nodes, 'aria-expanded'))
+          .withContext('aria-expanded attributes')
+          .toEqual([null, 'true', 'false', null, null, null]);
+
+        tree.collapse(underlyingDataSource.data[1]);
+        fixture.detectChanges();
+        expect(getNodeAttributes(nodes, 'aria-expanded'))
+          .withContext('aria-expanded attributes')
+          .toEqual([null, 'false', 'false', null, null, null]);
+      });
+    });
+  });
 });
 
 export class TestData {
@@ -587,6 +693,7 @@ export class TestData {
   children: TestData[];
   observableChildren: BehaviorSubject<TestData[]>;
   isSpecial: boolean;
+  isDisabled?: boolean;
 
   constructor(
     pizzaTopping: string,
@@ -668,7 +775,7 @@ class FakeDataSource {
   }
 }
 
-function getNodes(treeElement: Element): Element[] {
+function getNodes(treeElement: Element): HTMLElement[] {
   return [].slice.call(treeElement.querySelectorAll('.mat-tree-node, .mat-nested-tree-node'))!;
 }
 
@@ -763,6 +870,10 @@ function expectNestedTreeToMatch(treeElement: Element, ...expectedTree: any[]) {
   }
 }
 
+function getNodeAttributes(nodes: HTMLElement[], attribute: string) {
+  return nodes.map(node => node.getAttribute(attribute));
+}
+
 @Component({
   template: `
     <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
@@ -903,7 +1014,9 @@ class MatNestedTreeWithNullOrUndefinedChild {
 @Component({
   template: `
     <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
-      <mat-nested-tree-node *matTreeNodeDef="let node" class="customNodeClass">
+      <mat-nested-tree-node *matTreeNodeDef="let node" class="customNodeClass"
+                            [isExpandable]="isExpandable(node) | async"
+                            [isDisabled]="node.isDisabled">
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
          <ng-template matTreeNodeOutlet></ng-template>
       </mat-nested-tree-node>
@@ -912,6 +1025,8 @@ class MatNestedTreeWithNullOrUndefinedChild {
 })
 class NestedMatTreeApp {
   getChildren = (node: TestData) => node.observableChildren;
+  isExpandable = (node: TestData) =>
+    node.observableChildren.pipe(map(children => children.length > 0));
 
   treeControl = new NestedTreeControl(this.getChildren);
 
@@ -967,6 +1082,8 @@ class WhenNodeNestedMatTreeApp {
   template: `
     <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
       <mat-tree-node *matTreeNodeDef="let node" class="customNodeClass"
+                     [isExpandable]="isExpandable(node)"
+                     [isDisabled]="node.isDisabled"
                      matTreeNodePadding
                      matTreeNodeToggle [matTreeNodeToggleRecursive]="toggleRecursively">
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
@@ -1010,7 +1127,9 @@ class MatTreeAppWithToggle {
   template: `
     <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
       <mat-nested-tree-node *matTreeNodeDef="let node" class="customNodeClass"
-                            matTreeNodeToggle [matTreeNodeToggleRecursive]="toggleRecursively">
+                            [isExpandable]="isExpandable(node) | async"
+                            matTreeNodeToggle
+                            [matTreeNodeToggleRecursive]="toggleRecursively">
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
         <div *ngIf="treeControl.isExpanded(node)">
           <ng-template matTreeNodeOutlet></ng-template>
@@ -1023,6 +1142,8 @@ class NestedMatTreeAppWithToggle {
   toggleRecursively: boolean = true;
 
   getChildren = (node: TestData) => node.observableChildren;
+  isExpandable = (node: TestData) =>
+    node.observableChildren.pipe(map(children => children.length > 0));
 
   treeControl = new NestedTreeControl(this.getChildren);
   dataSource = new MatTreeNestedDataSource();
diff --git a/src/material/tree/tree.ts b/src/material/tree/tree.ts
index 201c6506ffec..1a6c2c609877 100644
--- a/src/material/tree/tree.ts
+++ b/src/material/tree/tree.ts
@@ -20,6 +20,8 @@ import {MatTreeNodeOutlet} from './outlet';
   host: {
     'class': 'mat-tree',
     'role': 'tree',
+    '(keydown)': '_sendKeydownToKeyManager($event)',
+    '(focus)': '_focusInitialTreeItem()',
   },
   styleUrls: ['tree.css'],
   encapsulation: ViewEncapsulation.None,

From a23f598d6a5c160bcbeca1583bad19b82c86e2a2 Mon Sep 17 00:00:00 2001
From: Cassandra Choi <cassc@google.com>
Date: Mon, 12 Jun 2023 22:15:36 +0000
Subject: [PATCH 14/18] fix(material/tree): api goldens

---
 src/material/tree/node.ts               |  6 ++--
 tools/public_api_guard/cdk/tree.md      | 37 +++++++++++++++++++++----
 tools/public_api_guard/material/tree.md | 17 ++++++++----
 3 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/src/material/tree/node.ts b/src/material/tree/node.ts
index 96e91171ad19..e7341b6d9fa1 100644
--- a/src/material/tree/node.ts
+++ b/src/material/tree/node.ts
@@ -23,7 +23,7 @@ import {
   OnDestroy,
   OnInit,
 } from '@angular/core';
-import {CanDisable, HasTabIndex, mixinDisabled, mixinTabIndex} from '@angular/material/core';
+import {CanDisable, HasTabIndex} from '@angular/material/core';
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 
 /**
@@ -76,7 +76,7 @@ export class MatTreeNode<T, K = T>
   get disabled(): boolean {
     return this.isDisabled ?? false;
   }
-  set disabled(value: any) {
+  set disabled(value: BooleanInput) {
     this.isDisabled = coerceBooleanProperty(value);
   }
 
@@ -145,7 +145,7 @@ export class MatNestedTreeNode<T, K = T>
   get disabled(): boolean {
     return this.isDisabled ?? false;
   }
-  set disabled(value: any) {
+  set disabled(value: BooleanInput) {
     this.isDisabled = coerceBooleanProperty(value);
   }
 
diff --git a/tools/public_api_guard/cdk/tree.md b/tools/public_api_guard/cdk/tree.md
index 9dcd88654133..56e420fdac83 100644
--- a/tools/public_api_guard/cdk/tree.md
+++ b/tools/public_api_guard/cdk/tree.md
@@ -13,7 +13,7 @@ import { CollectionViewer } from '@angular/cdk/collections';
 import { DataSource } from '@angular/cdk/collections';
 import { Directionality } from '@angular/cdk/bidi';
 import { ElementRef } from '@angular/core';
-import { FocusableOption } from '@angular/cdk/a11y';
+import { EventEmitter } from '@angular/core';
 import * as i0 from '@angular/core';
 import { InjectionToken } from '@angular/core';
 import { IterableDiffer } from '@angular/core';
@@ -27,6 +27,8 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { Subject } from 'rxjs';
 import { TemplateRef } from '@angular/core';
 import { TrackByFunction } from '@angular/core';
+import { TreeKeyManager } from '@angular/cdk/a11y';
+import { TreeKeyManagerItem } from '@angular/cdk/a11y';
 import { ViewContainerRef } from '@angular/core';
 
 // @public @deprecated
@@ -76,8 +78,8 @@ export class CdkNestedTreeNode<T, K = T> extends CdkTreeNode<T, K> implements Af
 }
 
 // @public
-export class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
-    constructor(_differs: IterableDiffers, _changeDetectorRef: ChangeDetectorRef);
+export class CdkTree<T, K = T> implements AfterContentChecked, AfterContentInit, CollectionViewer, OnDestroy, OnInit {
+    constructor(_differs: IterableDiffers, _changeDetectorRef: ChangeDetectorRef, _dir: Directionality, _elementRef: ElementRef<HTMLElement>);
     childrenAccessor?: (dataNode: T) => T[] | Observable<T[]>;
     collapse(dataNode: T): void;
     collapseAll(): void;
@@ -88,19 +90,25 @@ export class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer,
     expandAll(): void;
     expandDescendants(dataNode: T): void;
     expansionKey?: (dataNode: T) => K;
+    _focusInitialTreeItem(): void;
     _getChildrenAccessor(): ((dataNode: T) => T[] | Observable<T[]> | null | undefined) | undefined;
     _getDirectChildren(dataNode: T): Observable<T[]>;
     _getLevel(node: T): number | undefined;
     _getLevelAccessor(): ((dataNode: T) => number) | undefined;
+    _getNodeChildren(node: CdkTreeNode<T, K>): Observable<CdkTreeNode<T, K>[]>;
     _getNodeDef(data: T, i: number): CdkTreeNodeDef<T>;
+    _getNodeParent(node: CdkTreeNode<T, K>): CdkTreeNode<T, K> | null | undefined;
     _getPositionInSet(dataNode: T): number;
     _getSetSize(dataNode: T): number;
     insertNode(nodeData: T, index: number, viewContainer?: ViewContainerRef, parentData?: T): void;
     isExpanded(dataNode: T): boolean;
+    _keyManager: TreeKeyManager<CdkTreeNode<T, K>>;
     levelAccessor?: (dataNode: T) => number;
     // (undocumented)
     ngAfterContentChecked(): void;
     // (undocumented)
+    ngAfterContentInit(): void;
+    // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
     ngOnInit(): void;
@@ -110,6 +118,8 @@ export class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer,
     nodeType?: 'flat' | 'nested';
     _registerNode(node: CdkTreeNode<T, K>): void;
     _renderNodeChanges(data: readonly T[], dataDiffer?: IterableDiffer<T>, viewContainer?: ViewContainerRef, parentData?: T): void;
+    _sendKeydownToKeyManager(event: KeyboardEvent): void;
+    _setTabIndex(): void;
     toggle(dataNode: T): void;
     toggleDescendants(dataNode: T): void;
     trackBy: TrackByFunction<T>;
@@ -137,8 +147,11 @@ export class CdkTreeModule {
 }
 
 // @public
-export class CdkTreeNode<T, K = T> implements FocusableOption, OnDestroy, OnInit {
+export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerItem {
     constructor(_elementRef: ElementRef<HTMLElement>, _tree: CdkTree<T, K>);
+    activate(): void;
+    readonly activation: EventEmitter<T>;
+    collapse(): void;
     get data(): T;
     set data(value: T);
     // (undocumented)
@@ -147,9 +160,17 @@ export class CdkTreeNode<T, K = T> implements FocusableOption, OnDestroy, OnInit
     protected readonly _destroyed: Subject<void>;
     // (undocumented)
     protected _elementRef: ElementRef<HTMLElement>;
+    expand(): void;
+    readonly expandedChange: EventEmitter<boolean>;
     focus(): void;
+    _getAriaExpanded(): string | null;
+    // (undocumented)
+    getChildren(): CdkTreeNode<T, K>[] | Observable<CdkTreeNode<T, K>[]>;
+    // (undocumented)
+    getParent(): CdkTreeNode<T, K> | null;
     _getPositionInSet(): number;
     _getSetSize(): number;
+    isDisabled?: boolean;
     // (undocumented)
     isExpandable: boolean;
     // (undocumented)
@@ -166,11 +187,17 @@ export class CdkTreeNode<T, K = T> implements FocusableOption, OnDestroy, OnInit
     get role(): 'treeitem' | 'group';
     set role(_role: 'treeitem' | 'group');
     // (undocumented)
+    _setActiveItem(): void;
+    // (undocumented)
     protected _setRoleFromData(): void;
     // (undocumented)
+    _setTabFocusable(): void;
+    // (undocumented)
+    _setTabUnfocusable(): void;
+    // (undocumented)
     protected _tree: CdkTree<T, K>;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTreeNode<any, any>, "cdk-tree-node", ["cdkTreeNode"], { "role": { "alias": "role"; "required": false; }; "isExpandable": { "alias": "isExpandable"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTreeNode<any, any>, "cdk-tree-node", ["cdkTreeNode"], { "role": { "alias": "role"; "required": false; }; "isExpandable": { "alias": "isExpandable"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; }, { "activation": "activation"; "expandedChange": "expandedChange"; }, never, never, false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkTreeNode<any, any>, never>;
 }
diff --git a/tools/public_api_guard/material/tree.md b/tools/public_api_guard/material/tree.md
index 40deb0121963..4c444644a723 100644
--- a/tools/public_api_guard/material/tree.md
+++ b/tools/public_api_guard/material/tree.md
@@ -4,7 +4,6 @@
 
 ```ts
 
-import { _AbstractConstructor } from '@angular/material/core';
 import { AfterContentInit } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { CanDisable } from '@angular/material/core';
@@ -16,7 +15,6 @@ import { CdkTreeNodeOutlet } from '@angular/cdk/tree';
 import { CdkTreeNodePadding } from '@angular/cdk/tree';
 import { CdkTreeNodeToggle } from '@angular/cdk/tree';
 import { CollectionViewer } from '@angular/cdk/collections';
-import { _Constructor } from '@angular/material/core';
 import { DataSource } from '@angular/cdk/collections';
 import { ElementRef } from '@angular/core';
 import { FlatTreeControl } from '@angular/cdk/tree';
@@ -35,6 +33,7 @@ import { ViewContainerRef } from '@angular/core';
 // @public
 export class MatNestedTreeNode<T, K = T> extends CdkNestedTreeNode<T, K> implements AfterContentInit, OnDestroy, OnInit {
     constructor(elementRef: ElementRef<HTMLElement>, tree: CdkTree<T, K>, differs: IterableDiffers, tabIndex: string);
+    // @deprecated
     get disabled(): boolean;
     set disabled(value: BooleanInput);
     // (undocumented)
@@ -45,10 +44,11 @@ export class MatNestedTreeNode<T, K = T> extends CdkNestedTreeNode<T, K> impleme
     ngOnInit(): void;
     // (undocumented)
     node: T;
+    // @deprecated
     get tabIndex(): number;
     set tabIndex(value: number);
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatNestedTreeNode<any, any>, "mat-nested-tree-node", ["matNestedTreeNode"], { "role": { "alias": "role"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "node": { "alias": "matNestedTreeNode"; "required": false; }; }, {}, never, never, false, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatNestedTreeNode<any, any>, "mat-nested-tree-node", ["matNestedTreeNode"], { "role": { "alias": "role"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "isExpandable": { "alias": "isExpandable"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "node": { "alias": "matNestedTreeNode"; "required": false; }; }, { "activation": "activation"; "expandedChange": "expandedChange"; }, never, never, false, never, false>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatNestedTreeNode<any, any>, [null, null, null, { attribute: "tabindex"; }]>;
 }
@@ -115,14 +115,21 @@ export class MatTreeNestedDataSource<T> extends DataSource<T> {
 }
 
 // @public
-export class MatTreeNode<T, K = T> extends _MatTreeNodeBase<T, K> implements CanDisable, HasTabIndex, OnInit, OnDestroy {
+export class MatTreeNode<T, K = T> extends CdkTreeNode<T, K> implements CanDisable, HasTabIndex, OnInit, OnDestroy {
     constructor(elementRef: ElementRef<HTMLElement>, tree: CdkTree<T, K>, tabIndex: string);
+    // @deprecated
+    defaultTabIndex: number;
+    // @deprecated
+    get disabled(): boolean;
+    set disabled(value: BooleanInput);
     // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
     ngOnInit(): void;
+    // @deprecated
+    tabIndex: number;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTreeNode<any, any>, "mat-tree-node", ["matTreeNode"], { "role": { "alias": "role"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, never, false, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTreeNode<any, any>, "mat-tree-node", ["matTreeNode"], { "role": { "alias": "role"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "isExpandable": { "alias": "isExpandable"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; }, { "activation": "activation"; "expandedChange": "expandedChange"; }, never, never, false, never, false>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTreeNode<any, any>, [null, null, { attribute: "tabindex"; }]>;
 }

From d8a93e2e926d39855f05392e40601a02f7686bdd Mon Sep 17 00:00:00 2001
From: Cassandra Choi <cassc@google.com>
Date: Tue, 13 Jun 2023 22:09:45 +0000
Subject: [PATCH 15/18] feat(cdk/tree): add `isExpandable` parameter to
 NestedTreeControl, fix some tests

---
 src/cdk/tree/control/nested-tree-control.ts |  5 +++
 src/cdk/tree/nested-node.ts                 |  4 ++-
 src/cdk/tree/tree.spec.ts                   | 12 +++----
 src/cdk/tree/tree.ts                        | 36 +++++++++++++++++++--
 src/material/tree/node.ts                   |  7 ++--
 src/material/tree/testing/shared.spec.ts    |  4 ++-
 6 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/src/cdk/tree/control/nested-tree-control.ts b/src/cdk/tree/control/nested-tree-control.ts
index d8e8009b3115..86eefa45f857 100644
--- a/src/cdk/tree/control/nested-tree-control.ts
+++ b/src/cdk/tree/control/nested-tree-control.ts
@@ -11,6 +11,7 @@ import {BaseTreeControl} from './base-tree-control';
 
 /** Optional set of configuration that can be provided to the NestedTreeControl. */
 export interface NestedTreeControlOptions<T, K> {
+  isExpandable?: (dataNode: T) => boolean;
   trackBy?: (dataNode: T) => K;
 }
 
@@ -31,6 +32,10 @@ export class NestedTreeControl<T, K = T> extends BaseTreeControl<T, K> {
     if (this.options) {
       this.trackBy = this.options.trackBy;
     }
+
+    if (this.options?.isExpandable) {
+      this.isExpandable = this.options.isExpandable;
+    }
   }
 
   /**
diff --git a/src/cdk/tree/nested-node.ts b/src/cdk/tree/nested-node.ts
index 91a328744e42..0f6d5ddd863e 100644
--- a/src/cdk/tree/nested-node.ts
+++ b/src/cdk/tree/nested-node.ts
@@ -7,6 +7,7 @@
  */
 import {
   AfterContentInit,
+  ChangeDetectorRef,
   ContentChildren,
   Directive,
   ElementRef,
@@ -60,9 +61,10 @@ export class CdkNestedTreeNode<T, K = T>
   constructor(
     elementRef: ElementRef<HTMLElement>,
     tree: CdkTree<T, K>,
+    changeDetectorRef: ChangeDetectorRef,
     protected _differs: IterableDiffers,
   ) {
-    super(elementRef, tree);
+    super(elementRef, tree, changeDetectorRef);
   }
 
   ngAfterContentInit() {
diff --git a/src/cdk/tree/tree.spec.ts b/src/cdk/tree/tree.spec.ts
index 5e3607c77dda..23b3bd9d38db 100644
--- a/src/cdk/tree/tree.spec.ts
+++ b/src/cdk/tree/tree.spec.ts
@@ -1488,7 +1488,6 @@ class NestedCdkTreeApp {
       <cdk-nested-tree-node
           *cdkTreeNodeDef="let node"
           class="customNodeClass"
-          [isExpandable]="node.children.length > 0"
           [isDisabled]="node.isDisabled">
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
          <ng-template cdkTreeNodeOutlet></ng-template>
@@ -1499,7 +1498,9 @@ class NestedCdkTreeApp {
 class StaticNestedCdkTreeApp {
   getChildren = (node: TestData) => node.children;
 
-  treeControl: TreeControl<TestData> = new NestedTreeControl(this.getChildren);
+  treeControl: TreeControl<TestData> = new NestedTreeControl(this.getChildren, {
+    isExpandable: node => node.children.length > 0,
+  });
 
   dataSource: FakeDataSource;
 
@@ -1569,7 +1570,6 @@ class CdkTreeAppWithToggle {
   template: `
     <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
       <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="customNodeClass"
-                            [isExpandable]="isExpandable(node) | async"
                             cdkTreeNodeToggle
                             [cdkTreeNodeToggleRecursive]="toggleRecursively">
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
@@ -1584,10 +1584,10 @@ class NestedCdkTreeAppWithToggle {
   toggleRecursively: boolean = true;
 
   getChildren = (node: TestData) => node.observableChildren;
-  isExpandable = (node: TestData) =>
-    node.observableChildren.pipe(map(children => children.length > 0));
 
-  treeControl: TreeControl<TestData> = new NestedTreeControl(this.getChildren);
+  treeControl: TreeControl<TestData> = new NestedTreeControl(this.getChildren, {
+    isExpandable: node => node.children.length > 0,
+  });
   dataSource: FakeDataSource | null = new FakeDataSource(this.treeControl);
 
   @ViewChild(CdkTree) tree: CdkTree<TestData>;
diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts
index 66b792f4dbac..7f6f8530d613 100644
--- a/src/cdk/tree/tree.ts
+++ b/src/cdk/tree/tree.ts
@@ -54,6 +54,7 @@ import {
   take,
   takeUntil,
   tap,
+  withLatestFrom,
 } from 'rxjs/operators';
 import {TreeControl} from './control/tree-control';
 import {CdkTreeNodeDef, CdkTreeNodeOutletContext} from './node';
@@ -260,9 +261,26 @@ export class CdkTree<T, K = T>
       }
     }
 
+    let expansionModel;
     if (!this.treeControl) {
-      this._expansionModel = new SelectionModel(true);
+      expansionModel = new SelectionModel<K>(true);
+      this._expansionModel = expansionModel;
+    } else {
+      expansionModel = this.treeControl.expansionModel;
     }
+
+    // We manually detect changes on all the children nodes when expansion
+    // status changes; otherwise, the various attributes won't be updated.
+    expansionModel.changed
+      .pipe(withLatestFrom(this._nodes), takeUntil(this._onDestroy))
+      .subscribe(([changes, nodes]) => {
+        for (const added of changes.added) {
+          nodes.get(added)?._changeDetectorRef.detectChanges();
+        }
+        for (const removed of changes.removed) {
+          nodes.get(removed)?._changeDetectorRef.detectChanges();
+        }
+      });
   }
 
   ngOnDestroy() {
@@ -986,13 +1004,21 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
     return this._tree._getLevel(this._data) ?? this._parentNodeAriaLevel;
   }
 
+  /** Determines if the tree node is expandable. */
+  _isExpandable(): boolean {
+    if (typeof this._tree.treeControl?.isExpandable === 'function') {
+      return this._tree.treeControl.isExpandable(this._data);
+    }
+    return this.isExpandable;
+  }
+
   /**
    * Determines the value for `aria-expanded`.
    *
    * For non-expandable nodes, this is `null`.
    */
   _getAriaExpanded(): string | null {
-    if (!this.isExpandable) {
+    if (!this._isExpandable()) {
       return null;
     }
     return String(this.isExpanded);
@@ -1016,7 +1042,11 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
     return this._tree._getPositionInSet(this._data);
   }
 
-  constructor(protected _elementRef: ElementRef<HTMLElement>, protected _tree: CdkTree<T, K>) {
+  constructor(
+    protected _elementRef: ElementRef<HTMLElement>,
+    protected _tree: CdkTree<T, K>,
+    public _changeDetectorRef: ChangeDetectorRef,
+  ) {
     CdkTreeNode.mostRecentTreeNode = this as CdkTreeNode<T, K>;
     this.role = 'treeitem';
   }
diff --git a/src/material/tree/node.ts b/src/material/tree/node.ts
index e7341b6d9fa1..a2fde449165a 100644
--- a/src/material/tree/node.ts
+++ b/src/material/tree/node.ts
@@ -16,6 +16,7 @@ import {
 import {
   AfterContentInit,
   Attribute,
+  ChangeDetectorRef,
   Directive,
   ElementRef,
   Input,
@@ -83,9 +84,10 @@ export class MatTreeNode<T, K = T>
   constructor(
     elementRef: ElementRef<HTMLElement>,
     tree: CdkTree<T, K>,
+    changeDetectorRef: ChangeDetectorRef,
     @Attribute('tabindex') tabIndex: string,
   ) {
-    super(elementRef, tree);
+    super(elementRef, tree, changeDetectorRef);
     this.tabIndex = Number(tabIndex) || 0;
   }
 
@@ -165,9 +167,10 @@ export class MatNestedTreeNode<T, K = T>
     private elementRef: ElementRef<HTMLElement>,
     tree: CdkTree<T, K>,
     differs: IterableDiffers,
+    changeDetectorRef: ChangeDetectorRef,
     @Attribute('tabindex') tabIndex: string,
   ) {
-    super(elementRef, tree, differs);
+    super(elementRef, tree, changeDetectorRef, differs);
     this.tabIndex = Number(tabIndex) || 0;
   }
 
diff --git a/src/material/tree/testing/shared.spec.ts b/src/material/tree/testing/shared.spec.ts
index d51872f3fe0f..7241a844307d 100644
--- a/src/material/tree/testing/shared.spec.ts
+++ b/src/material/tree/testing/shared.spec.ts
@@ -276,7 +276,9 @@ class TreeHarnessTest {
     node => node.expandable,
   );
   flatTreeDataSource = new MatTreeFlatDataSource(this.flatTreeControl, this.treeFlattener);
-  nestedTreeControl = new NestedTreeControl<Node>(node => node.children);
+  nestedTreeControl = new NestedTreeControl<Node>(node => node.children, {
+    isExpandable: node => !!node.children && node.children.length > 0,
+  });
   nestedTreeDataSource = new MatTreeNestedDataSource<Node>();
 
   constructor() {

From 232fdd96465475a851cd49a178e09e561df26870 Mon Sep 17 00:00:00 2001
From: Cassandra Choi <cassc@google.com>
Date: Tue, 13 Jun 2023 22:43:04 +0000
Subject: [PATCH 16/18] fix(cdk/tree): update api goldens

---
 src/cdk/tree/control/nested-tree-control.ts | 1 +
 src/cdk/tree/tree.ts                        | 6 ++++++
 tools/public_api_guard/cdk/tree.md          | 9 ++++++---
 tools/public_api_guard/material/tree.md     | 9 +++++----
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/cdk/tree/control/nested-tree-control.ts b/src/cdk/tree/control/nested-tree-control.ts
index 86eefa45f857..a94eeedde55a 100644
--- a/src/cdk/tree/control/nested-tree-control.ts
+++ b/src/cdk/tree/control/nested-tree-control.ts
@@ -11,6 +11,7 @@ import {BaseTreeControl} from './base-tree-control';
 
 /** Optional set of configuration that can be provided to the NestedTreeControl. */
 export interface NestedTreeControlOptions<T, K> {
+  /** Function to determine if the provided node is expandable. */
   isExpandable?: (dataNode: T) => boolean;
   trackBy?: (dataNode: T) => K;
 }
diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts
index 7f6f8530d613..0513ec1d06f0 100644
--- a/src/cdk/tree/tree.ts
+++ b/src/cdk/tree/tree.ts
@@ -942,6 +942,12 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
     this._setRoleFromData();
   }
 
+  /**
+   * Whether or not this node is expandable.
+   *
+   * If not using `FlatTreeControl`, or if `isExpandable` is not provided to
+   * `NestedTreeControl`, this should be provided for correct node a11y.
+   */
   @Input() isExpandable: boolean = false;
 
   @Input()
diff --git a/tools/public_api_guard/cdk/tree.md b/tools/public_api_guard/cdk/tree.md
index 56e420fdac83..32968bf6283e 100644
--- a/tools/public_api_guard/cdk/tree.md
+++ b/tools/public_api_guard/cdk/tree.md
@@ -58,7 +58,7 @@ export const CDK_TREE_NODE_OUTLET_NODE: InjectionToken<{}>;
 
 // @public
 export class CdkNestedTreeNode<T, K = T> extends CdkTreeNode<T, K> implements AfterContentInit, OnDestroy, OnInit {
-    constructor(elementRef: ElementRef<HTMLElement>, tree: CdkTree<T, K>, _differs: IterableDiffers);
+    constructor(elementRef: ElementRef<HTMLElement>, tree: CdkTree<T, K>, changeDetectorRef: ChangeDetectorRef, _differs: IterableDiffers);
     protected _children: T[];
     protected _clear(): void;
     // (undocumented)
@@ -148,9 +148,11 @@ export class CdkTreeModule {
 
 // @public
 export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerItem {
-    constructor(_elementRef: ElementRef<HTMLElement>, _tree: CdkTree<T, K>);
+    constructor(_elementRef: ElementRef<HTMLElement>, _tree: CdkTree<T, K>, _changeDetectorRef: ChangeDetectorRef);
     activate(): void;
     readonly activation: EventEmitter<T>;
+    // (undocumented)
+    _changeDetectorRef: ChangeDetectorRef;
     collapse(): void;
     get data(): T;
     set data(value: T);
@@ -171,8 +173,8 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
     _getPositionInSet(): number;
     _getSetSize(): number;
     isDisabled?: boolean;
-    // (undocumented)
     isExpandable: boolean;
+    _isExpandable(): boolean;
     // (undocumented)
     get isExpanded(): boolean;
     set isExpanded(isExpanded: boolean);
@@ -331,6 +333,7 @@ export class NestedTreeControl<T, K = T> extends BaseTreeControl<T, K> {
 
 // @public
 export interface NestedTreeControlOptions<T, K> {
+    isExpandable?: (dataNode: T) => boolean;
     // (undocumented)
     trackBy?: (dataNode: T) => K;
 }
diff --git a/tools/public_api_guard/material/tree.md b/tools/public_api_guard/material/tree.md
index 4c444644a723..623bf9114a9b 100644
--- a/tools/public_api_guard/material/tree.md
+++ b/tools/public_api_guard/material/tree.md
@@ -14,6 +14,7 @@ import { CdkTreeNodeDef } from '@angular/cdk/tree';
 import { CdkTreeNodeOutlet } from '@angular/cdk/tree';
 import { CdkTreeNodePadding } from '@angular/cdk/tree';
 import { CdkTreeNodeToggle } from '@angular/cdk/tree';
+import { ChangeDetectorRef } from '@angular/core';
 import { CollectionViewer } from '@angular/cdk/collections';
 import { DataSource } from '@angular/cdk/collections';
 import { ElementRef } from '@angular/core';
@@ -32,7 +33,7 @@ import { ViewContainerRef } from '@angular/core';
 
 // @public
 export class MatNestedTreeNode<T, K = T> extends CdkNestedTreeNode<T, K> implements AfterContentInit, OnDestroy, OnInit {
-    constructor(elementRef: ElementRef<HTMLElement>, tree: CdkTree<T, K>, differs: IterableDiffers, tabIndex: string);
+    constructor(elementRef: ElementRef<HTMLElement>, tree: CdkTree<T, K>, differs: IterableDiffers, changeDetectorRef: ChangeDetectorRef, tabIndex: string);
     // @deprecated
     get disabled(): boolean;
     set disabled(value: BooleanInput);
@@ -50,7 +51,7 @@ export class MatNestedTreeNode<T, K = T> extends CdkNestedTreeNode<T, K> impleme
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatNestedTreeNode<any, any>, "mat-nested-tree-node", ["matNestedTreeNode"], { "role": { "alias": "role"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "isExpandable": { "alias": "isExpandable"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "node": { "alias": "matNestedTreeNode"; "required": false; }; }, { "activation": "activation"; "expandedChange": "expandedChange"; }, never, never, false, never, false>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatNestedTreeNode<any, any>, [null, null, null, { attribute: "tabindex"; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatNestedTreeNode<any, any>, [null, null, null, null, { attribute: "tabindex"; }]>;
 }
 
 // @public
@@ -116,7 +117,7 @@ export class MatTreeNestedDataSource<T> extends DataSource<T> {
 
 // @public
 export class MatTreeNode<T, K = T> extends CdkTreeNode<T, K> implements CanDisable, HasTabIndex, OnInit, OnDestroy {
-    constructor(elementRef: ElementRef<HTMLElement>, tree: CdkTree<T, K>, tabIndex: string);
+    constructor(elementRef: ElementRef<HTMLElement>, tree: CdkTree<T, K>, changeDetectorRef: ChangeDetectorRef, tabIndex: string);
     // @deprecated
     defaultTabIndex: number;
     // @deprecated
@@ -131,7 +132,7 @@ export class MatTreeNode<T, K = T> extends CdkTreeNode<T, K> implements CanDisab
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatTreeNode<any, any>, "mat-tree-node", ["matTreeNode"], { "role": { "alias": "role"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "isExpandable": { "alias": "isExpandable"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; }, { "activation": "activation"; "expandedChange": "expandedChange"; }, never, never, false, never, false>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatTreeNode<any, any>, [null, null, { attribute: "tabindex"; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatTreeNode<any, any>, [null, null, null, { attribute: "tabindex"; }]>;
 }
 
 // @public

From 1babd2e3e9c8036618c181ac778f1c1791b4a17b Mon Sep 17 00:00:00 2001
From: Cassandra Choi <cassc@google.com>
Date: Tue, 13 Jun 2023 22:44:52 +0000
Subject: [PATCH 17/18] fix(material/tree): lint

---
 src/material/tree/node.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/material/tree/node.ts b/src/material/tree/node.ts
index a2fde449165a..182748933b8f 100644
--- a/src/material/tree/node.ts
+++ b/src/material/tree/node.ts
@@ -159,12 +159,12 @@ export class MatNestedTreeNode<T, K = T>
    * @breaking-change 12.0.0 Remove this input
    */
   get tabIndex(): number {
-    return Number(this.elementRef.nativeElement.getAttribute('tabindex') ?? '-1');
+    return Number(this._elementRef.nativeElement.getAttribute('tabindex') ?? '-1');
   }
   set tabIndex(value: number) {}
 
   constructor(
-    private elementRef: ElementRef<HTMLElement>,
+    elementRef: ElementRef<HTMLElement>,
     tree: CdkTree<T, K>,
     differs: IterableDiffers,
     changeDetectorRef: ChangeDetectorRef,

From b6aa9ebf77bfe4c83c0e757aa402f9ef0b957a16 Mon Sep 17 00:00:00 2001
From: Cassandra Choi <cassc@google.com>
Date: Wed, 14 Jun 2023 20:26:18 +0000
Subject: [PATCH 18/18] fix(cdk/tree): update API goldens

---
 tools/public_api_guard/cdk/tree.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/tools/public_api_guard/cdk/tree.md b/tools/public_api_guard/cdk/tree.md
index 32968bf6283e..b9bb20eb1b93 100644
--- a/tools/public_api_guard/cdk/tree.md
+++ b/tools/public_api_guard/cdk/tree.md
@@ -72,7 +72,7 @@ export class CdkNestedTreeNode<T, K = T> extends CdkTreeNode<T, K> implements Af
     nodeOutlet: QueryList<CdkTreeNodeOutlet>;
     protected updateChildrenNodes(children?: T[]): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkNestedTreeNode<any, any>, "cdk-nested-tree-node", ["cdkNestedTreeNode"], { "role": { "alias": "role"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, ["nodeOutlet"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkNestedTreeNode<any, any>, "cdk-nested-tree-node", ["cdkNestedTreeNode"], { "role": { "alias": "role"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, ["nodeOutlet"], never, false, never, false>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkNestedTreeNode<any, any>, never>;
 }
@@ -131,7 +131,7 @@ export class CdkTree<T, K = T> implements AfterContentChecked, AfterContentInit,
         end: number;
     }>;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<CdkTree<any, any>, "cdk-tree", ["cdkTree"], { "dataSource": { "alias": "dataSource"; "required": false; }; "treeControl": { "alias": "treeControl"; "required": false; }; "levelAccessor": { "alias": "levelAccessor"; "required": false; }; "childrenAccessor": { "alias": "childrenAccessor"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; "expansionKey": { "alias": "expansionKey"; "required": false; }; "nodeType": { "alias": "nodeType"; "required": false; }; }, {}, ["_nodeDefs"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CdkTree<any, any>, "cdk-tree", ["cdkTree"], { "dataSource": { "alias": "dataSource"; "required": false; }; "treeControl": { "alias": "treeControl"; "required": false; }; "levelAccessor": { "alias": "levelAccessor"; "required": false; }; "childrenAccessor": { "alias": "childrenAccessor"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; "expansionKey": { "alias": "expansionKey"; "required": false; }; "nodeType": { "alias": "nodeType"; "required": false; }; }, {}, ["_nodeDefs"], never, false, never, false>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkTree<any, any>, never>;
 }
@@ -199,7 +199,7 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
     // (undocumented)
     protected _tree: CdkTree<T, K>;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTreeNode<any, any>, "cdk-tree-node", ["cdkTreeNode"], { "role": { "alias": "role"; "required": false; }; "isExpandable": { "alias": "isExpandable"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; }, { "activation": "activation"; "expandedChange": "expandedChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTreeNode<any, any>, "cdk-tree-node", ["cdkTreeNode"], { "role": { "alias": "role"; "required": false; }; "isExpandable": { "alias": "isExpandable"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; }, { "activation": "activation"; "expandedChange": "expandedChange"; }, never, never, false, never, false>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkTreeNode<any, any>, never>;
 }
@@ -211,7 +211,7 @@ export class CdkTreeNodeDef<T> {
     template: TemplateRef<any>;
     when: (index: number, nodeData: T) => boolean;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTreeNodeDef<any>, "[cdkTreeNodeDef]", never, { "when": { "alias": "cdkTreeNodeDefWhen"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTreeNodeDef<any>, "[cdkTreeNodeDef]", never, { "when": { "alias": "cdkTreeNodeDefWhen"; "required": false; }; }, {}, never, never, false, never, false>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkTreeNodeDef<any>, never>;
 }
@@ -224,7 +224,7 @@ export class CdkTreeNodeOutlet {
     // (undocumented)
     viewContainer: ViewContainerRef;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTreeNodeOutlet, "[cdkTreeNodeOutlet]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTreeNodeOutlet, "[cdkTreeNodeOutlet]", never, {}, {}, never, never, false, never, false>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkTreeNodeOutlet, [null, { optional: true; }]>;
 }
@@ -258,7 +258,7 @@ export class CdkTreeNodePadding<T, K = T> implements OnDestroy {
     // (undocumented)
     _setPadding(forceChange?: boolean): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTreeNodePadding<any, any>, "[cdkTreeNodePadding]", never, { "level": { "alias": "cdkTreeNodePadding"; "required": false; }; "indent": { "alias": "cdkTreeNodePaddingIndent"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTreeNodePadding<any, any>, "[cdkTreeNodePadding]", never, { "level": { "alias": "cdkTreeNodePadding"; "required": false; }; "indent": { "alias": "cdkTreeNodePaddingIndent"; "required": false; }; }, {}, never, never, false, never, false>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkTreeNodePadding<any, any>, [null, null, null, { optional: true; }]>;
 }
@@ -277,7 +277,7 @@ export class CdkTreeNodeToggle<T, K = T> {
     // (undocumented)
     protected _treeNode: CdkTreeNode<T, K>;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTreeNodeToggle<any, any>, "[cdkTreeNodeToggle]", never, { "recursive": { "alias": "cdkTreeNodeToggleRecursive"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTreeNodeToggle<any, any>, "[cdkTreeNodeToggle]", never, { "recursive": { "alias": "cdkTreeNodeToggleRecursive"; "required": false; }; }, {}, never, never, false, never, false>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkTreeNodeToggle<any, any>, never>;
 }