fix(cdk/tree): fix level for flat and nested tree nodes

Author: annieyw

src/cdk/tree/tree.spec.ts

@@ -595,6 +595,21 @@ describe('CdkTree', () => {
             [_, _, `topping_6 - cheese_6 + base_6`],
             [`topping_3 - cheese_3 + base_3`]);
       });
+
+      it('with correct aria-level', () => {
+        expect(getNodes(treeElement).every(node => {
+          return node.getAttribute('aria-level') === '1';
+        })).toBe(true);
+
+        let data = dataSource.data;
+        const child = dataSource.addChild(data[1], false);
+        dataSource.addChild(child, false);
+        fixture.detectChanges();
+
+        const nodes = getNodes(treeElement);
+        const levels = nodes.map(n => n.getAttribute('aria-level'));
+        expect(levels).toEqual(['1', '1', '2', '3', '1']);
+      });
     });
 
     describe('with static children', () => {

src/cdk/tree/tree.ts

@@ -9,6 +9,7 @@ import {FocusableOption} from '@angular/cdk/a11y';
 import {CollectionViewer, DataSource, isDataSource} from '@angular/cdk/collections';
 import {
   AfterContentChecked,
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -299,12 +300,11 @@ export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDest
   exportAs: 'cdkTreeNode',
   host: {
     '[attr.aria-expanded]': 'isExpanded',
-    '[attr.aria-level]': 'level + 1',
     '[attr.role]': 'role',
     'class': 'cdk-tree-node',
   },
 })
-export class CdkTreeNode<T> implements FocusableOption, OnDestroy {
+export class CdkTreeNode<T> implements FocusableOption, OnDestroy, AfterViewInit {
   /**
    * The most recently created `CdkTreeNode`. We save it in static variable so we can retrieve it
    * in `CdkTree` and set the data to it.
@@ -333,8 +333,11 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy {
   }
 
   get level(): number {
-    return this._tree.treeControl.getLevel ? this._tree.treeControl.getLevel(this._data) : 0;
-  }
+   // Retrieve the aria-level of the parent node because level from treeControl is 0 indexed and
+   // aria-level is 1 indexed
+   return this._tree.treeControl.getLevel ?
+     this._tree.treeControl.getLevel(this._data) : this._parentNodeAriaLevel();
+   }
 
   /**
    * The role of the node should always be 'treeitem'.
@@ -347,6 +350,10 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy {
     CdkTreeNode.mostRecentTreeNode = this as CdkTreeNode<T>;
   }
 
+  ngAfterViewInit(): void {
+    this._elementRef.nativeElement.setAttribute('aria-level', String(this.level + 1));
+  }
+
   ngOnDestroy() {
     // If this is the last tree node being destroyed,
     // clear out the reference to avoid leaking memory.
@@ -371,4 +378,22 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy {
     }
     this.role = 'treeitem';
   }
+
+  private _parentNodeAriaLevel(): 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) {
+      throw Error('Incorrect tree structure containing detached node.');
+    }
+    if (parent.classList.contains('cdk-nested-tree-node')) {
+      return parseInt(parent.getAttribute('aria-level')!);
+    } else if (parent.classList.contains('cdk-tree')) {
+      return 0;
+    } else {
+      throw Error(`Incorrect tree structure containing ${parent.className}.`);
+    }
+  }
 }