improvement: a11y: arrow-key navigation for messages

[WofWca]

roving-tabindex-messages.mp4

Closes #2141.
Together with other previously merged MRs, closes #4127.

Basically what this commit comes down to:

1. Apply useRovingTabindex for message items
2. Set tabindex="-1" on all the interactive items
   inside every message that is currently not the active one,
   so that they do no have tab stops.

TODO:

• Address the TODOs in the code
• Manage what's gonna be the initially active message,
  because initially they're all active, so
  tabbing to the messages list from the top selects
  the first rendered one as the active one.
  WIP: refactor: useRovingTabindex to utilize IDs #4292
  could help with this.
  And remember that the messages list is dynamic (a new message can arrive), so simply setting the last one as active once won't cut it.
  This is also not great for performance: changing tabindex
  on a bunch of messages makes them all re-render.
  And otherwise, we probably want to update which one is
  the active one as new messages arrive.
  Perhaps we can simply implement the "End" shortcut as sort of a workaround for now: improvement: a11y: roving tabindex: End / Home #4438
• Some jumpToMessage calls probably ought to focus the message. For example, when jumping to a message through a click on a quote, or a webxdc info message. But not all jumpToMessage should change focus. For example, receiving a new message shouldn't do it. This probably requires that we add a focus parameter to jumpToMessage. Perhaps even 2 parameters: whether to set the message as the active one in the messages list (without focusing it), and whether to focus it. But consider the fact that then the composer will be blurred and will have to be manually focused.
  This can be done in further MRs.
• The interactive items with onClick must be actual semantic
  <button>s.
  See improvement: improve a11y #4210
  for reference.
  Namely, this goes for Attachment, and all the onClick listeners in Message.ts.
  Update: here is an MR: improvement: a11y: turn more elements into <button>s #4429
• Set tabindex on <video> and <audio>
• Does onFocus work? Does clicking something inside a message make that message the active one?
• Same for onKeyDown. Does pressing an arrow key when a child element is focused switch the active message?
• Some interactive contents, namely videos and audios, utilize arrow keys, i.e. for seeking, changing volume. We must not invoke our onKeyDown handler in such cases, switching focus to a different message.
  FYI This also applies to audios in gallery, see improvement: a11y: add arrow-key nav to gallery #4376
• Shift + F10 on a webxdc info message, then "Reply" causes the webxdc app to open. This is similar (or the same?) as Activating "Message info" in context menu with keyboard does nothing #4242
• Looks like we need to set role attributes so that things like NVDA don't override the arrow key presses to manage focus on their own. See "How do I disable NVDA's arrow key navigation". role is also mentioned in https://www.w3.org/WAI/ARIA/apg/patterns/listbox/.
  The example that MDN links to uses role="application" on the list. I tried setting role="application" on our <ul> that contains the messages and it started working, but I am not sure if this is correct.
  I created a separate issue: arrow key navigation widgets don't work well with NVDA #4444
• As mentioned below, "react" doesn't work: you can't navigate the reaction picker with keyboard, and cannot close it.

[WofWca]

I would say this is almost ready to be merged, now waiting for #4376, the rest of the TODOs can be addressed in separate MRs

[WofWca]

OK, this is finally ready for review and for merge IMO.
I will create separate issues for the remaining TODO items. Otherwise I think this is an improvement.

[nicodh]

So far all my tests were fine!

There is an issue with the reactions. You can open them with key navigation but neither select a reaction nor close the picker again. But that could go into a separate issue

What is still missing imho, is to mention the new features in the keybindings documentation. WHat is the plan about that?

[WofWca]

What is still missing imho, is to mention the new features in the keybindings documentation. WHat is the plan about that?

IDK about that. I wouldn't call those "shortcuts". For example, WhatsApp doesn't have them listed as such. This is basically just an improvement to tab navigation, and I think using arrow keys for long lists is pretty standard.
Especially given the fact that you cannot navigate messages with keys other than arrow keys, so users will learn it naturally I think.

But I don't mind if we still explicitly document it.