Skip to content

Commit e084538

Browse files
martiansnoopannieyw
authored andcommitted
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 37f4a7a commit e084538

File tree

4 files changed

+22
-2
lines changed

4 files changed

+22
-2
lines changed

src/cdk/tree/tree.spec.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,15 @@ describe('CdkTree', () => {
120120
})).toBe(true);
121121
});
122122

123+
it('with the right aria-levels', () => {
124+
// add a child to the first node
125+
let data = dataSource.data;
126+
dataSource.addChild(data[0], true);
127+
128+
const ariaLevels = getNodes(treeElement).map(n => n.getAttribute('aria-level'));
129+
expect(ariaLevels).toEqual(['1', '2', '1', '1']);
130+
});
131+
123132
it('with the right data', () => {
124133
expect(dataSource.data.length).toBe(3);
125134

src/cdk/tree/tree.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -299,7 +299,7 @@ export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDest
299299
exportAs: 'cdkTreeNode',
300300
host: {
301301
'[attr.aria-expanded]': 'isExpanded',
302-
'[attr.aria-level]': 'role === "treeitem" ? level : null',
302+
'[attr.aria-level]': 'level',
303303
'[attr.role]': 'role',
304304
'class': 'cdk-tree-node',
305305
},

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: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,17 @@ describe('MatTree', () => {
6464
});
6565
});
6666

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

0 commit comments

Comments
 (0)