fix tslint comments, fix class inheritance for mat tree

Author: annieyw

src/cdk/tree/nested-node.ts

@@ -41,6 +41,7 @@ export class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContent
   // tslint:disable:no-host-decorator-in-concrete
   @HostBinding('attr.aria-expanded') _expanded = this.isExpanded;
   @HostBinding('attr.role') _role = this.role;
+  // tslint:enable:no-host-decorator-in-concrete
 
   /** Differ used to find the changes in the data provided by the data source. */
   private _dataDiffer: IterableDiffer<T>;

src/cdk/tree/tree.spec.ts

@@ -596,7 +596,7 @@ describe('CdkTree', () => {
             [`topping_3 - cheese_3 + base_3`]);
       });
 
-      it('with correct aria-level', () => {
+      it('with correct aria-level on nodes', () => {
         expect(getNodes(treeElement).every(node => {
           return node.getAttribute('aria-level') === '1';
         })).toBe(true);

src/cdk/tree/tree.ts

@@ -17,6 +17,7 @@ import {
   ElementRef,
   HostBinding,
   Input,
+  isDevMode,
   IterableChangeRecord,
   IterableDiffer,
   IterableDiffers,
@@ -56,6 +57,10 @@ import {
   selector: 'cdk-tree',
   exportAs: 'cdkTree',
   template: `<ng-container cdkTreeNodeOutlet></ng-container>`,
+  host: {
+    'class': 'cdk-tree',
+    'role': 'tree',
+  },
   encapsulation: ViewEncapsulation.None,
 
   // The "OnPush" status for the `CdkTree` component is effectively a noop, so we are removing it.
@@ -65,9 +70,6 @@ import {
   changeDetection: ChangeDetectionStrategy.Default
 })
 export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
-  // tslint:disable:no-host-decorator-in-concrete
-  @HostBinding('attr.role') _role = 'tree';
-
   /** Subject that emits when the component has been destroyed. */
   private _onDestroy = new Subject<void>();
 
@@ -128,10 +130,7 @@ export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDest
     new BehaviorSubject<{start: number, end: number}>({start: 0, end: Number.MAX_VALUE});
 
   constructor(private _differs: IterableDiffers,
-              private _changeDetectorRef: ChangeDetectorRef,
-              private _elementRef: ElementRef<HTMLElement>) {
-    this._elementRef.nativeElement.classList.add('cdk-tree');
-  }
+              private _changeDetectorRef: ChangeDetectorRef) {}
 
   ngOnInit() {
     this._dataDiffer = this._differs.find([]).create(this.trackBy);
@@ -302,12 +301,13 @@ export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDest
   exportAs: 'cdkTreeNode',
 })
 export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
+  // TODO: mark as deprecated
+  // tslint:disable:no-host-decorator-in-concrete
   /**
-   * The role of the node should always be 'treeitem'.
+   * The role of the tree node.
    */
-   // TODO: mark as deprecated
-   // tslint:disable:no-host-decorator-in-concrete
   @HostBinding('attr.role') @Input() role: 'treeitem' | 'group' = 'treeitem';
+  // tslint:enable:no-host-decorator-in-concrete
 
   /**
    * The most recently created `CdkTreeNode`. We save it in static variable so we can retrieve it
@@ -334,7 +334,7 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
   }
   protected _data: T;
 
-  // tslint:disable:no-host-decorator-in-concrete
+  // tslint:disable-next-line:no-host-decorator-in-concrete
   @HostBinding('attr.aria-expanded') get isExpanded(): boolean {
     return this._tree.treeControl.isExpanded(this._data);
   }
@@ -354,7 +354,7 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
   }
 
   ngOnInit(): void {
-    this._parentNodeAriaLevel = this._getParentNodeAriaLevel();
+    this._parentNodeAriaLevel = getParentNodeAriaLevel(this._elementRef.nativeElement);
     this._elementRef.nativeElement.setAttribute('aria-level', String(this.level + 1));
   }
 
@@ -382,20 +382,29 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
     }
     this.role = 'treeitem';
   }
+}
 
-  private _getParentNodeAriaLevel(): number {
-    let parent = this._elementRef.nativeElement.parentElement;
-    while (parent &&
-    !(parent.classList.contains('cdk-nested-tree-node') || parent.classList.contains('cdk-tree'))) {
-      parent = parent.parentElement;
-    }
-    if (!parent) {
+function getParentNodeAriaLevel(nodeElement: HTMLElement): number {
+  debugger;
+  let parent = nodeElement.parentElement;
+  while (parent && isNodeElement(parent)) {
+    parent = parent.parentElement;
+  }
+  if (!parent) {
+    if (isDevMode()) {
       throw Error('Incorrect tree structure containing detached node.');
-    } else if (parent.classList.contains('cdk-nested-tree-node')) {
-      return parseInt(parent.getAttribute('aria-level')!);
     } else {
-      // parent.classList.contains('cdk-tree')
-      return 0;
+      return -1;
     }
+  } else if (parent.classList.contains('cdk-nested-tree-node')) {
+    return Number(parent.getAttribute('aria-level')!);
+  } else {
+    // The ancestor element is the cdk-tree itself
+    return 0;
   }
 }
+
+function isNodeElement(element: HTMLElement) {
+  const classList = element?.classList;
+  return !(classList?.contains('cdk-nested-tree-node') || classList?.contains('cdk-tree'));
+}

src/material/tree/tree.spec.ts

@@ -350,7 +350,7 @@ describe('MatTree', () => {
           [`topping_3 - cheese_3 + base_3`]);
       });
 
-      it('with correct aria-level', () => {
+      it('with correct aria-level on nodes', () => {
         expect(getNodes(treeElement).every(node => {
           return node.getAttribute('aria-level') === '1';
         })).toBe(true);

src/material/tree/tree.ts

@@ -9,10 +9,7 @@
 import {CdkTree} from '@angular/cdk/tree';
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
-  ElementRef,
-  IterableDiffers,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
@@ -26,6 +23,13 @@ import {MatTreeNodeOutlet} from './outlet';
   exportAs: 'matTree',
   template: `<ng-container matTreeNodeOutlet></ng-container>`,
   host: {
+    // The 'cdk-tree' class needs to be included here because classes set in the host in the
+    // parent class are not inherited with View Engine. The 'cdk-tree' class in CdkTreeNode has
+    // to be set in the host because:
+    // if it is set as a @HostBinding it is not set by the time the tree nodes try to read the
+    // class from it.
+    // the ElementRef is not available in the constructor so the class can't be applied directly.
+    'class': 'mat-tree cdk-tree',
     'role': 'tree',
   },
   styleUrls: ['tree.css'],
@@ -38,11 +42,4 @@ import {MatTreeNodeOutlet} from './outlet';
 export class MatTree<T> extends CdkTree<T> {
   // Outlets within the tree's template where the dataNodes will be inserted.
   @ViewChild(MatTreeNodeOutlet, {static: true}) _nodeOutlet: MatTreeNodeOutlet;
-
-  constructor(_differs: IterableDiffers,
-              _changeDetectorRef: ChangeDetectorRef,
-              _elementRef: ElementRef<HTMLElement>) {
-    super(_differs, _changeDetectorRef, _elementRef);
-    _elementRef.nativeElement.classList.add('mat-tree');
-  }
 }