Screen reader reads all content inside ViewPager when doing swiping gesture

[adrihegg]

🐛 Bug Report

To Reproduce

Steps to reproduce the behavior:

1. Setup a Kitten UI "ViewPager" component
2. Use screen reader (tested on IOS)
3. Do the swiping gesture (swipe right on the middle of the screen) to search thew all elements in the ViewPager and make the screen reader read them.

Expected behavior

The Screen reader will read elements on the other pages of the viewpager when doing the swiping gesture blind people heavily utilize to find the elements on the screen. I would expect the screen reader to only find the elements on the currently selected ViewPager screen.

UI Kitten and Eva version

@eva-design/eva 2.1.1 @ui-kitten/components 5.1.1

Environment information

System: OS: Windows 10 10.0.22000 CPU: (12) x64 Intel(R) Core(TM) i7-10850H CPU @ 2.70GHz Binaries: Node: 16.17.0 - C:\Program Files\nodejs\node.EXE npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD SDKs: Android SDK: API Levels: 30 Build Tools: 30.0.2, 31.0.0, 32.0.0 System Images: android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom IDEs: Android Studio: Version 2020.3.0.0 AI-203.7717.56.2031.7784292 Visual Studio: 17.0.32014.148 (Visual Studio Community 2022) npmPackages: react: 18.0.0 => 18.0.0 react-native: 0.69.6 => 0.69.6

[adrihegg]

Found a workaround which solves the issue, but i have to implement it for every ViewPager i use.

<ViewPager selectedIndex={tabIndex}>
    {viewTaskModalData.map((element, index) => (
        <View 
            key={element.key}
            accessibilityElementsHidden={tabIndex !== index} // IOS
            importantForAccessibility={tabIndex !== index ? "no-hide-descendants": "yes"} // Android
        >
            {element.child}
        </View>
    ))}
</ViewPager>