Skip to content

Commit 0fe2e7d

Browse files
committed
set aria-expaded in ngDoCheck
1 parent efbb7b7 commit 0fe2e7d

File tree

3 files changed

+24
-8
lines changed

3 files changed

+24
-8
lines changed

src/cdk/tree/nested-node.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ export class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContent
6161
// The classes are directly added here instead of in the host property because classes on
6262
// the host property are not inherited with View Engine. It is not set as a @HostBinding because
6363
// it is not set by the time it's children nodes try to read the class from it.
64+
// TODO: move to host after View Engine deprecation
6465
this._elementRef.nativeElement.classList.add('cdk-nested-tree-node');
6566
}
6667

@@ -81,7 +82,7 @@ export class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContent
8182
}
8283

8384
// This is a workaround for https://github.com/angular/angular/issues/23091
84-
// In aot mode, the lifecycle hooks from parent class are not called.// Life cycle hooks in
85+
// In aot mode, the lifecycle hooks from parent class are not called.
8586
ngOnInit() {
8687
super.ngOnInit();
8788
}

src/cdk/tree/tree.ts

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,8 @@ import {
1313
ChangeDetectorRef,
1414
Component,
1515
ContentChildren,
16-
Directive,
16+
Directive, DoCheck,
1717
ElementRef,
18-
HostBinding,
1918
Input,
2019
IterableChangeRecord,
2120
IterableDiffer,
@@ -303,15 +302,17 @@ export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDest
303302
selector: 'cdk-tree-node',
304303
exportAs: 'cdkTreeNode',
305304
})
306-
export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
307-
// TODO: mark as deprecated
305+
export class CdkTreeNode<T> implements DoCheck, FocusableOption, OnDestroy, OnInit {
308306
/**
309307
* The role of the tree node.
308+
* @deprecated The correct role is 'treeitem', 'group' should not be used. This input will be
309+
* removed in a future version.
310+
* @breaking-change 12.0.0 Remove this input
310311
*/
311312
@Input() get role(): 'treeitem'|'group' { return 'treeitem'; }
312313

313314
set role(_role: 'treeitem'|'group') {
314-
// TODO: move to host
315+
// TODO: move to host after View Engine deprecation
315316
this._elementRef.nativeElement.setAttribute('role', _role);
316317
}
317318

@@ -340,16 +341,17 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
340341
}
341342
protected _data: T;
342343

343-
// tslint:disable-next-line:no-host-decorator-in-concrete
344-
@HostBinding('attr.aria-expanded')
345344
get isExpanded(): boolean {
346345
return this._tree.treeControl.isExpanded(this._data);
347346
}
348347

349348
set isExpanded(_expanded: boolean) {
349+
this._expanded = _expanded;
350350
this._elementRef.nativeElement.setAttribute('aria-expanded', `${_expanded}`);
351351
}
352352

353+
protected _expanded: boolean;
354+
353355
get level(): number {
354356
// If the treeControl has a getLevel method, use it to get the level. Otherwise read the
355357
// aria-level off the parent node and use it as the level for this node (note aria-level is
@@ -364,6 +366,7 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
364366
// The classes are directly added here instead of in the host property because classes on
365367
// the host property are not inherited with View Engine. It is not set as a @HostBinding because
366368
// it is not set by the time it's children nodes try to read the class from it.
369+
// TODO: move to host after View Engine deprecation
367370
this._elementRef.nativeElement.classList.add('cdk-tree-node');
368371
this.role = 'treeitem';
369372
this.isExpanded = this.isExpanded;
@@ -374,6 +377,16 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
374377
this._elementRef.nativeElement.setAttribute('aria-level', `${this.level + 1}`);
375378
}
376379

380+
ngDoCheck() {
381+
// aria-expanded is be set here because the expanded state is stored in the tree control and
382+
// the node isn't aware when the state is changed.
383+
// It is not set using a @HostBinding because they sometimes get lost with Mixin based classes.
384+
// TODO: move to host after View Engine deprecation
385+
if (this.isExpanded != this._expanded) {
386+
this.isExpanded = this.isExpanded;
387+
}
388+
}
389+
377390
ngOnDestroy() {
378391
// If this is the last tree node being destroyed,
379392
// clear out the reference to avoid leaking memory.

src/material/tree/node.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export class MatTreeNode<T> extends _MatTreeNodeMixinBase<T>
5858
// The classes are directly added here instead of in the host property because classes on
5959
// the host property are not inherited with View Engine. It is not set as a @HostBinding because
6060
// it is not set by the time it's children nodes try to read the class from it.
61+
// TODO: move to host after View Engine deprecation
6162
this._elementRef.nativeElement.classList.add('mat-tree-node');
6263
}
6364

@@ -129,6 +130,7 @@ export class MatNestedTreeNode<T> extends CdkNestedTreeNode<T> implements AfterC
129130
// The classes are directly added here instead of in the host property because classes on
130131
// the host property are not inherited with View Engine. It is not set as a @HostBinding because
131132
// it is not set by the time it's children nodes try to read the class from it.
133+
// TODO: move to host after View Engine deprecation
132134
this._elementRef.nativeElement.classList.add('mat-nested-tree-node');
133135
}
134136

0 commit comments

Comments
 (0)