feat(tree): Use tabindex for tree node (#9042)

Author: tinayuangao

src/cdk/tree/control/flat-tree-control.ts

@@ -29,10 +29,10 @@ export class FlatTreeControl<T> extends BaseTreeControl<T> {
 
     // Goes through flattened tree nodes in the `dataNodes` array, and get all descendants.
     // The level of descendants of a tree node must be greater than the level of the given
-    // tree node. 
+    // tree node.
     // If we reach a node whose level is equal to the level of the tree node, we hit a sibling.
-    // If we reach a node whose level is greater than the level of the tree node, we hit a 
-    // sibling of an ancestor. 
+    // If we reach a node whose level is greater than the level of the tree node, we hit a
+    // sibling of an ancestor.
     for (let i = startIndex + 1;
         i < this.dataNodes.length && this.getLevel(dataNode) < this.getLevel(this.dataNodes[i]);
         i++) {

src/cdk/tree/nested-node.ts

@@ -42,7 +42,6 @@ import {CdkTreeNode} from './node';
   host: {
     '[attr.role]': 'role',
     'class': 'cdk-tree-node cdk-nested-tree-node',
-    'tabindex': '0',
   },
   providers: [{provide: CdkTreeNode, useExisting: CdkNestedTreeNode}]
 })

src/cdk/tree/tree.spec.ts

@@ -1,4 +1,11 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {Component, ViewChild} from '@angular/core';
 
 import {CollectionViewer, DataSource} from '@angular/cdk/collections';
@@ -269,7 +276,7 @@ describe('CdkTree', () => {
           [`topping_1 - cheese_1 + base_1`],
           [`topping_2 - cheese_2 + base_2`],
           [_, `topping_4 - cheese_4 + base_4`],
-          [`topping_3 - cheese_3 + base_3`])
+          [`topping_3 - cheese_3 + base_3`]);
       });
 
       it('with nested child data', () => {
@@ -427,7 +434,7 @@ describe('CdkTree', () => {
           [`topping_2 - cheese_2 + base_2`],
           [`topping_3 - cheese_3 + base_3`]);
       });
-    })
+    });
   });
 });
 

src/cdk/tree/tree.ts

