Skip to content

Commit

Permalink
fix(material/tree): aria-expanded attribute should not appear in the …
Browse files Browse the repository at this point in the history
…leaf node (#29273)

* fix(material/tree): fixed unit tests

fixed unit tests

Fixes #21922

* fix(material/tree): updated public api file

updated public api file

Fixes #21922
  • Loading branch information
DBowen33 authored Jul 3, 2024
1 parent 0519174 commit 1f992d0
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 33 deletions.
24 changes: 8 additions & 16 deletions src/cdk/tree/tree.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -145,20 +145,14 @@ describe('CdkTree', () => {
let data = dataSource.data;
dataSource.addChild(data[2]);
fixture.detectChanges();
expect(
getNodes(treeElement).every(node => {
return node.getAttribute('aria-expanded') === 'false';
}),
).toBe(true);
let ariaExpandedStates = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
expect(ariaExpandedStates).toEqual([null, null, 'false', null]);

component.treeControl.expandAll();
fixture.detectChanges();

expect(
getNodes(treeElement).every(node => {
return node.getAttribute('aria-expanded') === 'true';
}),
).toBe(true);
ariaExpandedStates = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
expect(ariaExpandedStates).toEqual([null, null, 'true', null]);
});

it('with the right data', () => {
Expand Down Expand Up @@ -805,11 +799,8 @@ describe('CdkTree', () => {
});

it('with the right aria-expanded attrs', () => {
expect(
getNodes(treeElement).every(node => {
return node.getAttribute('aria-expanded') === 'false';
}),
).toBe(true);
let ariaExpandedStates = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
expect(ariaExpandedStates).toEqual([null, null, null]);

component.toggleRecursively = false;
fixture.changeDetectorRef.markForCheck();
Expand All @@ -822,7 +813,7 @@ describe('CdkTree', () => {
fixture.detectChanges();

const ariaExpanded = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
expect(ariaExpanded).toEqual(['false', 'true', 'false', 'false']);
expect(ariaExpanded).toEqual([null, 'true', 'false', null]);
});

it('should expand/collapse the node multiple times', () => {
Expand Down Expand Up @@ -886,6 +877,7 @@ describe('CdkTree', () => {
});

it('should expand/collapse the node recursively', () => {
fixture.changeDetectorRef.markForCheck();
let data = dataSource.data;
const child = dataSource.addChild(data[1], false);
dataSource.addChild(child, false);
Expand Down
22 changes: 21 additions & 1 deletion src/cdk/tree/tree.ts
Original file line number Diff line number Diff line change
Expand Up @@ -324,7 +324,7 @@ export class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer,
exportAs: 'cdkTreeNode',
host: {
'class': 'cdk-tree-node',
'[attr.aria-expanded]': 'isExpanded',
'[attr.aria-expanded]': 'isLeafNode ? null : isExpanded',
},
standalone: true,
})
Expand Down Expand Up @@ -375,6 +375,26 @@ export class CdkTreeNode<T, K = T> implements FocusableOption, OnDestroy, OnInit
return this._tree.treeControl.isExpanded(this._data);
}

/* If leaf node, return true to not assign aria-expanded attribute */
get isLeafNode(): boolean {
// If flat tree node data returns false for expandable property, it's a leaf node
if (
this._tree.treeControl.isExpandable !== undefined &&
!this._tree.treeControl.isExpandable(this._data)
) {
return true;

// If nested tree node data returns 0 descendants, it's a leaf node
} else if (
this._tree.treeControl.isExpandable === undefined &&
this._tree.treeControl.getDescendants(this._data).length === 0
) {
return true;
}

return false;
}

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
Expand Down
23 changes: 7 additions & 16 deletions src/material/tree/tree.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -78,20 +78,14 @@ describe('MatTree', () => {
const data = underlyingDataSource.data;
underlyingDataSource.addChild(data[2]);
fixture.detectChanges();
expect(
getNodes(treeElement).every(node => {
return node.getAttribute('aria-expanded') === 'false';
}),
).toBe(true);
let ariaExpandedStates = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
expect(ariaExpandedStates).toEqual([null, null, 'false']);

component.treeControl.expandAll();
fixture.detectChanges();

expect(
getNodes(treeElement).every(node => {
return node.getAttribute('aria-expanded') === 'true';
}),
).toBe(true);
ariaExpandedStates = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
expect(ariaExpandedStates).toEqual([null, null, 'true', null]);
});

it('with the right data', () => {
Expand Down Expand Up @@ -470,11 +464,8 @@ describe('MatTree', () => {
});

it('with the right aria-expanded attrs', () => {
expect(
getNodes(treeElement).every(node => {
return node.getAttribute('aria-expanded') === 'false';
}),
).toBe(true);
let ariaExpandedStates = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
expect(ariaExpandedStates).toEqual([null, null, null]);

component.toggleRecursively = false;
const data = underlyingDataSource.data;
Expand All @@ -486,7 +477,7 @@ describe('MatTree', () => {
fixture.detectChanges();

const ariaExpanded = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
expect(ariaExpanded).toEqual(['false', 'true', 'false', 'false']);
expect(ariaExpanded).toEqual([null, 'true', 'false', null]);
});

it('should expand/collapse the node', () => {
Expand Down
2 changes: 2 additions & 0 deletions tools/public_api_guard/cdk/tree.md
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,8 @@ export class CdkTreeNode<T, K = T> implements FocusableOption, OnDestroy, OnInit
// (undocumented)
get isExpanded(): boolean;
// (undocumented)
get isLeafNode(): boolean;
// (undocumented)
get level(): number;
static mostRecentTreeNode: CdkTreeNode<any> | null;
// (undocumented)
Expand Down

0 comments on commit 1f992d0

Please sign in to comment.