RocketChat / RocketChat/Rocket.Chat.ReactNative

[BUG] Wrong message order makes app incompatible with screen readers (for visually impaired)

Open
#1,659 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

🐛 bug
Dominant language
TypeScript
Stars
2.4k
Forks
1.5k
Avg merge
1d 18h
Merged PRs (30d)
90

Description

Describe the bug

Android phones come with "TalkBack", a built-in screen reader, which is an accessibility app, that reads the content of the screen to visually impaired people. Rocket.chat app is incompatible with TalkBack, because when a user selects more than one message in Rocket.chat with TalkBack, they are read in reverse order (last message is read first). This causes Rocket.chat to be impractical to visually impaired people, since they need to select each message separately if they want to hear the conversation in correct order.

To Reproduce

  1. Enable TalkBack on your Android device.
  2. Open Rocket.chat, go to any channel.
  3. Using a TalkBack function make a selection that contains more than one message.
  4. TalkBack reads messages in reverse order: first the message at the bottom of the screen (latest), then the message above it (earlier one), then one above it (even earlier one) and so on.

Expected behavior

TalkBack should read messages in the correct chronological order (top to bottom). This is a problem with Rocket.Chat, as all other chat apps work correctly with TalkBack (FB Messenger, Slack, SMS apps, Signal etc.)

Screenshots

Correct behavior in Slack:
User selects some messages:
bug1
TalkBack starts reading from the top one:
bug2

Wrong behavior in Rocket.chat:
User selects some messages:
bug3
TalkBack starts reading the lowest message first, and then reads the top one (reverse order):
bug4

Devices and Versions

Bug exists in latest stable and experimental version of the app, independent of device version.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Enable TalkBack on an Android device, open a channel, and reproduce the multi-message selection described in the issue. Trace the message selection and accessibility reading order, then verify that selected messages are read chronologically from top to bottom.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, react-native, typescript
Domain
accessibility, mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.