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.

Author: zarend

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);
+}

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>

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