Accessible navigation on messages in a room

[adns44]

Steps to reproduce

Hello!

In JAWS screen reader there are two modes to use a web page, it is web reading (virtual PC cursor) and normal PC cursor without web reading. I can only use element desktop and web APP when I turn the virtual PC cursor on. My problem (Messenger and Discord affected too) that the webapp reloads the content usualy, when I scroll on messages or a new message arriwing. This makes very unusable the frontend because JAWS jumps on the site.

Discord found a solution for this problem. The message list (same as in element, OL list) has li items that contains div elements with role="article" and labeled by the message details. Contains the sender name, a reply keyword and the replied message's sender, the message's text content and the timestamp when it sent.
It is important that if it is a reply, the original message not included in the aria-label because the original message readable by tab because in DC it is a button and in Element it is a link.

I tried to clone the code repo and make a solution to try it but I don't have success because the code base too complex for me. So I tried to solve the problem in a new react program with example list elements and I write my experiences. Hoppe that helps to improve Element.

The final solution is that give the uper written label to li element with role article. I don't know that a pure li element or a div in a li element is the better solution, but the role and aria-label are important. For the navigation use the focus() on the prev and next message's ref when press the up or down arrow key on one. Important to follow the user because up and down moves between the message but tab key can focus the history message link (if exists), message toolbar and profile button so with tab I can change the focus too to the prev and next msg. However, navigating between messages and reading purely it's text easier with up and down arrow. With this solution we can avoid the JAWS slow responding on dinamicaly updating webpages and we can avoid the random jumping.

I hoppe that I wrote every details that helps fixing the issue but I gladly provide more information if neccessary.

Outcome

I wrote a longer review at steps to reproduce.

Operating system

Windows 10

Application version

Element version: 1.11.29 Olm version: 3.2.12

How did you install the app?

https://element.io/download

Homeserver

Latest Synapse docker image https://hub.docker.com/r/matrixdotorg/synapse

Will you send logs?

No

[fcnjd]

Thank you for pointing out your findings. I also tried to do it myself, but sadly the SDK is made in React which mixes up TypeScript and HTML, making it more difficult for us users of screenreaders and Braille displays find what we're looking for since larger files need to be searched. As an additional comment: WhatsApp web also solved this problem by making all rows focusable using up and down arrow keys.
I'm looking forward to working with you together on solving this issue, and would be very happy to see an improvement soon.