Skip to content

Commit beb0a21

Browse files
Blackbaud-SteveBrushBlackbaud-SteveBrush
authored
fix(components/angular-tree-component): replace aria-owns with adjustments to the tree node markup (#758)
1 parent 3ff9fef commit beb0a21

File tree

4 files changed

+40
-60
lines changed

4 files changed

+40
-60
lines changed

‎libs/components/angular-tree-component/src/lib/modules/angular-tree/angular-tree-node.component.html‎

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,30 @@
1818
<!-- #region <tree-node-wrapper> custom template --->
1919
<div
2020
class="node-wrapper"
21+
role="treeitem"
22+
[allowDragoverStyling]="node.allowDragoverStyling()"
23+
[attr.aria-current]="node.isActive"
24+
[attr.aria-expanded]="node.children?.length ? node.isExpanded : null"
25+
[attr.aria-selected]="ariaSelected()"
26+
[attr.data-node-id]="node.id"
27+
[attr.tabindex]="tabIndex"
2128
[class.sky-angular-tree-node-active]="showActiveClass()"
2229
[class.sky-angular-tree-node-selected]="showSelectedClass()"
2330
[style.padding-left]="node.getNodePadding()"
31+
[treeAllowDrop]="node.allowDrop"
32+
[treeDrag]="node"
33+
[treeDragEnabled]="node.allowDrag()"
34+
(contextmenu)="node.mouseAction('contextMenu', $event)"
35+
(dblclick)="node.mouseAction('dblClick', $event)"
36+
(focus)="onFocus()"
37+
(mousedown)="onMouseDown()"
38+
(mouseup)="onMouseUp()"
39+
(keydown)="onKeyDown($event)"
40+
(treeDrop)="node.onDrop($event)"
41+
(treeDropDragEnter)="node.mouseAction('dragEnter', $event)"
42+
(treeDropDragLeave)="node.mouseAction('dragLeave', $event)"
43+
(treeDropDragOver)="node.mouseAction('dragOver', $event)"
44+
#nodeContentWrapper
2445
>
2546
<!-- #region <tree-node-expander> custom template --->
2647
<div class="sky-toggle-children-wrapper">
@@ -49,31 +70,7 @@
4970

5071
<!-- Note: we've made changes to the click event, tabindex, and classes when compared to the original template. -->
5172
<!-- https://github.com/500tech/angular-tree-component/blob/master/lib/components/tree-node-wrapper.component.ts -->
52-
<div
53-
class="node-content-wrapper"
54-
role="treeitem"
55-
[allowDragoverStyling]="node.allowDragoverStyling()"
56-
[attr.aria-current]="node.isActive"
57-
[attr.aria-expanded]="node.children?.length ? node.isExpanded : null"
58-
[attr.aria-selected]="ariaSelected()"
59-
[attr.aria-owns]="node.children?.length ? childNodes.id : null"
60-
[attr.data-node-id]="node.id"
61-
[attr.tabindex]="tabIndex"
62-
[treeAllowDrop]="node.allowDrop"
63-
[treeDrag]="node"
64-
[treeDragEnabled]="node.allowDrag()"
65-
(contextmenu)="node.mouseAction('contextMenu', $event)"
66-
(dblclick)="node.mouseAction('dblClick', $event)"
67-
(focus)="onFocus()"
68-
(mousedown)="onMouseDown()"
69-
(mouseup)="onMouseUp()"
70-
(keydown)="onKeyDown($event)"
71-
(treeDrop)="node.onDrop($event)"
72-
(treeDropDragEnter)="node.mouseAction('dragEnter', $event)"
73-
(treeDropDragLeave)="node.mouseAction('dragLeave', $event)"
74-
(treeDropDragOver)="node.mouseAction('dragOver', $event)"
75-
#nodeContentWrapper
76-
>
73+
<div class="node-content-wrapper">
7774
<sky-checkbox
7875
*ngIf="showCheckbox()"
7976
[checked]="isSelected"
@@ -113,13 +110,7 @@
113110
</ng-container>
114111
<!-- #endregion <tree-node-wrapper> -->
115112

116-
<tree-node-children
117-
role="group"
118-
[node]="node"
119-
[templates]="templates"
120-
skyId
121-
#childNodes="skyId"
122-
>
113+
<tree-node-children role="group" [node]="node" [templates]="templates">
123114
</tree-node-children>
124115

125116
<tree-node-drop-slot [dropIndex]="node.index + 1" [node]="node.parent">

‎libs/components/angular-tree-component/src/lib/modules/angular-tree/angular-tree-root.component.spec.ts‎

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ describe('tree view', () => {
1616

1717
// #region helpers
1818
function getTreeWrapper(): HTMLElement | null {
19-
return document.querySelector('.sky-angular-tree-wrapper');
19+
return document.querySelector('.sky-angular-tree-root');
2020
}
2121

2222
function getToolbar(): HTMLElement {
@@ -62,7 +62,7 @@ describe('tree view', () => {
6262
}
6363

6464
function getNodeContentWrappers(): NodeListOf<HTMLElement> {
65-
return document.querySelectorAll('.node-content-wrapper');
65+
return document.querySelectorAll('.node-wrapper');
6666
}
6767

6868
function getNodeContents(): NodeListOf<HTMLElement> {
@@ -1206,7 +1206,7 @@ describe('tree view', () => {
12061206

12071207
it('should have role="treeitem" for each content wrapper', () => {
12081208
fixture.detectChanges();
1209-
const nodes = document.querySelectorAll('.node-content-wrapper');
1209+
const nodes = document.querySelectorAll('.node-wrapper');
12101210

12111211
const nodeList: Array<Element> = Array.prototype.slice.call(nodes);
12121212
nodeList.forEach((node) => {
@@ -1228,7 +1228,7 @@ describe('tree view', () => {
12281228
it('should have proper aria-expanded attributes for elements that contains children', () => {
12291229
fixture.detectChanges();
12301230
const buttons = getToggleChildrenButtons();
1231-
const nodes = document.querySelectorAll('.node-content-wrapper');
1231+
const nodes = document.querySelectorAll('.node-wrapper');
12321232

12331233
expect(nodes[0].getAttribute('aria-expanded')).toEqual('true');
12341234
expect(nodes[1].getAttribute('aria-expanded')).toBeNull();
@@ -1246,7 +1246,7 @@ describe('tree view', () => {
12461246

12471247
it('should set aria-current to true for the active node and undefined for all other nodes', () => {
12481248
fixture.detectChanges();
1249-
const nodes = document.querySelectorAll('.node-content-wrapper');
1249+
const nodes = document.querySelectorAll('.node-wrapper');
12501250

12511251
expect(nodes[0].getAttribute('aria-current')).toBeNull();
12521252
expect(nodes[1].getAttribute('aria-current')).toBeNull();
@@ -1289,7 +1289,7 @@ describe('tree view', () => {
12891289
it('should set aria-selected to true for the selected node and undefined for all other nodes when in single-select mode', () => {
12901290
setupSingleSelectMode();
12911291
fixture.detectChanges();
1292-
const nodes = document.querySelectorAll('.node-content-wrapper');
1292+
const nodes = document.querySelectorAll('.node-wrapper');
12931293

12941294
expect(nodes[0].getAttribute('aria-selected')).toBeNull();
12951295
expect(nodes[1].getAttribute('aria-selected')).toBeNull();
@@ -1308,7 +1308,7 @@ describe('tree view', () => {
13081308
it('should not have aria-selected attributes on parent nodes when in leaf-select-only mode', () => {
13091309
setupLeafSelectOnlyMode();
13101310
fixture.detectChanges();
1311-
const nodes = document.querySelectorAll('.node-content-wrapper');
1311+
const nodes = document.querySelectorAll('.node-wrapper');
13121312

13131313
expect(nodes[0].getAttribute('aria-selected')).toBeNull();
13141314
expect(nodes[1].getAttribute('aria-selected')).toEqual('false');
@@ -1327,7 +1327,7 @@ describe('tree view', () => {
13271327
it('should set aria-selected to true for the selected node and undefined for all other nodes when in multi-select mode', () => {
13281328
setupNonCascadingMode();
13291329
fixture.detectChanges();
1330-
const nodes = document.querySelectorAll('.node-content-wrapper');
1330+
const nodes = document.querySelectorAll('.node-wrapper');
13311331

13321332
expect(nodes[0].getAttribute('aria-selected')).toEqual('false');
13331333
expect(nodes[1].getAttribute('aria-selected')).toEqual('false');
@@ -1347,7 +1347,7 @@ describe('tree view', () => {
13471347
it('should set aria-selected to true for the selected node and undefined for all other nodes when in multi-select mode', () => {
13481348
setupCascadingMode();
13491349
fixture.detectChanges();
1350-
const nodes = document.querySelectorAll('.node-content-wrapper');
1350+
const nodes = document.querySelectorAll('.node-wrapper');
13511351

13521352
expect(nodes[0].getAttribute('aria-selected')).toEqual('false');
13531353
expect(nodes[1].getAttribute('aria-selected')).toEqual('false');
@@ -1363,20 +1363,6 @@ describe('tree view', () => {
13631363
expect(nodes[4].getAttribute('aria-selected')).toEqual('true');
13641364
});
13651365

1366-
it('should set aria-owns for groups under child nodes', async () => {
1367-
setupCascadingMode();
1368-
fixture.detectChanges();
1369-
await fixture.whenStable();
1370-
const parentNodes = getNodeContentWrappers();
1371-
parentNodes.forEach((node) => {
1372-
if (node.getAttribute('aria-expanded') === null) {
1373-
expect(node.getAttribute('aria-owns')).toBeNull();
1374-
} else {
1375-
expect(node.getAttribute('aria-owns')).toBeDefined();
1376-
}
1377-
});
1378-
});
1379-
13801366
it('should pass accessibility in basic setup', async () => {
13811367
fixture.detectChanges();
13821368
await fixture.whenStable();

‎libs/components/angular-tree-component/src/lib/modules/angular-tree/angular-tree-wrapper.component.html‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<div
22
class="sky-angular-tree-wrapper"
3-
role="tree"
4-
[attr.aria-multiselectable]="multiselectable()"
53
[class.sky-angular-tree-read-only]="readOnly"
64
>
75
<sky-angular-tree-toolbar
@@ -13,5 +11,11 @@
1311
(selectAllClick)="onSelectAllClick()"
1412
>
1513
</sky-angular-tree-toolbar>
16-
<ng-content select="tree-root"></ng-content>
14+
<div
15+
class="sky-angular-tree-root"
16+
role="tree"
17+
[attr.aria-multiselectable]="multiselectable()"
18+
>
19+
<ng-content select="tree-root"></ng-content>
20+
</div>
1721
</div>

‎libs/components/angular-tree-component/src/lib/modules/angular-tree/angular-tree.module.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { CommonModule } from '@angular/common';
22
import { NgModule } from '@angular/core';
33
import { TreeModule } from '@circlon/angular-tree-component';
4-
import { SkyCoreAdapterService, SkyIdModule } from '@skyux/core';
4+
import { SkyCoreAdapterService } from '@skyux/core';
55
import { SkyCheckboxModule } from '@skyux/forms';
66
import { SkyIconModule } from '@skyux/indicators';
77
import { SkyToolbarModule } from '@skyux/layout';
@@ -25,7 +25,6 @@ import { SkyAngularTreeWrapperComponent } from './angular-tree-wrapper.component
2525
SkyAngularTreeComponentResourcesModule,
2626
SkyCheckboxModule,
2727
SkyIconModule,
28-
SkyIdModule,
2928
SkyToolbarModule,
3029
TreeModule,
3130
],

0 commit comments

Comments
 (0)