fix(android): correct accessibility focus order in inverted FlatList by OtavioStasiak · Pull Request #6934 · RocketChat/Rocket.Chat.ReactNative

OtavioStasiak · 2026-01-20T16:34:17Z

Proposed changes

create a native module to use a native ScrollView component that uses a11y children in the right order.

Issue(s)

https://rocketchat.atlassian.net/browse/MA-96

How to test or reproduce

Open the app;
Navigate to RoomView;
Turn TalkBack on;
Navigate to the list and move down;
Scroll up using a three-finger gesture;
Try to focus on the older messages;

Screenshots

Types of changes

Bugfix (non-breaking change which fixes an issue)
Improvement (non-breaking change which improves a current function)
New feature (non-breaking change which adds functionality)
Documentation update (if none of the other choices apply)

Checklist

I have read the CONTRIBUTING doc
I have signed the CLA
Lint and unit tests pass locally with my changes
I have added tests that prove my fix is effective or that my feature works (if applicable)
I have added necessary documentation (if applicable)
Any dependent changes have been merged and published in downstream modules

Further comments

Summary by CodeRabbit

Bug Fixes
- Fixed Android screen-reader (TalkBack) traversal for inverted (newest-first) lists so accessibility follows visual order.
New Features
- Added Android-native inverted-scroll support and an Android-only scroll wrapper component.
- Non-iOS list rendering now uses the new inverted-scroll wrapper for correct inverted-list behavior, improved scrolling, and sticky header handling.

… Android

coderabbitai · 2026-01-20T16:34:44Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

Walkthrough

Adds Android-native inverted scroll views, content view, view managers, and a React Native package; registers the package in MainApplication. Introduces an Android-only TSX wrapper component and uses it as the FlatList scroll component on non-iOS platforms. Accessibility traversal order is reversed to match the visual newest-first order.

Changes

Cohort / File(s)	Summary
Android Native Views `android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollView.java`, `android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollContentView.java`	New native view classes (extend ReactScrollView / ReactViewGroup). Add inversion flag and override `addChildrenForAccessibility(...)` to reverse accessibility child order for inverted (newest-first) lists.
Android View Managers `android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollViewManager.java`, `android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollContentViewManager.java`	New ReactModule view managers exposing `REACT_CLASS`, `getName()` and `createViewInstance(...)` to instantiate the inverted native views.
Android Package & Registration `android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollPackage.java`, `android/app/src/main/java/chat/rocket/reactnative/MainApplication.kt`	New `InvertedScrollPackage` registers view managers; package added to the app's native package list in `MainApplication.kt`.
React Native wrapper & usage `app/views/RoomView/List/components/InvertedScrollView.tsx`, `app/views/RoomView/List/components/List.tsx`	New Android-only TSX component wiring native views via `requireNativeComponent`; forwards/merges refs and scroll methods, handles layout/content-size/sticky headers. `List.tsx` uses it as `renderScrollComponent` on non-iOS platforms.

Sequence Diagram(s)

sequenceDiagram
  participant JS as React (FlatList)
  participant RN as React Native Bridge
  participant Native as InvertedScrollView / InvertedScrollContentView
  participant A11y as Android TalkBack

  JS->>RN: renderScrollComponent -> InvertedScrollView
  RN->>Native: createViewInstance(ThemedReactContext)
  Native->>Native: mount children in inverted newest-first order
  A11y->>Native: request accessibility children traversal
  Native-->>A11y: return reversed children list to match visual order
  A11y-->>JS: user navigates (TalkBack follows visual order)

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰 I flipped the feed with nimble feet,
TalkBack hops where new messages meet,
Children now march fresh to old,
Navigation follows what you behold,
A tiny flip — accessibility sweet!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 7.69% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main change: implementing a fix for accessibility focus order in inverted FlatList on Android.
Linked Issues check	✅ Passed	The implementation correctly addresses MA-96 by adding native Android components that reverse accessibility children ordering in inverted scroll views, ensuring TalkBack traversal matches visual order.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing inverted FlatList accessibility on Android; no unrelated modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-01-20T19:44:53Z

Android Build Available

Rocket.Chat Experimental 4.69.0.108196

Internal App Sharing: https://play.google.com/apps/test/RQVpXLytHNc/ahAO29uNTlK_aaCydNoR8tL0LU9ha91x4SUn6F8LQ_l7193fkFssxP1kKCqvtZvuPhoyE9s7WolKu01pF8dITARNJC

