The room list / space list can not be reached via a shortcut directly

[justjanne]

The new search dialog needs to be accessible, especially for screen reader users.

Resources:

• https://github.com/matrix-org/element-web-rageshakes/issues/10871
• https://github.com/vector-im/element-web/issues/22361

I get that the tree still exists. But I used to reach it via ctrl-k, and now there seems to be no way to get there via the keyboard. Maybe F6/shift-F6 to navigate forward/back between the spaces tree, the rooms tree in the space, and the home/room/space exploration area might be nice. Not strictly related to this dialog, but it might give me a useful keybinding if ctrl-k isn't meant to completely replace the former experience.

[justjanne]

This issue was split out from https://github.com/vector-im/element-web/issues/22361, copying the applicable labels from that issue.

[sploner]

This issue hasn't been touched for 2 years, but seems to be remarkably easy to fix:

This is how the source code for elements in the room / private message channel list currently looks like: <div role="treeitem" aria-label="<the-room-name>" aria-selected="false" class="mx_AccessibleButton mx_RoomTile mx_RoomTile_selected" tabindex="-1">

Switching the tabindex to 0 (tab-accessible without interfering with the standard order) fixes the issue: <div role="treeitem" aria-label="<the-room-name>" aria-selected="false" class="mx_AccessibleButton mx_RoomTile mx_RoomTile_selected" tabindex="0">

Could we get this fixed? This could be a "Good first issue".

The room list is an essential part of a chat client, and this issue makes the whole client unusable for screen reader users. Having a blind person on our team, we are currently thinking about switching to another messanger just for this reason.

A further point that could be fixed alongside is that the role of those buttons is "treeitem", but should be "button". ( See, e.g., https://stackoverflow.com/questions/10403138/what-is-the-purpose-of-the-role-attribute-in-html )

[t3chguy]

Your comments seem entirely unrelated to this issue, which is about having a quicker way to reach this area of the app rather than hitting tab until you reach it. This issue would be fixed by something like https://github.com/matrix-org/matrix-react-sdk/pull/12190

Could we get this fixed? This could be a "Good first issue".

@sploner I think you're misunderstanding what you're seeing. The space panel (like a bunch of other complex widgets) uses Roving tab indexes. You can read more about it here https://a11y-solutions.stevenwoodson.com/solutions/focus/roving-focus/

There will always be 1 item (set) within the treeview with tabindex 0 and you use arrows to navigate between them.

A further point that could be fixed alongside is that the role of those buttons is "treeitem", but should be "button".

This is wrong, see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/ - button is not a semantic child of treeview

[sploner]

Got it, thank you.

(When not having a room selected (when opening /#/home ), it's not possible to tab into the room selection, so the room list seemed not to be navigatable via keyboard at all. It's been a while since I worked on websites.

Once a room is selected via mouse click, the room list can be tab-ed and arrows select the specific room. The prerequisite is tricky for screen reader users, but might be fixed along with the linked issue, so I'll wait for this one.)

[t3chguy]

@sploner I cannot reproduce that, I can tab along and I'll hit Invites which is part of the room list treeview, from there I can use arrow key navigation to navigate the treeview widget. If you are having issues please open a new issue with reproduction steps as well as screenshots/dom snapshots if possible on a test account

Edit: the path for Invites in the a11y tree is

navigation Rooms > tree Rooms > treeitem Invites > button Invites