Voice over focus for horizontal flatlist items on a vertical flatlist

Question

I have a horizontal flatlist added to another vertical flatlist. Voice over is able to traverse through the vertical flatlist and not able to scroll to the next item in the horizontal flatlist, which is the problem now.

This will happen in iOS native code too. But I see a possible way it works in the iOS native code for the same scenario, where in we have a delegate function accessibilityElementDidBecomeFocused() that will be called when the accessibility focus moves to other hidden item. In such case, we would be using the function to scroll the horizontal tableview programmatically in iOS native code as in this link. I am looking for a similar kinda solution in React Native accessibility.

The below is code snippet for horizontal flatlist that is added to the vertical flatlist.

  return (
    <View accessible={false}>
      <View style={...} accessible={false}>
        <FlatList
          style={{ flex: 1 }}
          data={data}
          ref={flatListRef}
          initialNumToRender={3}
          windowSize={3}
          renderItem={renderItem}
          pagingEnabled={true}
          getItemLayout={(data, index) => ({
            length: itemStyle.width,
            offset: itemStyle.width * index,
            index,
          })}
          horizontal={true}
          accessible={false}
          accessibilityElementsHidden={false}
          removeClippedSubviews={false}
        />
      </View>
    </View>   
  )

renderItem are accessibility enabled (ie,.accessible={true}) and respective accessibility values are set.

With the above code setup, the accessibility focus is actually moving to the next item in the horizontal flatlist. ie,.when performing left to right swipe, I could hear voice over reading the accessibility labels for the respective render items

item 1 of 10, accessibility focus is visible and is set to the first item
item 2 of 10, accessibility focus is not visible and second item is not visible
item 3 of 10, accessibility focus is not visible and third item is not visible

As I couldn't find any equivalent API to accessibilityElementDidBecomeFocused() in React Native I am struck with and not able to scroll the flatlist content programatically in RN.

Someone kindly help with any possible solutions for this issue.

P.S.

Talk back traversing of horizontal flatlist in vertical flatlist is working fine as expected in Android. Issue is only in iOS.
I've tried accessibility actions and is working as expected in both platforms but the business wants traversing of horizontal flatlist via voice over to be implemented only via left to right swipe.
Tried with wrapper view for the horizontal scroll view as in the above code snippet which didn't help scrolling the horizontal flatlist during voice over.

Voice over focus for horizontal flatlist items on a vertical flatlist

0 Answers0