@@ -139,7 +139,7 @@ export class CdkTree<T> implements CollectionViewer, OnInit, OnDestroy {
    * clearing the node outlet. Otherwise start listening for new data.
    */
   private _switchDataSource(dataSource: DataSource<T>) {
-    this._data = new Array<T>();;
+    this._data = new Array<T>();
 
     if (this.dataSource) {
       this.dataSource.disconnect(this);

src/demo-app/demo-app/demo-module.ts

@@ -126,7 +126,6 @@ import {TableDemoModule} from '../table/table-demo-module';
   ],
   providers: [
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer},
-    PeopleDatabase,
     JsonDatabase
   ],
   entryComponents: [

src/demo-app/tree/json-database.ts

@@ -15,7 +15,7 @@ export class JsonNode {
   value: any;
 }
 
-const TREE_DATA = `{"Tina": 
+const TREE_DATA = `{"Tina":
   {
     "Documents": {
       "angular": {
@@ -37,7 +37,7 @@ const TREE_DATA = `{"Tina":
         "November": "pdf",
         "October": "pdf"
     },
-    "Pictures": { 
+    "Pictures": {
         "Sun": "png",
         "Woods": "jpg",
         "Photo Booth Library": {
@@ -50,8 +50,7 @@ const TREE_DATA = `{"Tina":
         "Calendar": "app",
         "Webstorm": "app"
     }
-}}    
-`;
+}}`;
 
 @Injectable()
 export class JsonDatabase {
@@ -86,5 +85,4 @@ export class JsonDatabase {
     }
     return data;
   }
-
 }

src/demo-app/tree/tree-demo.scss

@@ -4,8 +4,8 @@
   }
 
   ul, li {
-    -webkit-margin-before: 0px;
-    -webkit-margin-after: 0px;
+    -webkit-margin-before: 0;
+    -webkit-margin-after: 0;
     list-style-type: none;
   }
 

src/demo-app/tree/tree-demo.ts

@@ -44,13 +44,13 @@ export class TreeDemo {
     this.nestedDataSource = new JsonNestedDataSource(database);
   }
 
-  getLevel = (node: JsonFlatNode) => { return node.level };
+  getLevel = (node: JsonFlatNode) => { return node.level; };
 
-  isExpandable = (node: JsonFlatNode) => { return node.expandable; }
+  isExpandable = (node: JsonFlatNode) => { return node.expandable; };
 
-  getChildren = (node: JsonNode) => { return ofObservable(node.children); }
+  getChildren = (node: JsonNode) => { return ofObservable(node.children); };
 
-  hasChild = (_: number, _nodeData: JsonFlatNode) => { return _nodeData.expandable; }
+  hasChild = (_: number, _nodeData: JsonFlatNode) => { return _nodeData.expandable; };
 
-  hasNestedChild = (_: number, nodeData: JsonNode) => {return !(nodeData.value); }
+  hasNestedChild = (_: number, nodeData: JsonNode) => {return !(nodeData.value); };
 }

src/lib/tree/node.ts

@@ -7,34 +7,49 @@
  */
 
 import {
+  Attribute,
   ContentChildren,
   Directive,
+  ElementRef,
   Input,
   QueryList
 } from '@angular/core';
 import {
   CdkNestedTreeNode,
+  CdkTree,
   CdkTreeNodeDef,
   CdkTreeNode,
 } from '@angular/cdk/tree';
 import {MatTreeNodeOutlet} from './outlet';
+import {mixinTabIndex, mixinDisabled, CanDisable, HasTabIndex} from '@angular/material/core';
+
+
+export const _MatTreeNodeMixinBase = mixinTabIndex(mixinDisabled(CdkTreeNode));
+export const _MatNestedTreeNodeMixinBase = mixinTabIndex(mixinDisabled(CdkNestedTreeNode));
 
 /**
  * Wrapper for the CdkTree node with Material design styles.
  */
-// TODO(tinayuangao): use mixinTabIndex
 @Directive({
   selector: 'mat-tree-node',
   exportAs: 'matTreeNode',
+  inputs: ['disabled', 'tabIndex'],
   host: {
     '[attr.role]': 'role',
-    'class': 'mat-tree-node',
-    'tabindex': '0',
+    'class': 'mat-tree-node'
   },
   providers: [{provide: CdkTreeNode, useExisting: MatTreeNode}]
 })
-export class MatTreeNode<T> extends CdkTreeNode<T> {
+export class MatTreeNode<T> extends _MatTreeNodeMixinBase<T> implements HasTabIndex, CanDisable {
   @Input() role: 'treeitem' | 'group' = 'treeitem';
+
+  constructor(protected _elementRef: ElementRef,
+              protected _tree: CdkTree<T>,
+              @Attribute('tabindex') tabIndex: string) {
+    super(_elementRef, _tree);
+
+    this.tabIndex = Number(tabIndex) || 0;
+  }
 }
 
 /**
@@ -61,13 +76,24 @@ export class MatTreeNodeDef<T> extends CdkTreeNodeDef<T> {
     '[attr.role]': 'role',
     'class': 'mat-nested-tree-node',
   },
+  inputs: ['disabled', 'tabIndex'],
   providers: [
     {provide: CdkNestedTreeNode, useExisting: MatNestedTreeNode},
     {provide: CdkTreeNode, useExisting: MatNestedTreeNode}
   ]
 })
-export class MatNestedTreeNode<T> extends CdkNestedTreeNode<T> {
+export class MatNestedTreeNode<T> extends _MatNestedTreeNodeMixinBase<T>
+    implements HasTabIndex, CanDisable {
+
   @Input('matNestedTreeNode') node: T;
 
   @ContentChildren(MatTreeNodeOutlet) nodeOutlet: QueryList<MatTreeNodeOutlet>;
+
+  constructor(protected _elementRef: ElementRef,
+              protected _tree: CdkTree<T>,
+              @Attribute('tabindex') tabIndex: string) {
+    super(_elementRef, _tree);
+
+    this.tabIndex = Number(tabIndex) || 0;
+  }
 }