[IOS]Accessibility issue: Voice over read out order for flatlist is incorrect

[PratibhaSomashekhara]

Description: Voice over read out for Items which are rendered using flatlist is not in right order. issue can be reproduced only in IOS and in android it works fine. I have multiple interactive elements within column. imagine columns containing favorite icon, image, multiline text and add button. Expected behavior: it should first read out favorite icon, image, multiline text and add button from column 1 and then the same from 2nd column. Actual behavior: currently it is reading following order favorite icon (column 1 ) --> favorite icon (column 2) --> image (column 1 ) --> image(column 2)---> multiline text (column 1 ) --> multiline text(column 2) --> add button(column 1) --> add button(column 2)

I tried this for simple demo and issue is easily reproducible.

Please provide a clear and concise description of what the bug is. Include screenshots if needed.
Please test using the latest React Native release to make sure your issue has not already been fixed: https://reactnative.dev/docs/upgrading.html

React Native version:
Run `react-native info` in your terminal and copy the results here.
   System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 7.10 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.13.0 - /usr/local/bin/node
    npm: 6.4.1 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  IDEs:
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5 
  npmGlobalPackages:
    create-react-native-app: 2.0.2
    react-native-cli: 2.0.1 

## Steps To Reproduce

    Provide a detailed list of steps that reproduce the issue.
    Issues without reproduction steps or code are likely to stall.

 import React from 'react';

import { StyleSheet, View, Text, Image, TouchableOpacity, SafeAreaView, FlatList, Dimensions, } from 'react-native';

const data = [
    { key: 'Apple', price:'$1.91 each' },
    { key: 'Organic Bananas, bunch', price:'$2.91/LB' },
    { key: 'Banana Babies', price:'$2.91 avg price' },
    { key: 'meat',price:'$20.91' },
    { key: 'Eggs' , price:'$12.91 avg price'},
    { key: 'Fish' , price:'$7.91 avg price'},
    { key: 'Green Apples', price:'$9.91 avg price' },
    { key: 'fresh fruits', price:'$6.91 avg price'},
    { key: 'Ice cream', price:'$2.91 avg price' }
];

const numColumns=2;

class App extends React.Component{ renderItem=({item,index})=>{ return(

Rollback

            <Text  style={styles.itemText}>{item.key}</Text>
            <TouchableOpacity>
                <Text style = {styles.button}>
                    ADD
                </Text>
            </TouchableOpacity>
            <Text style={styles.itemText}>{item.price}</Text>
        </View>
    )
};
render(){
    return(
        <SafeAreaView style={styles.container1}>
        <FlatList
            data={data}
            style={styles.container}
            renderItem={this.renderItem}
            numColumns={numColumns}
        />
        </SafeAreaView>
    );
}

}

const styles = StyleSheet.create({ container: { flex:1, marginVertical:20, }, container1: { flex: 1, }, item: { backgroundColor:"grey", alignItems:'center', justifyContent:'center', flex:1, margin:1, height:Dimensions.get('window').width/numColumns, }, itemText: { color:'#fff', paddingTop:5, }, itemText1: { flexDirection:'row', color:'red', paddingBottom:4, justifyContent:'flex-end' }, imageThumbnail: { justifyContent: 'center', alignItems: 'center', height: 100, }, button: { backgroundColor: '#DDDDDD', margin:4 }, });

export default App;

![IMG_1259](https://user-images.githubusercontent.com/21208851/76584819-05024f00-649a-11ea-95da-0109f48681c2.PNG)

## Expected Results

    Describe what you expected to happen.
    it should first read out favorite icon, image, multiline text and add button from  column 1 and 
    then the same from 2nd column. 

[PratibhaSomashekhara]

Hi Team, Is there any update for this issue

[RichardStolp]

Hi, A project for a company I currently work with is having the same issue as well. Is there an update for this issue? Thank you.

[felire]

Same issue here

[PratibhaSomashekhara]

Hi Team, Is there any update for above issue. is Flatlist not ADA compatible on IOS ?

[therealmbittarelli]

Also experiencing this issue - any insight?

[iscontre]

I'm hitting this issue myself. Has there been any updates on this? Also, seems like this issue might be related/duplicate to/of #33714 ?

[iscontre]

FWIW, I found the following entry in the react-native-community forum: Accessibility focus order in React Native, which has a workaround, but I believe it would be nice to have this as part of the react-native core.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.

[ArturKalach]

Hello there, It seems that it has been fixed in the new arch.

You also can use react-native-a11y-order, A11y.Group should help with this issue.

import { A11y, IndexCommands } from 'react-native-a11y-order';

// ...

export default function App() {
  return (
    <ScrollView
      style={styles.slider}
      contentContainerStyle={styles.sliderContainer}
      horizontal
    >
      <A11y.Group style={styles.slide}>
        <View>
          <Text>Title: 1</Text>
        </View>
        <View>
          <Text>Desctiption: 1</Text>
        </View>
      </A11y.Group>
      <A11y.Group style={styles.slide}>
        <View>
          <Text>Title: 2</Text>
        </View>
        <View>
          <Text>Desctiption: 2</Text>
        </View>
      </A11y.Group>
    </ScrollView>
  );