Skip to content

Commit

Permalink
fix(a11y): treeview incorrect levels (backport to 16.x) (#1385)
Browse files Browse the repository at this point in the history
Backport 9c67c41 from #1383. <br> ## PR
Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

&lt;!-- Please check the one that applies to this PR using
&quot;x&quot;. --&gt;

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

&lt;!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. --&gt;
The screen reader is reading out incorrect levels in case of a recursive
tree view component.
Issue Number: CDE-1697

## What is the new behavior?
The screen reader will read out correct levels for the recursive tree
view
## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

&lt;!-- If this PR contains a breaking change, please describe the
impact and migration path for existing applications below. --&gt;

## Other information

Co-authored-by: Andrea A Fernandes <[email protected]>
  • Loading branch information
github-actions[bot] and andyfeds authored May 7, 2024
1 parent aaf7da6 commit 9ee4c47
Showing 1 changed file with 10 additions and 1 deletion.
11 changes: 10 additions & 1 deletion projects/angular/src/data/tree-view/recursive-children.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { TreeFeaturesService } from './tree-features.service';
</ng-container>
`,
host: {
'[attr.role]': '"group"', // Safari + VO needs direct relationship between treeitem and group; no element should exist between them
'[attr.role]': 'role', // Safari + VO needs direct relationship between treeitem and group; no element should exist between them
},
})
/**
Expand All @@ -37,6 +37,7 @@ export class RecursiveChildren<T> {
@Input('children') children: TreeNodeModel<T>[];

subscription: Subscription;
role: string;

constructor(public featuresService: TreeFeaturesService<T>, @Optional() private expandService: IfExpandService) {
if (expandService) {
Expand All @@ -51,6 +52,10 @@ export class RecursiveChildren<T> {
}
}

ngAfterContentInit() {
this.setAriaRoles();
}

shouldRender() {
return (
this.featuresService.recursion &&
Expand All @@ -73,4 +78,8 @@ export class RecursiveChildren<T> {
this.subscription.unsubscribe();
}
}

private setAriaRoles() {
this.role = this.parent ? 'group' : null;
}
}

0 comments on commit 9ee4c47

Please sign in to comment.