app/views/RoomView/List/components/InvertedScrollView.tsx

coderabbitai

🧹 Nitpick comments (1)

app/views/RoomView/List/components/InvertedScrollView.tsx (1)
54-92: Method patching logic is sound; minor nit on nullish coalescing.

The useLayoutEffect with [] deps correctly patches methods once after mount. The setNativeProps fallback is now safe (no recursive call — good fix from prior feedback).

One small note on Lines 62–63: options?.x || 0 uses logical OR, which coerces all falsy values (including 0) to the default. Since 0 is also the desired default here, behavior is correct, but ?? 0 is more semantically precise and avoids surprising readers who expect || to swallow valid 0 values.
Suggested diff
-				const x = options?.x || 0;
-				const y = options?.y || 0;
+				const x = options?.x ?? 0;
+				const y = options?.y ?? 0;
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@app/views/RoomView/List/components/InvertedScrollView.tsx` around lines 54 -
92, Update the nullish-coalescing for scroll coordinates in the patched scroll
methods: in the node.scrollTo implementation change the x and y fallbacks from
using logical OR to nullish coalescing (replace uses of options?.x || 0 and
options?.y || 0 with options?.x ?? 0 and options?.y ?? 0) so that explicit 0
values are preserved; leave other logic in scrollTo, scrollToEnd,
flashScrollIndicators, getScrollRef, and the setNativeProps fallback unchanged.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ead814b and d141c30.

📒 Files selected for processing (1)

app/views/RoomView/List/components/InvertedScrollView.tsx

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: OtavioStasiak
Repo: RocketChat/Rocket.Chat.ReactNative PR: 6499
File: app/containers/ServerItem/index.tsx:34-36
Timestamp: 2025-12-17T15:56:22.578Z
Learning: In the Rocket.Chat React Native codebase, for radio button components on iOS, include the selection state ("Selected"/"Unselected") in the accessibilityLabel instead of using accessibilityState={{ checked: hasCheck }}, because iOS VoiceOver has known issues with accessibilityRole="radio" + accessibilityState that prevent correct state announcement.

🧬 Code graph analysis (1)

app/views/RoomView/List/components/InvertedScrollView.tsx (2)

jest.setup.js (1)

React (179-179)

android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollView.java (1)

InvertedScrollView (13-36)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: ESLint and Test / run-eslint-and-test
GitHub Check: format

🔇 Additional comments (2)

app/views/RoomView/List/components/InvertedScrollView.tsx (2)

1-49: Types and native component wiring look good.

The type definitions, command constants, and requireNativeComponent usage are well-structured. The IScrollableMethods interface cleanly defines the scroll API surface, and the exported InvertedScrollViewRef intersection type provides a correct public API.

135-152: Render path and content view wiring look correct.

The conditional removeClippedSubviews handling for sticky headers (Line 145), the collapsableChildren flag driven by preserveChildren (Line 147), and the content-size-change proxy via onLayout (Lines 121–129) are all implemented correctly. The null guard at Line 135 is defensive — requireNativeComponent won't return null at runtime, but it doesn't hurt.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@app/views/RoomView/List/components/InvertedScrollView.tsx`:
- Around line 94-103: The setRef callback currently forwards the native node to
externalRef immediately, but the IScrollableMethods (scrollTo, scrollToEnd,
etc.) are only attached in useLayoutEffect, so consumers who call those methods
synchronously from their own ref callback may see undefined; add a concise
inline comment next to setRef (referencing setRef, internalRef, externalRef,
InvertedScrollViewRef, and useLayoutEffect) explaining that the node is exposed
during commit and that scroll methods are attached in useLayoutEffect so callers
should access them in effects/handlers (not synchronously) to avoid undefined.
- Around line 105-114: The component destructures
maintainVisibleContentPosition, snapToAlignment, and stickyHeaderIndices out of
props and uses them for local flags (preserveChildren, hasStickyHeaders) but
then omits them from restWithoutStyle and never forwards them to the underlying
<ScrollView> in InvertedScrollView component; update the props forwarding so
that maintainVisibleContentPosition, snapToAlignment, and stickyHeaderIndices
are included in the props passed to ScrollView (or merged into restWithoutStyle)
so the native InvertedScrollView/ReactScrollView receives and honors these
behaviors (refer to the props named maintainVisibleContentPosition,
snapToAlignment, stickyHeaderIndices, the local flags preserveChildren and
hasStickyHeaders, and the restWithoutStyle/rest spread used when rendering
ScrollView).

