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.

react-native/Libraries/Lists/VirtualizedList.js

Lines 864 to 868 in b28fa2d

	const inversionStyle = this.props.inverted
	? this.props.horizontal
	? styles.horizontallyInverted
	: styles.verticallyInverted
	: null;

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.

react-native/Libraries/Lists/VirtualizedList.js

Lines 864 to 868 in b28fa2d

	const inversionStyle = this.props.inverted
	? this.props.horizontal
	? styles.horizontallyInverted
	: styles.verticallyInverted
	: null;

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 ?