feat(tree): improve a11y of the tree nodes, and a11y in mat-tree demo (#9312)

Author: tinayuangao

src/cdk/tree/nested-node.ts

@@ -40,6 +40,7 @@ import {CdkTreeNode} from './node';
   selector: 'cdk-nested-tree-node',
   exportAs: 'cdkNestedTreeNode',
   host: {
+    '[attr.aria-expanded]': 'isExpanded',
     '[attr.role]': 'role',
     'class': 'cdk-tree-node cdk-nested-tree-node',
   },

src/cdk/tree/node.ts

@@ -67,6 +67,8 @@ export class CdkTreeNodeDef<T> {
   selector: 'cdk-tree-node',
   exportAs: 'cdkTreeNode',
   host: {
+    '[attr.aria-expanded]': 'isExpanded',
+    '[attr.aria-level]': 'level',
     '[attr.role]': 'role',
     'class': 'cdk-tree-node',
   },
@@ -89,6 +91,14 @@ export class CdkTreeNode<T>  implements FocusableOption, OnDestroy {
   }
   protected _data: T;
 
+  get isExpanded(): boolean {
+    return this._tree.treeControl.isExpanded(this._data);
+  }
+
+  get level(): number {
+    return this._tree.treeControl.getLevel ? this._tree.treeControl.getLevel(this._data) : 0;
+  }
+
   /**
    * The role of the node should be 'group' if it's an internal node,
    * and 'treeitem' if it's a leaf node.

src/cdk/tree/tree.spec.ts

@@ -474,7 +474,7 @@ class FakeDataSource extends DataSource<TestData> {
   connect(collectionViewer: CollectionViewer): Observable<TestData[]> {
     this.isConnected = true;
     const streams = [this._dataChange, collectionViewer.viewChange];
-    return combineLatest<TestData[]>(streams)
+    return combineLatest<[TestData[]]>(streams)
       .pipe(map(([data]) => {
         this.treeControl.dataNodes = data;
         return data;

src/cdk/tree/trigger.ts

@@ -28,10 +28,10 @@ export class CdkTreeNodeTrigger<T> {
   @Input('cdkTreeNodeTriggerRecursive')
   get recursive(): boolean { return this._recursive; }
   set recursive(value: boolean) { this._recursive = coerceBooleanProperty(value); }
-  private _recursive = true;
+  protected _recursive = true;
 
-  constructor(private _tree: CdkTree<T>,
-              private _treeNode: CdkTreeNode<T>) {}
+  constructor(protected _tree: CdkTree<T>,
+              protected _treeNode: CdkTreeNode<T>) {}
 
   _trigger(event: Event): void {
     this.recursive

src/demo-app/tree/tree-demo.html

@@ -8,9 +8,12 @@
       </mat-tree-node>
 
       <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
-          <mat-icon matTreeNodeTrigger>
-            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
-          </mat-icon>
+          <button mat-icon-button matTreeNodeTrigger
+                  [attr.aria-label]="'toggle ' + node.key">
+            <mat-icon>
+              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+            </mat-icon>
+          </button>
           {{node.key}} : {{node.value}}
       </mat-tree-node>
     </mat-tree>
@@ -23,18 +26,21 @@
     <mat-card-header>Nested tree</mat-card-header>
 
     <mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
-      <mat-tree-node *matTreeNodeDef="let node" role="treeitem" matTreeNodeTrigger>
+      <mat-tree-node *matTreeNodeDef="let node" matTreeNodeTrigger>
         <li>
           <div>{{node.key}}:  {{node.value}}</div>
         </li>
       </mat-tree-node>
 
-      <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild" role="group">
+      <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
         <li>
           <div class="mat-tree-node">
-            <mat-icon matTreeNodeTrigger>
-              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
-            </mat-icon>
+            <button mat-icon-button matTreeNodeTrigger
+                    [attr.aria-label]="'toggle ' + node.key">
+              <mat-icon>
+                {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+              </mat-icon>
+            </button>
             {{node.key}}
           </div>
           <ul [class]="nestedTreeControl.isExpanded(node) ? '' : 'tree-demo-invisible'">

src/lib/tree/node.ts

@@ -35,6 +35,8 @@ export const _MatNestedTreeNodeMixinBase = mixinTabIndex(mixinDisabled(CdkNested
   exportAs: 'matTreeNode',
   inputs: ['disabled', 'tabIndex'],
   host: {
+    '[attr.aria-expanded]': 'isExpanded',
+    '[attr.aria-level]': 'level',
     '[attr.role]': 'role',
     'class': 'mat-tree-node'
   },
@@ -73,6 +75,7 @@ export class MatTreeNodeDef<T> extends CdkTreeNodeDef<T> {
   selector: 'mat-nested-tree-node',
   exportAs: 'matNestedTreeNode',
   host: {
+    '[attr.aria-expanded]': 'isExpanded',
     '[attr.role]': 'role',
     'class': 'mat-nested-tree-node',
   },

src/lib/tree/tree.spec.ts

@@ -127,7 +127,7 @@ class FakeDataSource extends DataSource<TestData> {
   connect(collectionViewer: CollectionViewer): Observable<TestData[]> {
     this.isConnected = true;
     const streams = [this._dataChange, collectionViewer.viewChange];
-    return combineLatest<TestData[]>(streams).pipe(map(([data]) => data));
+    return combineLatest<[TestData[]]>(streams).pipe(map(([data]) => data));
   }
 
   disconnect() {

src/lib/tree/tree.ts

@@ -21,8 +21,6 @@ import {MatTreeNodeOutlet} from './outlet';
   host: {
     'class': 'mat-tree',
     'role': 'tree',
-    '(focus)': 'focus()',
-    '(keydown)': 'handleKeydown($event)'
   },
   styleUrls: ['tree.css'],
   encapsulation: ViewEncapsulation.None,