fix(cdk/tree): implement typeahead label

Implement typeahead labels for Tree. Follow the established pattern that
Menu and List use.
 - implement CdkTreeNode#cdkTreeNodeTypeaheadLabel
 - implement CdkTreeNode#getLabel

Author: zarend

src/cdk/tree/tree.spec.ts

@@ -5,7 +5,7 @@
  * 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 {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
 import {
   Component,
   ErrorHandler,
@@ -15,14 +15,16 @@ import {
   EventEmitter,
   ViewChildren,
   QueryList,
+  ElementRef,
 } from '@angular/core';
 import {CollectionViewer, DataSource} from '@angular/cdk/collections';
 import {Directionality, Direction} from '@angular/cdk/bidi';
-import {combineLatest, BehaviorSubject, Observable} from 'rxjs';
+import {combineLatest, BehaviorSubject, Observable, of} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {CdkTreeModule, CdkTreeNodePadding} from './index';
 import {CdkTree, CdkTreeNode} from './tree';
 import {createKeyboardEvent} from '@angular/cdk/testing/testbed/fake-events';
+import {B, C, T} from '../keycodes';
 
 /**
  * This is a cloned version of `tree.spec.ts` that contains all the same tests,
@@ -1286,6 +1288,91 @@ describe('CdkTree', () => {
       });
     });
   });
+
+  describe('typeahead', () => {
+    describe('Tree with default configuration', () => {
+      let fixture: ComponentFixture<FlatTreeWithThreeNodes>;
+      let component: FlatTreeWithThreeNodes;
+
+      beforeEach(() => {
+        configureCdkTreeTestingModule([FlatTreeWithThreeNodes]);
+        fixture = TestBed.createComponent(FlatTreeWithThreeNodes);
+        fixture.detectChanges();
+
+        component = fixture.componentInstance;
+      });
+      describe(`when pressing 'b'`, () => {
+        beforeEach(fakeAsync(() => {
+          component.tree.nativeElement.dispatchEvent(createKeyboardEvent('keydown', B));
+          fixture.detectChanges();
+          tick(1000);
+        }));
+
+        it('focuses banana', () => {
+          expect(document.activeElement)
+            .withContext('expecting banana to be focused')
+            .toBe(component.treeNodes.get(1)?.nativeElement!);
+        });
+      });
+    });
+
+    describe('Tree with cdkTreeNodeTypeaheadlabel Input binding', () => {
+      let fixture: ComponentFixture<TypeaheadLabelFlatTreeWithThreeNodes>;
+      let component: TypeaheadLabelFlatTreeWithThreeNodes;
+
+      beforeEach(() => {
+        configureCdkTreeTestingModule([TypeaheadLabelFlatTreeWithThreeNodes]);
+        fixture = TestBed.createComponent(TypeaheadLabelFlatTreeWithThreeNodes);
+        fixture.detectChanges();
+
+        component = fixture.componentInstance;
+      });
+
+      describe(`when pressing 'b'`, () => {
+        beforeEach(fakeAsync(() => {
+          component.tree.nativeElement.dispatchEvent(createKeyboardEvent('keydown', B));
+          fixture.detectChanges();
+          tick(1000);
+        }));
+
+        it('focuses banana', fakeAsync(() => {
+          component.tree.nativeElement.dispatchEvent(createKeyboardEvent('keydown', B));
+          fixture.detectChanges();
+          tick(1000);
+
+          expect(document.activeElement)
+            .withContext('expecting banana to be focused')
+            .toBe(component.treeNodes.get(1)?.nativeElement!);
+        }));
+      });
+
+      describe(`when pressing 'c'`, () => {
+        beforeEach(fakeAsync(() => {
+          component.tree.nativeElement.dispatchEvent(createKeyboardEvent('keydown', C));
+          fixture.detectChanges();
+          tick(1000);
+        }));
+        it('does not move focus', () => {
+          expect(document.activeElement)
+            .withContext('expecting document body to be focused')
+            .toBe(document.body);
+        });
+      });
+
+      describe(`when pressing 't'`, () => {
+        beforeEach(fakeAsync(() => {
+          component.tree.nativeElement.dispatchEvent(createKeyboardEvent('keydown', T));
+          fixture.detectChanges();
+          tick(1000);
+        }));
+        it('focuses focuses cherry', () => {
+          expect(document.activeElement)
+            .withContext('expecting cherry to be focused')
+            .toBe(component.treeNodes.get(2)?.nativeElement!);
+        });
+      });
+    });
+  });
 });
 
 export class TestData {
@@ -1873,3 +1960,58 @@ class NestedCdkTreeAppWithTrackBy {
 
   @ViewChild(CdkTree) tree: CdkTree<TestData>;
 }
+
+class MinimalTestData {
+  constructor(
+    public name: string,
+    public typeaheadLabel: string | null = null,
+  ) {}
+  children: MinimalTestData[] = [];
+}
+
+@Component({
+  template: `
+    <cdk-tree #tree [dataSource]="dataSource" [childrenAccessor]="getChildren">
+      <cdk-tree-node #node *cdkTreeNodeDef="let node"
+                     [cdkTreeNodeTypeaheadLabel]="node.typeaheadLabel">
+        {{node.name}}
+      </cdk-tree-node>
+    </cdk-tree>
+  `,
+})
+class TypeaheadLabelFlatTreeWithThreeNodes {
+  isExpandable = (node: MinimalTestData) => node.children.length > 0;
+  getChildren = (node: MinimalTestData) => node.children;
+
+  dataSource = of([
+    new MinimalTestData('apple'),
+    new MinimalTestData('banana'),
+    new MinimalTestData('cherry', 'typeahead'),
+  ]);
+
+  @ViewChild('tree', {read: ElementRef}) tree: ElementRef<HTMLElement>;
+  @ViewChildren('node') treeNodes: QueryList<ElementRef<HTMLElement>>;
+}
+
+@Component({
+  template: `
+    <cdk-tree #tree [dataSource]="dataSource" [childrenAccessor]="getChildren">
+      <cdk-tree-node #node *cdkTreeNodeDef="let node">
+        {{node.name}}
+      </cdk-tree-node>
+    </cdk-tree>
+  `,
+})
+class FlatTreeWithThreeNodes {
+  isExpandable = (node: MinimalTestData) => node.children.length > 0;
+  getChildren = (node: MinimalTestData) => node.children;
+
+  dataSource = of([
+    new MinimalTestData('apple'),
+    new MinimalTestData('banana'),
+    new MinimalTestData('cherry'),
+  ]);
+
+  @ViewChild('tree', {read: ElementRef}) tree: ElementRef<HTMLElement>;
+  @ViewChildren('node') treeNodes: QueryList<ElementRef<HTMLElement>>;
+}

src/cdk/tree/tree.ts

@@ -1169,6 +1169,16 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
    */
   @Input({transform: booleanAttribute}) isDisabled: boolean;
 
+  /**
+   * The text used to locate this item during typeahead. If not specified, the `textContent` will
+   * will be used.
+   */
+  @Input('cdkTreeNodeTypeaheadLabel') typeaheadLabel: string | null;
+
+  getLabel(): string {
+    return this.typeaheadLabel || this._elementRef.nativeElement.textContent?.trim() || '';
+  }
+
   /** This emits when the node has been programatically activated or activated by keyboard. */
   @Output()
   readonly activation: EventEmitter<T> = new EventEmitter<T>();

src/components-examples/cdk/tree/cdk-tree-complex/cdk-tree-complex-example.html

@@ -10,6 +10,7 @@
     <cdk-tree-node
         *cdkTreeNodeDef="let node"
         cdkTreeNodePadding
+        [cdkTreeNodeTypeaheadLabel]="node.raw.name"
         [isExpandable]="node.isExpandable()"
         (expandedChange)="onExpand(node, $event)">
       <!-- Spinner when node is loading children; this replaces the expand button. -->

src/components-examples/cdk/tree/cdk-tree-custom-key-manager/cdk-tree-custom-key-manager-example.html

@@ -11,6 +11,7 @@
   <!-- This is the tree node template for expandable nodes -->
   <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
                  cdkTreeNodeToggle
+                 [cdkTreeNodeTypeaheadLabel]="node.name"
                  [style.display]="shouldRender(node) ? 'flex' : 'none'"
                  [isDisabled]="!shouldRender(node)"
                  (expandedChange)="node.isExpanded = $event"

src/components-examples/cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example.html

@@ -11,6 +11,7 @@
   <!-- This is the tree node template for expandable nodes -->
   <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
                  cdkTreeNodeToggle
+                 [cdkTreeNodeTypeaheadLabel]="node.name"
                  [style.display]="shouldRender(node) ? 'flex' : 'none'"
                  [isDisabled]="!shouldRender(node)"
                  [isExpandable]="true"

src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example.html

@@ -11,6 +11,7 @@
   <!-- This is the tree node template for expandable nodes -->
   <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
                  cdkTreeNodeToggle
+                 [cdkTreeNodeTypeaheadLabel]="node.name"
                  [style.display]="shouldRender(node) ? 'flex' : 'none'"
                  [isDisabled]="!shouldRender(node)"
                  [isExpandable]="node.expandable"

src/components-examples/cdk/tree/cdk-tree-flat/cdk-tree-flat-example.html

@@ -10,7 +10,7 @@
   </cdk-tree-node>
   <!-- This is the tree node template for expandable nodes -->
   <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
-                 cdkTreeNodeToggle
+                 cdkTreeNodeToggle [cdkTreeNodeTypeaheadLabel]="node.name"
                  [style.display]="shouldRender(node) ? 'flex' : 'none'"
                  [isDisabled]="!shouldRender(node)"
                  (expandedChange)="node.isExpanded = $event"

src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.html

@@ -10,6 +10,7 @@
   <cdk-nested-tree-node #treeNode="cdkNestedTreeNode"
       cdkTreeNodeToggle
       *cdkTreeNodeDef="let node; when: hasChild"
+      [cdkTreeNodeTypeaheadLabel]="node.name"
       isExpandable
       class="example-tree-node">
     <button mat-icon-button [attr.aria-label]="'Toggle ' + node.name" cdkTreeNodeToggle>

src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.html

@@ -9,6 +9,7 @@
   <!-- This is the tree node template for expandable nodes -->
   <cdk-nested-tree-node #treeNode="cdkNestedTreeNode"
       cdkTreeNodeToggle
+      [cdkTreeNodeTypeaheadLabel]="node.name"
       *cdkTreeNodeDef="let node; when: hasChild"
       isExpandable
       class="example-tree-node">

src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.html

@@ -9,6 +9,7 @@
   <!-- This is the tree node template for expandable nodes -->
   <cdk-nested-tree-node #treeNode="cdkNestedTreeNode"
       cdkTreeNodeToggle
+      [cdkTreeNodeTypeaheadLabel]="node.name"
       *cdkTreeNodeDef="let node; when: hasChild"
       isExpandable
       class="example-tree-node">