Notes: Use the correct accessibility tree #72594
Description
What problem does this address?
In the current Notes sidebar, each note has the listitem role and is wrapped in an element with the list role. It's composed of the following accessibility tree:
- list
- listitem: "Note: This is a first note."
- button: "Add new note"
- image: "User avatar"
- StaticText: "Admin"
- time
- button: "Resolve"
- button: "Actions"
- paragraph > "StaticText: This is a first note."
- image: "User avatar"
- StaticText: "Admin"
- time
- paragraph > "StaticText: This is a first reply."
- image: "User avatar"
- StaticText: "Admin"
- time
- paragraph > "StaticText: This is the second reply."
- button: "Back to block"
- listitem: "Note: This is a first note."
- ...
I think there are at least two problems with the current implementation:
- The
listitemelement is expandable. As this comment indicates, thelistitemrole may be inappropriate for expandable elements. - Because the elements in the list items are all parallel, it's hard to tell which are first notes and which are replies.
What is your proposed solution?
As far as I can tell, we might be able to use tree and treeitem for expandable nested elements.
I think a tree like this might be best, but I'm looking forward to feedback.
- tree
- treeitem: "Note: This is a first note."
- button: "Add new note"
- image: "User avatar"
- StaticText: "Admin"
- time
- button: "Resolve"
- button: "Actions"
- paragraph > "StaticText: This is a first note."
- group
- treeitem
- image: "User avatar"
- StaticText: "Admin"
- time
- paragraph > "StaticText: This is a first reply."
- treeitem
- image: "User avatar"
- StaticText: "Admin"
- time
- paragraph > "StaticText: This is the second reply."
- button: "Back to block"
- treeitem: "Note: This is a first note."
- ...