Skip to content

Screen reader issues with toolbox role=tree implementation #9293

@microbit-matt-hillsdon

Description

@microbit-matt-hillsdon

Check for duplicates

  • I have searched for similar issues before opening a new one.

Work Summary

  • aria-activedescendant is on the wrong element
  • grouping structure not correct
  • remove aria-selected=false on the unselected elements
  • investigate and remove "owns" if possible

Description

Using https://google.github.io/blockly-keyboard-experimentation/screenreader/

Two problems prevent the tree in the demo being accurately represented in the accessibility tree:

  1. aria-activedescendent is on the wrong element. It’s on the child of the tree (div.blocklyToolboxCategoryGroup), not the tree itself. It should move to the tree.
  2. the grouping structure is not correct
    • CollapsibleCategory should be role=treeitem (Misc in the demo)
    • its contentsContainer should have role=group

Another minor point from reviewing the code: MDN docs are clear that we should not set aria-selected=false on all the non-selected thing in a single select tree.

I am also unsure that the work done to maintain "owns" is necessary (here and elsewhere). The MDN documentation is unclear, but I think it should only be needed if you need to "own" non-descendent nodes. Did you find it to be needed based on practical experience with a screen reader?

Reproduction steps

  1. Use https://google.github.io/blockly-keyboard-experimentation/screenreader/
  2. Note that items in the toolbox tree are e.g. 2/8 but there are 9
  3. Note that Misc itself is just read as a group not as a tree item

Stack trace

Screenshots

No response

Browsers

No response

Metadata

Metadata

Assignees

Labels

issue: bugDescribes why the code or behaviour is wrong

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions