Accessibility: Grid component does not work with screen readers

[MarcoZehe]

• Operating System (Linux/Mac/Windows/iOS/Android): All desktop
• Delta Chat Version: 1.14
• Expected behavior: Screen readers should be able to interact with the items within the ReactVirtual__Grid component.
• Actual behavior: Screen readers like VoiceOver on the Mac, and JAWS on Windows, have trouble finding the individual items inside the component. The structure is a table with button children, which is an invalid accessibility hierarchy. Tables are only allowed to hve rows, and those are only allowed to have cells.
• Steps to reproduce the problem: Install DeltaChat and log in. On the Mac, turn on VoiceOver by holding down CMD and triple-clicking the TouchID button, or pressing F5 if your Mac has a standard function key row. On Windows, it's more complicated because JAWS is a paid product. But the Mac problem should give you a good idea. Try to interact with the grid that contains the buttons for the conversations. VoiceOver won't find any even though they are clearly present.
• Screenshots: N/A
• Logs: N/A , no crash.

Proposed solution

Since the role is inherited from the React Grid component, it should be overridden in the ChatList.ts file with something more appropriate. Possible solutions:

1. The <list> component gets a role of "region", and an aria-label of "Chats". The individual entries that current have a role of "button" stay as they are.
2. The <list> component gets a role of "table", and each item that is currently a role of "button" gets a role of "row". The <avatar>and other children that contain individual bits of information get a role of "cell" each. That way, this is presented to screen readers as a true table where they can query the individual items of each entry. Right now, the button role causes all of that info to be mingled together, because technically, buttons aren't allowed to have accessible children.
3. The <list> component gets a role of "listbox", and each item that now is a role "button" becomes a role "option". But then, proper keyboard and focus handling must be implemented as well, as stated in the listbox design pattern. The proposed interaction would be that using arrows would just change the selection, and pressing Enter would actually open the selected conversation, like double-clicking. Otherwise, each arrow key press would immediately load the new conversation, which may cause delays.

In short, option 2 would put the burden on the screen reader, and would still not work for keyboard users. Option 3 would be the correct implementation for this widget.

[ghost]

Thanks @MarcoZehe for opening the issue. I think it's very important to be able to make Delta Chat as accessible as possible.

[bdorer]

Please note: To test this and other accessibility tickets you could use an opensource screenreader called NVDA found on nvaccess.com or github.com/nvaccess/nvda.