a11y: Multiple issues and spec violations with space panel

[ndarilek]

Steps to reproduce

There are a few issues with the markup as generated by SpacePanel.tsx:

1. A <ul role="tree"> is created, but the user panel is added as a child in a <div>. I'm fairly sure lists can't have divs as children in the HTML spec.
2. As presented to NVDA, the user menu is presented as if it was a child of the spaces tree. I'm guessing this tree should only have actual spaces as its children, and that the user menu should be a separate item. If not, it should be presented as a <li> with appropriate ARIA attributes for its role as a tree item.
3. aria-selected="true" needs to be set on only the selected item in the tree.

I did manage to move the <div> out from the ttree, though I don't know how it might have affected things visually. Got a bit lost in trying to set aria-selected though and doubt I'll have time to get to it soon.

Outcome

What did you expect?

To be able to use the spaces tree accessibly

What happened instead?

Tabbing to the spaces tree presents the user menu as if it's a space. Also, NVDA is generally confused about how to handle it given the markup isn't compliant.

Operating system

No response

Browser information

No response

URL for webapp

No response

Application version

No response

Homeserver

No response

Will you send logs?

Yes

[t3chguy]

@ndarilek thanks for the write up, if you could test matrix-org/matrix-react-sdk#9157 to see if it resolves your three issues that would be great

[ndarilek]

Very nice. The elements do appear separately, the spaces tree presents as a single element, and the selected space is shown as the tree value when reviewing the screen. Thanks.