feat(tree): Use tabindex for tree node

Author: tinayuangao

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/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/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 = parseInt(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 = parseInt(tabIndex) || 0;
+  }
 }