From d451c182b1af08b3a2eaab560f05876d4d91b404 Mon Sep 17 00:00:00 2001
From: Zach Arend <zachzach@google.com>
Date: Thu, 21 Sep 2023 17:05:13 +0000
Subject: [PATCH] docs(material/tree): make "Load More" tree node a button

in the "Load More" tree demo, fix unable to press "Load More" button
when navigating onto it using arrow keys.
---
 .../tree-loadmore/tree-loadmore-example.css   | 20 +++++++++++++++++++
 .../tree-loadmore/tree-loadmore-example.html  |  9 ++++-----
 .../tree-loadmore/tree-loadmore-example.ts    | 15 ++++++++++----
 3 files changed, 35 insertions(+), 9 deletions(-)
 create mode 100644 src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.css

diff --git a/src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.css b/src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.css
new file mode 100644
index 000000000000..1e77d0b921eb
--- /dev/null
+++ b/src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.css
@@ -0,0 +1,20 @@
+.load-more {
+    border-radius: 10px;
+    padding-left: 15px;
+    padding-right: 15px;
+    cursor: pointer;
+}
+.load-more:focus {
+    /*
+      Display a focus state for the "Load More" button.
+      0.12 is a common value in Material Design
+    */
+    background: rgba(0, 0, 0, 0.12);
+}
+.load-more:hover {
+    /*
+      Display a focus state for the "Load More" button.
+      0.04 is a common value in Material Design
+    */
+    background: rgba(0, 0, 0, 0.04);
+}
\ No newline at end of file
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 66f87699aa61..04be55c3b6f8 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
@@ -18,10 +18,9 @@
     {{node.item}}
   </mat-tree-node>
 
-  <mat-tree-node *matTreeNodeDef="let node; when: isLoadMore" matTreeNodeToggle>
-    <button mat-button (click)="loadMore(node.loadMoreParentItem)"
-            (keydown)="loadMoreOnEnterOrSpace($event, node.loadMoreParentItem)">
-      Load more...
-    </button>
+  <mat-tree-node class="load-more" *matTreeNodeDef="let node; when: isLoadMore"
+    role="button" (click)="loadMoreOnClick($event, node)"
+    (keydown)="loadMoreOnEnterOrSpace($event, node)">
+    Load more...
   </mat-tree-node>
 </mat-tree>
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 63fc9af307fc..e552e659ac63 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
@@ -101,6 +101,7 @@ export class LoadmoreDatabase {
 @Component({
   selector: 'tree-loadmore-example',
   templateUrl: 'tree-loadmore-example.html',
+  styleUrl: 'tree-loadmore-example.css',
   providers: [LoadmoreDatabase],
   standalone: true,
   imports: [MatTreeModule, MatButtonModule, MatIconModule],
@@ -159,12 +160,18 @@ export class TreeLoadmoreExample {
   isLoadMore = (_: number, _nodeData: LoadmoreFlatNode) => _nodeData.item === LOAD_MORE;
 
   /** Load more nodes from data source */
-  loadMore(item: string) {
-    this._database.loadMore(item);
+  loadMoreOnClick(event: MouseEvent, node: LoadmoreFlatNode) {
+    if (node.loadMoreParentItem) {
+      // TODO: set focus to an appropriate location
+      this._database.loadMore(node.loadMoreParentItem);
+    }
   }
 
-  loadMoreOnEnterOrSpace(event: KeyboardEvent, item: string) {
-    if (event.keyCode === ENTER || event.keyCode === SPACE) {
+  loadMoreOnEnterOrSpace(event: KeyboardEvent, node: LoadmoreFlatNode) {
+    const item = node.loadMoreParentItem;
+
+    if (item && (event.keyCode === ENTER || event.keyCode === SPACE)) {
+      // TODO: set focus to an appropriate location
       this._database.loadMore(item);
 
       // Prevent default behavior so that the tree node doesn't handle the keypress instead of this