Search code examples
androidreact-nativeaccessibility

React Native accessibility identifiers only on active scene

TalkBack is able to detect accessibility identifiers in my React Native 0.35.0 android app from non-active scenes I previously navigated through. How do I prevent this so only the current scene is used when identifying accessibility identifiers?

For example I have the first page of my app render a ListView of items. These work as expected with accessibility identifiers where any item can be selected.

Image 1

The problem is when navigate to the next page, a page that only has one line of text, all the ListView items from the previous scene are still accessible when viewing the new scene!

enter image description here

I am using NavigationExperimental, specifically NavigationCardStack, for navigation. I'm aware NavigationCardStack will render each visited scenes in the stack but am looking to find a way so only the active scene is selectable.

So far I've tried implementing a version of NavigationExperimental that only renders the active scene. While it solves this problem the navigation animations are ruined and navigating back through the app must re-create each scene which creates a sluggish and unacceptable experience in my opinion.

While I don't love the solution I thought setting accessible={false} on every component from the first page may work. Unfortunately even this still left the Text components accessible. If it had worked I could have set accessible to NavigationExperimental's property scene.isActive.

Solution

  • I was able to resolve this issue. In React Native there is an attribute Android can set called importantForAccessibility. It's a little more intensive than I'd prefer but I implemented my own NavigationCardStack and NavigationCard (extended React Native's version to add my own logic in render).

    Essentially while iterating over each scene in NavigationCardStack I pass a new property, isActiveScreen which I set to true only on the active scene by inspecting the current index.

    Then in NavigationCard I leverage importantForAccessibility by adding 

    importantForAccessibility={this.props.isActiveScreen ? 'yes' : 'no-hide-descendants'}

    In this way on android only my currently visible scene has accessibility enabled while all other scenes in the stack have no-hide-descendants set.