Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improvement: a11y: arrow-key navigation for messages #4294

Draft
wants to merge 9 commits into
base: main
Choose a base branch
from

Conversation

WofWca
Copy link
Collaborator

@WofWca WofWca commented Oct 30, 2024

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: 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

@WofWca WofWca added accessibility enhancement New feature or request labels Oct 30, 2024
@WofWca WofWca force-pushed the wofwca/roving-tabindex-for-messages branch from 21857cf to 901f71c Compare October 30, 2024 16:18
@WofWca WofWca changed the title WIP: improvement: a11y: arrow-key navigation for messages improvement: a11y: arrow-key navigation for messages Oct 30, 2024
@WofWca WofWca force-pushed the wofwca/roving-tabindex-for-messages branch 3 times, most recently from 6db255c to 1d35935 Compare October 31, 2024 10:50
@WofWca WofWca force-pushed the wofwca/roving-tabindex-for-messages branch from 1d35935 to fe5b337 Compare November 3, 2024 09:33
@WofWca WofWca force-pushed the wofwca/roving-tabindex-for-messages branch from fe5b337 to 69a0780 Compare December 19, 2024 13:50
@WofWca WofWca force-pushed the wofwca/roving-tabindex-for-messages branch from 69a0780 to 0406c54 Compare December 19, 2024 14:16
- Author name in MessageList
- Author avatar in MessageList
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.

This appears to implement the Grid pattern:
https://www.w3.org/WAI/ARIA/apg/patterns/grid/.
@WofWca
Copy link
Collaborator Author

WofWca commented Dec 23, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Accessibility: Make the individual chat list more accessible.
1 participant