From 10750e6dc68607b8c5d510ed8454e702947fdb7a Mon Sep 17 00:00:00 2001
From: Zach Arend <zachzach@google.com>
Date: Fri, 11 Aug 2023 23:51:46 +0000
Subject: [PATCH] docs(material/tree): fix keyboard issues with "Load more flat
 tree"

Fix keyboard navigation issues with the "Load more flat tree" demo.

 - "Load more" button will respond to Enter or Space keys
 - Expanding and collapsing using keyboard shortcuts will trigger
   loading.
---
 .../tree/tree-loadmore/tree-loadmore-example.html     |  7 ++++---
 .../tree/tree-loadmore/tree-loadmore-example.ts       | 11 +++++++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.html b/src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.html
index caf476e251ea..66f87699aa61 100644
--- a/src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.html
+++ b/src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.html
@@ -6,10 +6,10 @@
   </mat-tree-node>
 
   <!-- expandable node -->
-  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding matTreeNodeToggle>
+  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding matTreeNodeToggle
+                 (expandedChange)="loadChildren(node)">
     <button mat-icon-button
             [attr.aria-label]="'Toggle ' + node.item"
-            (click)="loadChildren(node)"
             matTreeNodeToggle>
       <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
@@ -19,7 +19,8 @@
   </mat-tree-node>
 
   <mat-tree-node *matTreeNodeDef="let node; when: isLoadMore" matTreeNodeToggle>
-    <button mat-button (click)="loadMore(node.loadMoreParentItem)">
+    <button mat-button (click)="loadMore(node.loadMoreParentItem)"
+            (keydown)="loadMoreOnEnterOrSpace($event, node.loadMoreParentItem)">
       Load more...
     </button>
   </mat-tree-node>
diff --git a/src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.ts b/src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.ts
index c04e28a8e5b1..63fc9af307fc 100644
--- a/src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.ts
+++ b/src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.ts
@@ -11,6 +11,7 @@ import {MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule} from '@angular/m
 import {BehaviorSubject, Observable} from 'rxjs';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
+import {ENTER, SPACE} from '@angular/cdk/keycodes';
 
 const LOAD_MORE = 'LOAD_MORE';
 
@@ -162,6 +163,16 @@ export class TreeLoadmoreExample {
     this._database.loadMore(item);
   }
 
+  loadMoreOnEnterOrSpace(event: KeyboardEvent, item: string) {
+    if (event.keyCode === ENTER || event.keyCode === SPACE) {
+      this._database.loadMore(item);
+
+      // Prevent default behavior so that the tree node doesn't handle the keypress instead of this
+      // button.
+      event.preventDefault();
+    }
+  }
+
   loadChildren(node: LoadmoreFlatNode) {
     this._database.loadMore(node.item, true);
   }