comments explaining super life hook calls, add aria-expanded with setAttribute

Author: annieyw

src/cdk/tree/nested-node.ts

@@ -59,15 +59,11 @@ export class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContent
               protected _differs: IterableDiffers) {
     super(_elementRef, _tree);
     // The classes are directly added here instead of in the host property because classes on
-    // the host property are not inherited with View Engine.
-    this._elementRef.nativeElement.classList.add('cdk-tree-node');
+    // the host property are not inherited with View Engine. It is not set as a @HostBinding because
+    // it is not set by the time it's children nodes try to read the class from it.
     this._elementRef.nativeElement.classList.add('cdk-nested-tree-node');
   }
 
-  ngOnInit() {
-    super.ngOnInit();
-  }
-
   ngAfterContentInit() {
     this._dataDiffer = this._differs.find([]).create(this._tree.trackBy);
     if (!this._tree.treeControl.getChildren && (typeof ngDevMode === 'undefined' || ngDevMode)) {
@@ -84,6 +80,12 @@ export class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContent
         .subscribe(() => this.updateChildrenNodes());
   }
 
+  // This is a workaround for https://github.com/angular/angular/issues/23091
+  // In aot mode, the lifecycle hooks from parent class are not called.// Life cycle hooks in
+  ngOnInit() {
+    super.ngOnInit();
+  }
+
   ngOnDestroy() {
     this._clear();
     super.ngOnDestroy();

src/cdk/tree/tree.spec.ts

@@ -129,6 +129,23 @@ describe('CdkTree', () => {
         expect(ariaLevels).toEqual(['2', '3', '2', '2']);
       });
 
+      it('with the right aria-expanded attrs', () => {
+        // add a child to the first node
+        let data = dataSource.data;
+        dataSource.addChild(data[2]);
+        fixture.detectChanges();
+        expect(getNodes(treeElement).every(node => {
+          return node.getAttribute('aria-expanded') === 'false';
+        })).toBe(true);
+
+        component.treeControl.expandAll();
+        fixture.detectChanges();
+
+        expect(getNodes(treeElement).every(node => {
+          return node.getAttribute('aria-expanded') === 'true';
+        })).toBe(true);
+      });
+
       it('with the right data', () => {
         expect(dataSource.data.length).toBe(3);
 
@@ -691,6 +708,24 @@ describe('CdkTree', () => {
         treeElement = fixture.nativeElement.querySelector('cdk-tree');
       });
 
+      it('with the right aria-expanded attrs', () => {
+        expect(getNodes(treeElement).every(node => {
+          return node.getAttribute('aria-expanded') === 'false';
+        })).toBe(true);
+
+        component.toggleRecursively = false;
+        let data = dataSource.data;
+        const child = dataSource.addChild(data[1], false);
+        dataSource.addChild(child, false);
+        fixture.detectChanges();
+
+        (getNodes(treeElement)[1] as HTMLElement).click();
+        fixture.detectChanges();
+
+        const ariaExpanded = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
+        expect(ariaExpanded).toEqual(['false', 'true', 'false', 'false']);
+      });
+
       it('should expand/collapse the node multiple times', () => {
         component.toggleRecursively = false;
         let data = dataSource.data;

src/cdk/tree/tree.ts

@@ -341,10 +341,15 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
   protected _data: T;
 
   // tslint:disable-next-line:no-host-decorator-in-concrete
-  @HostBinding('attr.aria-expanded') get isExpanded(): boolean {
+  @HostBinding('attr.aria-expanded')
+  get isExpanded(): boolean {
     return this._tree.treeControl.isExpanded(this._data);
   }
 
+  set isExpanded(_expanded: boolean) {
+    this._elementRef.nativeElement.setAttribute('aria-expanded', `${_expanded}`);
+  }
+
   get level(): number {
    // If the treeControl has a getLevel method, use it to get the level. Otherwise read the
    // aria-level off the parent node and use it as the level for this node (note aria-level is
@@ -357,8 +362,11 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
               protected _tree: CdkTree<T>) {
     CdkTreeNode.mostRecentTreeNode = this as CdkTreeNode<T>;
     // The classes are directly added here instead of in the host property because classes on
-    // the host property are not inherited with View Engine.
+    // the host property are not inherited with View Engine. It is not set as a @HostBinding because
+    // it is not set by the time it's children nodes try to read the class from it.
     this._elementRef.nativeElement.classList.add('cdk-tree-node');
+    this.role = 'treeitem';
+    this.isExpanded = this.isExpanded;
   }
 
   ngOnInit(): void {

src/material/tree/node.ts

@@ -56,10 +56,13 @@ export class MatTreeNode<T> extends _MatTreeNodeMixinBase<T>
 
     this.tabIndex = Number(tabIndex) || 0;
     // The classes are directly added here instead of in the host property because classes on
-    // the host property are not inherited with View Engine.
+    // the host property are not inherited with View Engine. It is not set as a @HostBinding because
+    // it is not set by the time it's children nodes try to read the class from it.
     this._elementRef.nativeElement.classList.add('mat-tree-node');
   }
 
+  // This is a workaround for https://github.com/angular/angular/issues/23091
+  // In aot mode, the lifecycle hooks from parent class are not called.
   ngOnInit() {
     super.ngOnInit();
   }
@@ -124,7 +127,8 @@ export class MatNestedTreeNode<T> extends CdkNestedTreeNode<T> implements AfterC
     super(_elementRef, _tree, _differs);
     this.tabIndex = Number(tabIndex) || 0;
     // The classes are directly added here instead of in the host property because classes on
-    // the host property are not inherited with View Engine.
+    // the host property are not inherited with View Engine. It is not set as a @HostBinding because
+    // it is not set by the time it's children nodes try to read the class from it.
     this._elementRef.nativeElement.classList.add('mat-nested-tree-node');
   }
 

src/material/tree/tree.spec.ts

@@ -75,6 +75,23 @@ describe('MatTree', () => {
         expect(ariaLevels).toEqual(['1', '1', '1', '2']);
       });
 
+      it('with the right aria-expanded attrs', () => {
+        // add a child to the first node
+        let data = underlyingDataSource.data;
+        underlyingDataSource.addChild(data[2]);
+        fixture.detectChanges();
+        expect(getNodes(treeElement).every(node => {
+          return node.getAttribute('aria-expanded') === 'false';
+        })).toBe(true);
+
+        component.treeControl.expandAll();
+        fixture.detectChanges();
+
+        expect(getNodes(treeElement).every(node => {
+          return node.getAttribute('aria-expanded') === 'true';
+        })).toBe(true);
+      });
+
       it('with the right data', () => {
         expect(underlyingDataSource.data.length).toBe(3);
 
@@ -404,6 +421,24 @@ describe('MatTree', () => {
         fixture.detectChanges();
       });
 
+      it('with the right aria-expanded attrs', () => {
+        expect(getNodes(treeElement).every(node => {
+          return node.getAttribute('aria-expanded') === 'false';
+        })).toBe(true);
+
+        component.toggleRecursively = false;
+        let data = underlyingDataSource.data;
+        const child = underlyingDataSource.addChild(data[1]);
+        underlyingDataSource.addChild(child);
+        fixture.detectChanges();
+
+        (getNodes(treeElement)[1] as HTMLElement).click();
+        fixture.detectChanges();
+
+        const ariaExpanded = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
+        expect(ariaExpanded).toEqual(['false', 'true', 'false', 'false']);
+      });
+
       it('should expand/collapse the node', () => {
         component.toggleRecursively = false;
         let data = underlyingDataSource.data;