improvement: a11y: arrow-key navigation for messages

[WofWca]

2024-10-30-0C6LIUUYry.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.
  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.
• Some jumpToMessage calls 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.
  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.