Description
Description
Current Behavior
When rendering a masonry layout (Pinterest-style layout) using multiple columns in React Native, Android TalkBack does not follow the visual reading order of the items.
Instead, TalkBack traverses the accessibility hierarchy based on the underlying view structure and focus search algorithm. As a result, items may be announced in an unexpected order or appear to be skipped when adjacent columns contain items with different heights.
For example, the visual layout is:
+----------------------+----------------------+
| Card 1 (Tall) | Card 2 |
| +----------------------+
| | Card 3 |
+----------------------+----------------------+
| Card 4 | Card 5 |
+----------------------+----------------------+
Expected Behavior
TalkBack should announce items in the same logical order as users visually perceive them, for example:
Card 1
Card 2
Card 3
Card 4
Card 5
Actual Behavior
TalkBack announces items based on the accessibility hierarchy and native focus traversal, for example:
Card 1
Card 4
Card 2
Card 3
Card 5
or another order depending on the relative sizes and positions of the items.
This creates a confusing experience for screen reader users because the spoken order no longer matches the visual layout.
Accessibility traversal should follow a predictable logical order that matches the visual reading order of the masonry layout.
Actual Result
Accessibility traversal follows the native accessibility hierarchy and focus search algorithm, causing items to be announced out of visual order or appear to be skipped.
Additional Information
The issue occurs because React Native masonry implementations typically render multiple independent columns (for example, multiple FlatLists or nested Views). Android TalkBack determines traversal order from the accessibility tree rather than the visual layout.
Android provides native APIs such as:
accessibilityTraversalBefore
accessibilityTraversalAfter
However, these traversal APIs are not exposed by React Native, making it difficult to define a logical accessibility order while preserving a masonry layout.
Environment
React Native: 0.75.2
Platform: Android
Screen Reader: TalkBack
Layout: Masonry (variable height cards, two columns)
Steps to reproduce
Create a masonry layout with two columns.
Populate each column with cards of varying heights.
Enable Android TalkBack.
Navigate through the cards using swipe gestures.
Observe that TalkBack announces cards in a different order than their visual appearance.
Expected Result
React Native Version
0.81.4
Affected Platforms
Runtime - Android
Output of npx @react-native-community/cli info
CocoaPods:
version: 1.16.2
Stacktrace or Logs
MANDATORY Reproducer
https://github.com/Dhaval1905
Screenshots and Videos
No response
Description
Description
Current Behavior
When rendering a masonry layout (Pinterest-style layout) using multiple columns in React Native, Android TalkBack does not follow the visual reading order of the items.
Instead, TalkBack traverses the accessibility hierarchy based on the underlying view structure and focus search algorithm. As a result, items may be announced in an unexpected order or appear to be skipped when adjacent columns contain items with different heights.
For example, the visual layout is:
+----------------------+----------------------+
| Card 1 (Tall) | Card 2 |
| +----------------------+
| | Card 3 |
+----------------------+----------------------+
| Card 4 | Card 5 |
+----------------------+----------------------+
Expected Behavior
TalkBack should announce items in the same logical order as users visually perceive them, for example:
Card 1
Card 2
Card 3
Card 4
Card 5
Actual Behavior
TalkBack announces items based on the accessibility hierarchy and native focus traversal, for example:
Card 1
Card 4
Card 2
Card 3
Card 5
or another order depending on the relative sizes and positions of the items.
This creates a confusing experience for screen reader users because the spoken order no longer matches the visual layout.
Accessibility traversal should follow a predictable logical order that matches the visual reading order of the masonry layout.
Actual Result
Accessibility traversal follows the native accessibility hierarchy and focus search algorithm, causing items to be announced out of visual order or appear to be skipped.
Additional Information
The issue occurs because React Native masonry implementations typically render multiple independent columns (for example, multiple FlatLists or nested Views). Android TalkBack determines traversal order from the accessibility tree rather than the visual layout.
Android provides native APIs such as:
accessibilityTraversalBefore
accessibilityTraversalAfter
However, these traversal APIs are not exposed by React Native, making it difficult to define a logical accessibility order while preserving a masonry layout.
Environment
React Native: 0.75.2
Platform: Android
Screen Reader: TalkBack
Layout: Masonry (variable height cards, two columns)
Steps to reproduce
Create a masonry layout with two columns.
Populate each column with cards of varying heights.
Enable Android TalkBack.
Navigate through the cards using swipe gestures.
Observe that TalkBack announces cards in a different order than their visual appearance.
Expected Result
React Native Version
0.81.4
Affected Platforms
Runtime - Android
Output of
npx @react-native-community/cli infoStacktrace or Logs
MANDATORY Reproducer
https://github.com/Dhaval1905
Screenshots and Videos
No response