improvement: a11y: arrow-key navigation for messages

[WofWca]

roving-tabindex-messages.mp4

Based on #4291

Closes #2141

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.
• 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