fix(cdk/tree): CdkTreeNodeToggle responds to Enter and Space keys

Implement keydown event for CdkTreeNodeToggle to perform that same
action as click when receiving Enter or Space. Update examples to
expand/collapse nodes when pressing enter.

Fix a11y issue in demos where pressing Enter when focused on a tree node
seems to not perform any action. Use CdkTreeNodeToggle to perform the
action of expanding or collaping the node.

Align with instructions in [APG Tree View
Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/):

"Enter: activates a node, i.e., performs its default action. For parent
nodes, one possible default action is to open or close the node. In
single-select trees where selection does not follow focus (see note
below), the default action is typically to select the focused node."

Author: zarend

src/cdk/tree/BUILD.bazel

@@ -35,6 +35,8 @@ ng_test_library(
         ":tree",
         "//src/cdk/bidi",
         "//src/cdk/collections",
+        "//src/cdk/keycodes",
+        "//src/cdk/testing/testbed",
         "@npm//rxjs",
     ],
 )

src/cdk/tree/toggle.ts

@@ -8,16 +8,21 @@
 
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Directive, Input} from '@angular/core';
+import {ENTER, SPACE} from '@angular/cdk/keycodes';
 
 import {CdkTree, CdkTreeNode} from './tree';
 
 /**
  * Node toggle to expand/collapse the node.
+ *
+ * CdkTreeNodeToggle is intended only to be used on native button elements, elements with button role,
+ * or elements with treeitem role.
  */
 @Directive({
   selector: '[cdkTreeNodeToggle]',
   host: {
     '(click)': '_toggle($event)',
+    '(keydown)': '_toggleOnEnterOrSpace($event)',
     'tabindex': '-1',
   },
 })
@@ -41,4 +46,11 @@ export class CdkTreeNodeToggle<T, K = T> {
 
     event.stopPropagation();
   }
+
+  _toggleOnEnterOrSpace(event: KeyboardEvent) {
+    if (event.keyCode === ENTER || event.keyCode === SPACE) {
+      this._toggle(event);
+      event.preventDefault();
+    }
+  }
 }

src/cdk/tree/tree-redesign.spec.ts

@@ -16,14 +16,14 @@ import {
   ViewChildren,
   QueryList,
 } from '@angular/core';
-
 import {CollectionViewer, DataSource} from '@angular/cdk/collections';
 import {Directionality, Direction} from '@angular/cdk/bidi';
 import {combineLatest, BehaviorSubject, Observable} 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 {ENTER} from '@angular/cdk/keycodes';
 
 /**
  * This is a cloned version of `tree.spec.ts` that contains all the same tests,
@@ -293,7 +293,9 @@ describe('CdkTree redesign', () => {
           [_, `${data[3].pizzaTopping} - ${data[3].pizzaCheese} + ${data[3].pizzaBase}`],
         );
 
-        (getNodes(treeElement)[2] as HTMLElement).click();
+        (getNodes(treeElement)[2] as HTMLElement)!.dispatchEvent(
+          createKeyboardEvent('keydown', ENTER),
+        );
         fixture.detectChanges();
 
         const expandedNodes = getExpandedNodes(

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

@@ -10,6 +10,7 @@
   </cdk-tree-node>
   <!-- This is the tree node template for expandable nodes -->
   <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
+                 cdkTreeNodeToggle
                  [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

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

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

@@ -6,6 +6,7 @@
   </cdk-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
   <cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasChild"
+                        cdkTreeNodeToggle
                         [isExpandable]="node.expandable"
                         [isDisabled]="!shouldRender(node)"
                         class="example-tree-node example-expandable">

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

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

src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.html

@@ -3,7 +3,7 @@
     <button mat-icon-button disabled></button>
     {{node.item}}
   </mat-tree-node>
-  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
+  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding matTreeNodeToggle>
     <button mat-icon-button
             [attr.aria-label]="'Toggle ' + node.item" matTreeNodeToggle>
       <mat-icon class="mat-icon-rtl-mirror">

src/components-examples/material/tree/tree-flat-overview/tree-flat-overview-example.html

@@ -6,7 +6,7 @@
     {{node.name}}
   </mat-tree-node>
   <!-- This is the tree node template for expandable nodes -->
-  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
+  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding matTreeNodeToggle>
     <button mat-icon-button matTreeNodeToggle
             [attr.aria-label]="'Toggle ' + node.name">
       <mat-icon class="mat-icon-rtl-mirror">

src/components-examples/material/tree/tree-harness/tree-harness-example.html

@@ -6,7 +6,7 @@
     {{node.name}}
   </mat-tree-node>
   <!-- This is the tree node template for expandable nodes -->
-  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
+  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding matTreeNodeToggle>
     <button mat-icon-button matTreeNodeToggle
             [attr.aria-label]="'Toggle ' + node.name">
       <mat-icon class="mat-icon-rtl-mirror">

src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.html

@@ -6,7 +6,7 @@
   </mat-tree-node>
 
   <!-- expandable node -->
-  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
+  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding matTreeNodeToggle>
     <button mat-icon-button
             [attr.aria-label]="'Toggle ' + node.item"
             (click)="loadChildren(node)"
@@ -18,7 +18,7 @@
     {{node.item}}
   </mat-tree-node>
 
-  <mat-tree-node *matTreeNodeDef="let node; when: isLoadMore">
+  <mat-tree-node *matTreeNodeDef="let node; when: isLoadMore" matTreeNodeToggle>
     <button mat-button (click)="loadMore(node.loadMoreParentItem)">
       Load more...
     </button>

src/components-examples/material/tree/tree-nested-overview/tree-nested-overview-example.html

@@ -2,12 +2,13 @@
   <!-- This is the tree node template for leaf nodes -->
   <!-- There is inline padding applied to this node using styles.
     This padding value depends on the mat-icon-button width. -->
-  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
+  <mat-tree-node *matTreeNodeDef="let node">
     {{node.name}}
   </mat-tree-node>
   <!-- This is the tree node template for expandable nodes -->
   <mat-nested-tree-node
       *matTreeNodeDef="let node; when: hasChild"
+      matTreeNodeToggle
       isExpandable>
     <div class="mat-tree-node">
       <button mat-icon-button matTreeNodeToggle

tools/public_api_guard/cdk/tree.md

@@ -274,6 +274,8 @@ export class CdkTreeNodeToggle<T, K = T> {
     // (undocumented)
     _toggle(event: Event): void;
     // (undocumented)
+    _toggleOnEnterOrSpace(event: KeyboardEvent): void;
+    // (undocumented)
     protected _tree: CdkTree<T, K>;
     // (undocumented)
     protected _treeNode: CdkTreeNode<T, K>;