---

Nitpick comments:
In `@app/views/RoomView/List/components/InvertedScrollView.tsx`:
- Around line 54-92: Update the nullish-coalescing for scroll coordinates in the
patched scroll methods: in the node.scrollTo implementation change the x and y
fallbacks from using logical OR to nullish coalescing (replace uses of
options?.x || 0 and options?.y || 0 with options?.x ?? 0 and options?.y ?? 0) so
that explicit 0 values are preserved; leave other logic in scrollTo,
scrollToEnd, flashScrollIndicators, getScrollRef, and the setNativeProps
fallback unchanged.

github-actions · 2026-02-24T18:41:01Z

Android Build Available

Rocket.Chat Experimental 4.70.0.108306

Internal App Sharing: https://play.google.com/apps/test/RQVpXLytHNc/ahAO29uNQxWrO-cfGsXuFS2Sf_YOVx3DvMIBnBQ79Pq8is9RsxqlGijJxAlzg83If3KQlS176emsdVolgi5tEInor1

github-actions · 2026-02-24T18:44:52Z

Android Build Available

Rocket.Chat 4.70.0.108308

Internal App Sharing: https://play.google.com/apps/test/RQQ8k09hlnQ/ahAO29uNRTbaAkJcOk3mRA56UjOCyuT7vr2pmVUuYevmgPVYoojDIojFqkRb1OaHRy2E9Tuh1rcJoQSJ2b_7sGOD9q

github-actions · 2026-02-24T19:00:56Z

iOS Build Available

Rocket.Chat Experimental 4.70.0.108309

github-actions · 2026-02-26T14:33:32Z

Android Build Available

Rocket.Chat 4.70.0.108308

github-actions · 2026-02-26T14:41:56Z

iOS Build Available

Rocket.Chat 4.70.0.108307

OtavioStasiak added 4 commits January 9, 2026 11:34

patch package to not invert the a11y order

6f30628

feat: a11yInvertedView manager

8d73ba9

fix(a11y): Fix accessibility traversal order for inverted FlatList on…

3db3a52

… Android

fix: use the default a11y behavior

8362a92

OtavioStasiak had a problem deploying to approve_e2e_testing January 20, 2026 16:34 — with GitHub Actions Error

Merge branch 'develop' into test.flatlist-inverted-content

8ac5ccf

OtavioStasiak had a problem deploying to approve_e2e_testing January 20, 2026 16:35 — with GitHub Actions Error

OtavioStasiak had a problem deploying to official_ios_build January 20, 2026 16:38 — with GitHub Actions Error

OtavioStasiak had a problem deploying to experimental_ios_build January 20, 2026 16:38 — with GitHub Actions Error

OtavioStasiak temporarily deployed to experimental_android_build January 20, 2026 16:38 — with GitHub Actions Inactive

OtavioStasiak had a problem deploying to official_android_build January 20, 2026 16:38 — with GitHub Actions Error

fix: build

c3da7dd

OtavioStasiak had a problem deploying to approve_e2e_testing January 20, 2026 17:21 — with GitHub Actions Error

lock

37c7701

OtavioStasiak had a problem deploying to approve_e2e_testing January 20, 2026 17:29 — with GitHub Actions Error

OtavioStasiak temporarily deployed to experimental_android_build January 20, 2026 17:34 — with GitHub Actions Inactive

OtavioStasiak had a problem deploying to experimental_ios_build January 20, 2026 17:34 — with GitHub Actions Error

OtavioStasiak requested a deployment to official_android_build January 20, 2026 17:34 — with GitHub Actions Waiting

OtavioStasiak had a problem deploying to official_ios_build January 20, 2026 17:34 — with GitHub Actions Error

timeout

4d4d572

OtavioStasiak had a problem deploying to approve_e2e_testing January 20, 2026 18:21 — with GitHub Actions Error

OtavioStasiak had a problem deploying to official_android_build January 20, 2026 18:24 — with GitHub Actions Error

OtavioStasiak had a problem deploying to official_ios_build January 20, 2026 18:24 — with GitHub Actions Error

OtavioStasiak had a problem deploying to experimental_ios_build January 20, 2026 18:24 — with GitHub Actions Error

OtavioStasiak temporarily deployed to experimental_android_build January 20, 2026 18:24 — with GitHub Actions Inactive

