Skip to content

Commit

Permalink
fix(material/tree): Apply aria-level to all nodes
Browse files Browse the repository at this point in the history
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
  • Loading branch information
martiansnoop committed Nov 27, 2019
1 parent 61b423a commit 04cc369
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 5 deletions.
15 changes: 12 additions & 3 deletions src/cdk/tree/tree.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -103,9 +103,18 @@ describe('CdkTree', () => {
it('with the right accessibility roles', () => {
expect(treeElement.getAttribute('role')).toBe('tree');

expect(getNodes(treeElement).every(node => {
return node.getAttribute('role') === 'treeitem';
})).toBe(true);
expect(getNodes(treeElement).every(node => {
return node.getAttribute('role') === 'treeitem';
})).toBe(true);
});

it('with the right aria-levels', () => {
// add a child to the first node
let data = dataSource.data;
const child = dataSource.addChild(data[0], true);

const ariaLevels = getNodes(treeElement).map(n => n.getAttribute('aria-level'));
expect(ariaLevels).toEqual(["1", "2", "1", "1"]);
});

it('with the right data', () => {
Expand Down
2 changes: 1 addition & 1 deletion src/cdk/tree/tree.ts
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,7 @@ export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDest
exportAs: 'cdkTreeNode',
host: {
'[attr.aria-expanded]': 'isExpanded',
'[attr.aria-level]': 'role === "treeitem" ? level : null',
'[attr.aria-level]': 'level',
'[attr.role]': 'role',
'class': 'cdk-tree-node',
},
Expand Down
2 changes: 1 addition & 1 deletion src/material/tree/node.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const _MatTreeNodeMixinBase: HasTabIndexCtor & CanDisableCtor & typeof CdkTreeNo
inputs: ['disabled', 'tabIndex'],
host: {
'[attr.aria-expanded]': 'isExpanded',
'[attr.aria-level]': 'role === "treeitem" ? level : null',
'[attr.aria-level]': 'level',
'[attr.role]': 'role',
'class': 'mat-tree-node'
},
Expand Down
10 changes: 10 additions & 0 deletions src/material/tree/tree.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,16 @@ describe('MatTree', () => {
});
});

it('with the right aria-levels', () => {
// add a child to the first node
let data = underlyingDataSource.data;
underlyingDataSource.addChild(data[2]);
fixture.detectChanges();

const ariaLevels = getNodes(treeElement).map(n => n.getAttribute('aria-level'));
expect(ariaLevels).toEqual(["0", "0", "0", "1"]);
});

it('with the right data', () => {
expect(underlyingDataSource.data.length).toBe(3);

Expand Down

0 comments on commit 04cc369

Please sign in to comment.