Tree examples accessibility issues

tinayuangao commented 6 years ago

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Screen reader users could access the tree with all the information

What is the current behavior?

For nested tree & flat tree example:

announced "table with 0 element" when focusing on the tree
leaf nodes are invisible to screen-reader users

For checkbox example:

focusing on the toggle announced "toggle undefined"

What are the steps to reproduce?

https://material.angular.io/components/tree/examples

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

6.0

Is there anything else we should know?

mfairchild365 commented 5 years ago

Adding more details:

Using the following screen readers

NVDA 2018.4.1 + Firefox 64
VoiceOver for IOS (12.1.3) + Safari

Revealed the following issues:

Buttons to add items in the "Tree with checkboxes" example do not have accessible names (all examples). All buttons must have an accessible name that describes the purpose of the button.
Almost all information is invisible to screen-reader users (contents of the trees are not announced and are not operable)

Steps to reproduce

Using either of the following screen readers
- NVDA 2018.4.1 + Firefox 64
- VoiceOver for IOS (12.1.3) + Safari
Open the tree example
Navigate to the first tree node in the 'tree with dynamic data' example.
- In NVDA you can press the tab key until you reach the node
- In VoiceOver for iOS you can swipe right until you reach the node
Observe that NVDA announces "Treeview" and does not announce any other information about the node.
Observe that VoiceOver announces "toggle undefined, button" and does not announce any treview related semantics.

Additionally

Axe can be used to reveal further issues, including where ARIA is not coded according to spec.
The ARIA Authoring Practices document has very helpful information on expected keyboard interactions and roles, states, and properties.

nico151999 commented 3 years ago

I was reported the same by a screen reader user. Is there some progress on this issue? I am not familiar with screen readers but this seems to make my application unusable to people using one. Unfortunately, I do not know how to debug such issues. Would be great if there will be a fix or at least a workaround. Any suggestion appreciated. Thank you!

behofer commented 3 years ago

Being a screenreader user myself, I have the same behaviour with NVDA in browse mode (Version 2020.3) and JAWS (Version 2020) together with Firefox and Chrome on Windows. Seems like a general issue with ARIA trees. Advice how to fix this / or for a workaround would be highly appreciated.

sebastianhaberey commented 11 months ago

Same here on macOS Sonoma 14.0 / Google Chrome 118.0.5993.70 (arm64). When focusing on the tree, VoiceOver merely announces "table". Any workaround would be appreciated here, too.

@mfairchild365 thanks for the link to the W3C guide btw, it's quite helpful!

angular / components