OtavioStasiak had a problem deploying to upload_experimental_android January 20, 2026 19:43 — with GitHub Actions Error

Merge branch 'develop' into test.flatlist-inverted-content

98f7dc9

OtavioStasiak temporarily deployed to approve_e2e_testing January 27, 2026 18:34 — with GitHub Actions Inactive

OtavioStasiak had a problem deploying to experimental_android_build February 9, 2026 17:26 — with GitHub Actions Error

OtavioStasiak had a problem deploying to official_android_build February 9, 2026 17:26 — with GitHub Actions Error

diegolmello approved these changes Feb 18, 2026

View reviewed changes

app/views/RoomView/List/components/InvertedScrollView.tsx Outdated Show resolved Hide resolved

Merge branch 'develop' into test.flatlist-inverted-content

84693e9

OtavioStasiak had a problem deploying to approve_e2e_testing February 20, 2026 13:13 — with GitHub Actions Error

OtavioStasiak had a problem deploying to official_android_build February 20, 2026 13:17 — with GitHub Actions Error

OtavioStasiak had a problem deploying to official_ios_build February 20, 2026 13:17 — with GitHub Actions Error

OtavioStasiak had a problem deploying to experimental_android_build February 20, 2026 13:17 — with GitHub Actions Error

OtavioStasiak had a problem deploying to experimental_ios_build February 20, 2026 13:17 — with GitHub Actions Error

chore: remove isAndroid verification

d141c30

OtavioStasiak temporarily deployed to approve_e2e_testing February 20, 2026 13:50 — with GitHub Actions Inactive

OtavioStasiak had a problem deploying to official_ios_build February 20, 2026 13:54 — with GitHub Actions Error

OtavioStasiak had a problem deploying to experimental_ios_build February 20, 2026 13:54 — with GitHub Actions Error

OtavioStasiak had a problem deploying to official_android_build February 20, 2026 13:54 — with GitHub Actions Error

OtavioStasiak had a problem deploying to experimental_android_build February 20, 2026 13:54 — with GitHub Actions Error

coderabbitai bot reviewed Feb 20, 2026

View reviewed changes

OtavioStasiak had a problem deploying to experimental_android_build February 20, 2026 17:06 — with GitHub Actions Error

OtavioStasiak had a problem deploying to experimental_ios_build February 20, 2026 17:06 — with GitHub Actions Error

OtavioStasiak had a problem deploying to official_android_build February 20, 2026 17:06 — with GitHub Actions Error

OtavioStasiak had a problem deploying to official_ios_build February 20, 2026 17:06 — with GitHub Actions Error

OtavioStasiak had a problem deploying to official_ios_build February 20, 2026 18:29 — with GitHub Actions Error

OtavioStasiak added 3 commits February 20, 2026 23:55

Merge branch 'develop' into test.flatlist-inverted-content

417a489

Merge branch 'develop' into test.flatlist-inverted-content

6f69d26

Merge branch 'develop' into test.flatlist-inverted-content

8f9cf38

diegolmello mentioned this pull request Mar 5, 2026

regression: Touchables not working on old messages in some devices #7039

Merged

10 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(android): correct accessibility focus order in inverted FlatList#6934

fix(android): correct accessibility focus order in inverted FlatList#6934
OtavioStasiak merged 35 commits intodevelopfrom
test.flatlist-inverted-content

OtavioStasiak commented Jan 20, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Jan 20, 2026 •

edited

Loading

Reviews paused

❌ Failed checks (1 warning)

Uh oh!

github-actions bot commented Jan 20, 2026

Uh oh!

Uh oh!

coderabbitai bot left a comment

Uh oh!

github-actions bot commented Feb 24, 2026

Uh oh!

github-actions bot commented Feb 24, 2026

Uh oh!

github-actions bot commented Feb 24, 2026

Uh oh!

github-actions bot commented Feb 26, 2026

Uh oh!

github-actions bot commented Feb 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

OtavioStasiak commented Jan 20, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Issue(s)

How to test or reproduce

Screenshots

Types of changes

Checklist

Further comments

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

github-actions bot commented Jan 20, 2026

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Feb 24, 2026

Uh oh!

github-actions bot commented Feb 24, 2026

Uh oh!

github-actions bot commented Feb 24, 2026

Uh oh!

github-actions bot commented Feb 26, 2026

Uh oh!

github-actions bot commented Feb 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

OtavioStasiak commented Jan 20, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 20, 2026 •

edited

Loading