Tab ordering is broken for keyboard-accessibility tabbing around the chat view

[ara4n]

(e.g. for getting focus to the text box whilst in the main page; more likely to pick a linkify link at the top of scrollback)

[pvagner]

##435 is also related to this.

[kittykat]

In the chat room, the tabbing which feels broken is:

• Room info tabs to a random place in the timeline backlog (should probably focus most recent message)
• Tabbing around the left panel has odd ordering depending on navigation between tabbing
• Tabbing around the timeline doesn't make sense without a screen reader (I assume it makes more sense with a screen reader but mine isn't working at the moment so can't test)

[pvagner]

Let me describe how I am using Element with a screen reader now, because since the original issue has been filled approx 6 years ago, it has changed a lot and today I don't see this as a huge issue personally.
For this description let's assume I'm already logged into my account and I have no notifications at the top i.e. the most frequent use case.
Once I change to the element window the input box gains the focus and I can start typing.
If I wish to read the chat I will switch my screen reader to so called browse mode and I can review the time line bottom to top using the arrow keys. If I'd like to do something with the message I am currently reading I can either press tab key to move to the reactions toolbar or I can press shift+tab to move the focus to the permalink. Worth noting is the fact user names and user mentions have no tabIndex thus if I would like to display someone's profile or mention an user I can't just activate it from the keyboard. I am using auto complete for this while typing.
When inside the reactions toolbar I can use left and right keys to navigate over the toolbar buttons and I can activate with the enter key.
If I want to scroll the timeline I have to make sure screen reader is in focus mode (it's not intercepting arrow keys and other navigation shortcuts) and I can use page up / page down keys to scroll, switch to browse mode and continue reading. For a bit this is some tryal and error as I don't know how much I am scrolling and how much I'd like to. The scrolling part is something that I'd consider improving if it's possible by allowing to scroll to the nearest date seperator either by adding dedicated keyboard shortcuts or buttons similar to go to first unread / scroll to the bottom.
When I'd like to change to a different room I can press ctrl+k, enter my text and use up and down arrow key to browse the room list. Also pressing left collapses and right arrow expands the sub lists similar to how tree views are operated in the desktop style apps. When the root element of a tree has the focus either Rooms or People, pressing tab key allows navigating to buttons with more options or actions related to that section. This is one of the most clever features of Element as I currently see it. It's why I am describing all this in more details right now because you are saying tabbing is broken for you in the left pannel. Does it mean focus / outline styling is wrong? I'd be happy if this would stay working equally well like it's working today.
If I press tab while the filter has focus the focus moves to the explore all rooms buttons and then into the recents room toolbar if it's enabled in the preferences. Again this is a toolbar like control thus I can use left or right arrow key to navigate and enter to activate. This is specifically designed to be accessible. Pressing the tab key further moves to the room header.
Buttons such as audio / video call are accessible from the keyboard. Individual sections are marked up as tabs but they are working like buttons. Pinned messages, Notifications, Room info change the right pannel content. I can't find how do I show the member list once it's switched to something else. Clicking on the button coresponding with the content closes the right pannel view.
Member list is not reacting to tab key at all. Ideally I'd change that to similar list from the keyboard usage perspective like the room list so it will only take single stop of the tab key press and arrow keys will focus individual members in the list.
If I press shift+tab on the room list the focus is moved to the recent rooms toolbar, then to the explore rooms, then to the filter. Continuing with shift+tab from the filter, focus moves over the unlabelled button for toggling the room list details, then user menu and then expanding spaces.
Space panel is another great feature and great care has been made in order to make it accessible. It's working similar to room list in addition that items can be reordered.
Oh btw both room list and space panel do have right click popup menus and these popup menus are fully accessible similarly how user menu is accessible.
Modal dialogs and forms are mostly accessible with some quirks here and there however overal it's nice to use. When dialog is showing it's not possible to browse the whole app this is also an accessibility feature.

I apologize, this message is quite long. While describing how I use it I have also described which features have been made accessible exclusivelly as a part of the element development.

Thanks for including accessibility as a part of your general UX work.

[kittykat]

@pvagner Thank you for taking the time to write such a detailed update on how you use accessibility features to navigate. Do you feel that this issue is now suitably resolved to be closed?

[kittykat]

I'm going to close this issue for now as the app has changed significantly and the ordering has been addressed as part of the changes. If anyone feels that it should still be open, please reply with @kittykat and details of what remains to be resolved.