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.
zarend · Aug 29, 2023 · 10750e6 · 10750e6
1 parent e65f49a
commit 10750e6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 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
@@ -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
@@ -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);
   }