Accessibility issue on iOS: Screen reader skips suggestions list and focus indicator is also missing (Android works as expected).

[Chandanyadav]

We are facing an accessibility issue with the Autocomplete component on iOS devices. When a list of suggestions is shown:

VoiceOver (screen reader) does not read each item individually when navigating through the suggestions.

The keyboard focus is not visibly moving to each item in the list.

This behavior works as expected on Android, where TalkBack reads each suggestion item one by one and focus is clearly visible.

Version

• "react-native": "0.72.9"
• "react-native-autocomplete-input": "^5.5.6",

Steps to Reproduce

• On an iOS device, open the screen with the Autocomplete component.

• Type to trigger the suggestion list.

• Turn on VoiceOver and try navigating through the suggestions.

Expected Behavior

• VoiceOver should read each suggestion item one at a time as the user navigates.

• Focus (visual or accessible) should be clearly visible or programmatically detectable on each item.

Actual Behavior

• VoiceOver reads only the whole list (as one string) or skips reading individual items.

• Focus is not visibly or accessibly moving across suggestion items.

• This creates a poor experience for visually impaired users on iOS.

Environment

• Platform: iOS

• Component: Autocomplete

• Accessibility settings: VoiceOver enabled

• Works fine on: Android (with TalkBack)

Additional Notes

• We have tried using accessibilityLabel, accessibilityRole, and conditional rendering for iOS-specific behavior, but the issue persists.

<Autocomplete
        accessible={true}
        data={suggestionList}
        flatListProps={{
          renderItem: ({ item, i }) => (
            <TouchableOpacity accessible={true} accessibilityLabel={deburr(getItemDesc(item))}>

             {getItemDesc(item)}

            </TouchableOpacity>
          ),
          nestedScrollEnabled: true,
          keyboardShouldPersistTaps: 'always',
          persistentScrollbar: suggestionList?.length > 3 ? true: false,
          style: { overflow: 'scroll', maxHeight: spV(110), width: '100%', elevation: 10, zIndex: 2 }
        }}
/>

const getItemDesc = (item) => {
    const itemDescription = deburr(item?.description);
    return (
      <BodyText numberOfLines={1} style={styles.itemText}>
        {itemDescription}
      </BodyText>
    );
  };