Inverted FlatList accessibility order

[zarubond]

Description

In normal FlatList the accessibility focus order is from top to bottom but applying inverted property makes the order swap to bottom to top. This breaks the accessibility navigation flow as it is assumed that it should go from top of the screen to the bottom.

React Native version:

RN 0.63 and Android 9 with enabled TalkBack

Steps To Reproduce

Use FlatList component like

<FlatList ... inverted={ true } />

Expected Results

The order of items should stay inverted but the accessibility order should be maintained top to bottom.

Snack, code example, screenshot, or link to a repository:

Please provide a Snack (https://snack.expo.io/), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.
You may provide a screenshot of the application if you think it is relevant to your bug report.
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[teod]

are there any updates for this ticket ?

[grgr-dkrk]

I had the same problem.

The VirtualizedList implementation seems to styling transform: [{scaleY: -1}] to reverse the order.
This does not guarantee the reading order of the screen reader as it only changes the visual order.
https://github.com/facebook/react-native/blob/b28fa2dae061cff829e00afec565fe8a05ef0a5a/Libraries/Lists/VirtualizedList.js#L864-L868

I don't understand the implementation context, but changing this to flexDirection: column-reverse seems to solve it.
Is it impossible?

[teod]

I had the same problem.

The VirtualizedList implementation seems to styling transform: [{scaleY: -1}] to reverse the order.
This does not guarantee the reading order of the screen reader as it only changes the visual order.
https://github.com/facebook/react-native/blob/b28fa2dae061cff829e00afec565fe8a05ef0a5a/Libraries/Lists/VirtualizedList.js#L864-L868

I don't understand the implementation context, but changing this to flexDirection: column-reverse seems to solve it.
Is it impossible?

unfortunately this will "break" scroll and infinite loading pagination

[mallenexpensify]

We're interested in getting this issue fixed and willing to compensate to do so. View issue Expensify/App#1341

[sfuqua]

Is it possible to add the "Accessibility" tag to this issue? Not sure how closely the task board is still being tracked but this is a pretty fundamental issue for Android in an important control.

This breaks Android screen reader support in any inverted list which is common e.g. for chat scenarios.

[MaksDubois]

I had the same problem. Are there any updates for this ticket ?

[fabOnReact]

One possible solution would be not using transform to visually invert the list.
The solution may also fix existing issues #17553 (comment) (using transform causes unexpected behavior for ex. showing activity indicator at the bottom instead of the top of the flatlist).

• Evaluate the performance implications of using transform vs JavaScript vs Native Solution

Android/iOS Solution

• finding existing native Android/iOS API to reverse the ScrollView
• reverse the list in java/objc and start from the bottom

Javascript Solution

tasks - planning a solution for the issue

• Create an initial example of the solution with Expo.
• inverting the order of the list in Javascript
  for ex. [1,2,3].reverse() ==> [3,2,1]
  [{ key: 1, text: "1"}, { key: 2, text: "2"}, { key: 3, text: "3"}] =>
  [{ key: 3, text: "3"}, { key: 2, text: "2"}, { key: 1, text: "1"}]
• starting position needs to be the end of the FlatList (initialScrollIndex)

• test solution on horizontal flatlist
• try to invert the order of the cells after the first page
• implement the scroll to bottom optimization for inverted FlatList (more info)
• test talkback on draft solution
• use initialScrollIndex to start from bottom, but keep scrollToBottom optimization developed with commit fabOnReact@5b2cb47
• test different scenarios and different data, for ex. VirtualizedList accept data different from Array and user can pass getItem and over-ride those functionality. Recreate use case and test for regressions there are no modifications that may cause regressions
• prop getItemLayout prop to optimize performances (more info) not required with this solution, but instead could implement android method to scroll to the bottom/top Inverted FlatList accessibility order #30373 (comment)
• nested FlatList with different orientation does not scroll to the end when inverted
• improve solution added in callback _onContentSizeChange to handle new items added and pros.initialScrollIndex is not null
• test last item removal [Android][Flatlist][Horizontal] Last item delete in horizontal flatlist does not adjust scroll position. #27504 (video test case)
• test talkback Inverted FlatList accessibility order #30373 (comment)
• test iOS and VoiceOver
• understand root cause that does not allow inverted FlatList to scrollUp when new item is added
  - to understand the reason, look into the logic triggering the scrollDown in the normal FlatList
  - read sourcecode related to onContentSizeChanged or onUpdate
• test nested horizontal inverted flatlist starts scrolled to the end
• test children should not be inverted if nested in a FlatList with prop inverted
• not inverted flatlist should scroll down when new item is added
• review CI test failures
• fix CircleCI issues
• add check on isScreenreaderEnabled and Android Platform
• fix regression changing indexes
• add API maintainVisibleContentPosition
• use/test API maintainVisibleContentPosition to avoid scrollUp/down when adding/removing items
• use mantainVisibleContentPosition to over-ride default ScrollView behaviour when appending/prepending items
• debug scrollMaintainVisibleContentPosition and understand issue with minIndexForVisible
• add a summary to Pull Request explaining the changes
• add a links to relevant tests in the Pull Request summary
• review PR and make further improvements

[fabOnReact]

FlatList inverted - The accessibility focus order is from top to bottom, but applying FlatList inverted property makes the order swap to bottom to top

Example
https://snack.expo.dev/@fabrizio.bertoglio/inverted-flatlist

Inverted set to false

inverted_false_480.mp4

Inverted set to true

inverted_true_480.mp4

Manually inverted FlatList - does not cause issues with TalkBack

https://snack.expo.dev/@fabrizio.bertoglio/manually-inverting-flatlist

invert_manually_in_js_480.mp4

[fabOnReact]

Evaluate the performance implications of using transform vs JavaScript vs Native Solution.

Transform
The implementation of transform includes:

• Fabric C++ logic included in the Transform.cpp class (for ex. the implementation of Translate)
• iOS implementation - Transform.m
• Android implementation - BaseViewManager#setTransformProperty, TransformHelper#processTransform and for the translationX property the AOSP method View#setTranslationX

Reverse Array instead of using Transform
O(n) time and O(1) space