Skip to content

Commit 04cc369

Browse files
committed
fix(material/tree): Apply aria-level to all nodes
Previously, only leaf nodes had aria-level applied. This is an incremental change since this is an unfamiliar codebase for me. The main benefit it will have on its own is that it will allow anyone doing custom dom manipulation to know what level the node is on. Otherwise by itself there is no change in how NVDA reads nodes with children. (It currently reads them as literally "grouping"; no information about the contents is provided). This change will be necessary for a later change I'm planning, wherein the role of parent nodes will be changed from "group" to "treeitem", in accordance with how roles are applied in WAI-ARIA reference examples such as https://www.w3.org/TR/wai-aria-practices/examples/treeview/treeview-1/treeview-1b.html
1 parent 61b423a commit 04cc369

File tree

4 files changed

+24
-5
lines changed

4 files changed

+24
-5
lines changed

src/cdk/tree/tree.spec.ts

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,9 +103,18 @@ describe('CdkTree', () => {
103103
it('with the right accessibility roles', () => {
104104
expect(treeElement.getAttribute('role')).toBe('tree');
105105

106-
expect(getNodes(treeElement).every(node => {
107-
return node.getAttribute('role') === 'treeitem';
108-
})).toBe(true);
106+
expect(getNodes(treeElement).every(node => {
107+
return node.getAttribute('role') === 'treeitem';
108+
})).toBe(true);
109+
});
110+
111+
it('with the right aria-levels', () => {
112+
// add a child to the first node
113+
let data = dataSource.data;
114+
const child = dataSource.addChild(data[0], true);
115+
116+
const ariaLevels = getNodes(treeElement).map(n => n.getAttribute('aria-level'));
117+
expect(ariaLevels).toEqual(["1", "2", "1", "1"]);
109118
});
110119

111120
it('with the right data', () => {

src/cdk/tree/tree.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -291,7 +291,7 @@ export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDest
291291
exportAs: 'cdkTreeNode',
292292
host: {
293293
'[attr.aria-expanded]': 'isExpanded',
294-
'[attr.aria-level]': 'role === "treeitem" ? level : null',
294+
'[attr.aria-level]': 'level',
295295
'[attr.role]': 'role',
296296
'class': 'cdk-tree-node',
297297
},

src/material/tree/node.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const _MatTreeNodeMixinBase: HasTabIndexCtor & CanDisableCtor & typeof CdkTreeNo
4444
inputs: ['disabled', 'tabIndex'],
4545
host: {
4646
'[attr.aria-expanded]': 'isExpanded',
47-
'[attr.aria-level]': 'role === "treeitem" ? level : null',
47+
'[attr.aria-level]': 'level',
4848
'[attr.role]': 'role',
4949
'class': 'mat-tree-node'
5050
},

src/material/tree/tree.spec.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,16 @@ describe('MatTree', () => {
6464
});
6565
});
6666

67+
it('with the right aria-levels', () => {
68+
// add a child to the first node
69+
let data = underlyingDataSource.data;
70+
underlyingDataSource.addChild(data[2]);
71+
fixture.detectChanges();
72+
73+
const ariaLevels = getNodes(treeElement).map(n => n.getAttribute('aria-level'));
74+
expect(ariaLevels).toEqual(["0", "0", "0", "1"]);
75+
});
76+
6777
it('with the right data', () => {
6878
expect(underlyingDataSource.data.length).toBe(3);
6979

0 commit comments

Comments
 (0)