Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug(cdk-tree): aria-expanded attribute should not appear in the leaf node #21922

Closed
Yueyue07 opened this issue Feb 16, 2021 · 6 comments · Fixed by #29096 or #29273
Closed

bug(cdk-tree): aria-expanded attribute should not appear in the leaf node #21922

Yueyue07 opened this issue Feb 16, 2021 · 6 comments · Fixed by #29096 or #29273
Assignees
@zarend
Labels
Accessibility This issue is related to accessibility (a11y) area: cdk/tree P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@Yueyue07
Copy link

Reproduction

Example to reproduce issue
https://material.angular.io/cdk/tree/examples

Steps to reproduce:
Inspect the leaf node of cdk-tree from dev tools
image
Based on W3.org aria practices for tree view, it mentions that: "Each element with role treeitem that serves as a parent node has aria-expanded set to false when the node is in a closed state and set to true when the node is in an open state. End nodes do not have the aria-expanded attribute because, if they were to have it, they would be incorrectly described to assistive technologies as parent nodes."

Expected Behavior

There should be no aria-expanded attribute appearing on the leaf node

Actual Behavior

aria-expanded is setting as false on the leaf node

Environment

  • CDK/Material: newest version
@Yueyue07 Yueyue07 added the needs triage This issue needs to be triaged by the team label Feb 16, 2021
@jelbourn jelbourn added Accessibility This issue is related to accessibility (a11y) area: cdk/tree P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Feb 19, 2021
@chaitanya-hdoc
Copy link

@jelbourn I would like to submit a PR for this.

@nico151999
Copy link

I was reported by a screenreader user that it is quite confusing to face the expanded attribute being set on leaf elements. For accessibility reasons I would also like to see the behavior described by W3.org as mentioned by @Yueyue07

@behofer
Copy link

behofer commented Mar 9, 2021

As a screenreader user, I can exactly see the behaviour described by @Yueyue07 consistently with different screenreaders. So, screenreaders are relying on aria-expanded being correctly set to describe tree nodes and their current states.
From an accessibility perspective, A fix would be highly appreciated!
Thanks.

@stephanie-cherba
Copy link

This is still an issue. Aria-expanded should only exist on node with children. Hopefully this can get fixed soon. Thanks!

@zarend
Copy link
Contributor

zarend commented Apr 22, 2024

Hello folks, Fix in progress, see cdk-tree-revamp branch.
-Zach

@zarend zarend self-assigned this Apr 22, 2024
DBowen33 added a commit to DBowen33/components that referenced this issue May 22, 2024
@DBowen33
fix(material/tree): aria-expanded attribute should not appear in leaf…
ed3219b 
… node

fixed an issue where aria-expanded attribute was wrongly being added to leaf nodes

Fixes angular#21922
@DBowen33 DBowen33 mentioned this issue May 22, 2024
Closed
DBowen33 added a commit to DBowen33/components that referenced this issue May 22, 2024
@DBowen33
fix(material/tree): aria-expanded attribute should not appear in the …
05d34ba 
…leaf node

Fixed an issue to where leaf nodes were wrongly being assigned the aria-expanded attribute, which could confuse screen reader users.

Fixes angular#21922
@DBowen33 DBowen33 mentioned this issue May 22, 2024
Merged
DBowen33 added a commit to DBowen33/components that referenced this issue May 22, 2024
@DBowen33
fix(material/tree): reworked unit tests
0e70ab8 
reworked unit tests for new tree configuration with aria-expanded

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue May 22, 2024
@DBowen33
fix(material/tree): fixed cdk test and approved golden
03ac15f 
fix cdk tests and approved goldens

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue May 22, 2024
@DBowen33
fix(material/tree): approved cdk golden
df9f5be 
approved cdk golden

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 7, 2024
@DBowen33
fix(material/tree): refactored isLeafNode function
d9e146c 
refactored isLeafNode function to make more sense

fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 7, 2024
@DBowen33
fix(material/tree): fix comment
9b3e683 
fix comment

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 7, 2024
@DBowen33
fix(material/tree): refactor isLeafNode function
a5b0d1a 
refactored isLeafNode function to make more sense

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 7, 2024
@DBowen33
fix(material/tree): fix api golden
1395f04 
fix api golden

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 7, 2024
@DBowen33
fix(material/tree): change change detection strategy
0271381 
fix change detection strategy

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 7, 2024
@DBowen33
fix(material/tree): revert last commit
8630f6f 
revert last commit

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 7, 2024
@DBowen33
fix(material/tree): refactor again
af58191 
refactored isExpanded function again

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 7, 2024
@DBowen33
fix(material/tree): add aria-expanded to ngOnInit
57a29b9 
added aria-expanded to ngOnInit to get rid of ExpressionChangedAfterItHasBeenCheckedError

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 7, 2024
@DBowen33
fix(material/tree): aria-expanded attribute should not appear in the …
a4a8910 
…leaf node

Fixed an issue to where leaf nodes were wrongly being assigned the aria-expanded attribute, which could confuse screen reader users.

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 7, 2024
@DBowen33
fix(material/tree): reworked unit tests
2229087 
reworked unit tests for new tree configuration with aria-expanded

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 7, 2024
@DBowen33
fix(material/tree): fixed cdk test and approved golden
94b0ebb 
fix cdk tests and approved goldens

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 7, 2024
@DBowen33
fix(material/tree): approved cdk golden
bff519b 
approved cdk golden

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 7, 2024
@DBowen33
fix(material/tree): refactor isLeafNode function
bd8a50d 
refactored isLeafNode function to make more sense

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 7, 2024
@DBowen33
fix(material/tree): fix api golden
6c30470 
fix api golden

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 7, 2024
@DBowen33
fix(material/tree): change change detection strategy
dabce48 
fix change detection strategy

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 7, 2024
@DBowen33
fix(material/tree): revert last commit
4de31b5 
revert last commit

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 7, 2024
@DBowen33
fix(material/tree): refactor again
bbcb8d0 
refactored isExpanded function again

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 7, 2024
@DBowen33
fix(material/tree): add aria-expanded to ngOnInit
4eea01a 
added aria-expanded to ngOnInit to get rid of ExpressionChangedAfterItHasBeenCheckedError

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 8, 2024
@DBowen33
fix(material/tree): fixed unit tests
9423d74 
fixed unit tests

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 8, 2024
@DBowen33
fix(material/tree): updated public api file
a2a3425 
updated public api file

Fixes angular#21922
andrewseguin pushed a commit that referenced this issue Jun 17, 2024
@DBowen33 @andrewseguin
fix(material/tree): aria-expanded attribute should not appear in the …
f834a11 
…leaf node (#29096)

* fix(material/tree): fixed unit tests

fixed unit tests

Fixes #21922

* fix(material/tree): updated public api file

updated public api file

Fixes #21922

(cherry picked from commit 43b8dcb)
@DBowen33 DBowen33 mentioned this issue Jun 17, 2024
Merged
DBowen33 added a commit to DBowen33/components that referenced this issue Jun 17, 2024
@DBowen33
fix(material/tree): new pr
fab7b4f 
new pr

fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jul 3, 2024
@DBowen33
fix(material/tree): aria-expanded attribute should not appear in the …
1a8f109 
…leaf node (angular#29096)

* fix(material/tree): fixed unit tests

fixed unit tests

Fixes angular#21922

* fix(material/tree): updated public api file

updated public api file

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jul 3, 2024
@DBowen33
fix(material/tree): fixed unit tests
6980531 
fixed unit tests

Fixes angular#21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jul 3, 2024
@DBowen33
fix(material/tree): updated public api file
9d74b25 
updated public api file

Fixes angular#21922
andrewseguin pushed a commit that referenced this issue Jul 3, 2024
@DBowen33
fix(material/tree): aria-expanded attribute should not appear in the …
1f992d0 
…leaf node (#29273)

* fix(material/tree): fixed unit tests

fixed unit tests

Fixes #21922

* fix(material/tree): updated public api file

updated public api file

Fixes #21922
DBowen33 added a commit to DBowen33/components that referenced this issue Jul 12, 2024
@DBowen33
fix(material/tree): aria-expanded attribute should not appear in the …
5d5e8cd 
…leaf node (angular#29096)

* fix(material/tree): fixed unit tests

fixed unit tests

Fixes angular#21922

* fix(material/tree): updated public api file

updated public api file

Fixes angular#21922
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 18, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@zarend zarend

Labels
Accessibility This issue is related to accessibility (a11y) area: cdk/tree P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
7 participants
@jelbourn @zarend @nico151999 @Yueyue07 @stephanie-cherba @behofer @chaitanya-hdoc