In react-navigation on RNW: Keyboard tab is moving to previously opened screen while the current screen is being opened

[AgneLukoseviciute]

When navigating to a new page using react-navigation, the components of a previously opened page remain in the tabindex. I think this is also related to some tabbing issues we're seeing in gallery, since we use react-navigation there (#231, #222). There's also an internal partner asking for a fix.

From react-navigation react-navigation/react-navigation#9109:

Repro steps:

Create stack navigator with two screen (Ex: Home screen & details screen)
Go to Home screen(this screen contains few TextInputs), click a button to go to details screen
Keep hitting the TAB key. When the cursor is invisible, type few random characters. These characters are actually being typed in the Home screen's text input boxes.

Expected Behavior:

Cursor should not leave the current screen.

[AgneLukoseviciute]

@chiaramooney, do you think this could be related to #4152?

[chiaramooney]

Adding screens support would definitely fix the issue of being able to access elements on a previous screen after navigation has been completed as that screen would be removed from the visual tree. In this case, since the access issue is happening during navigation I'm not sure if screens would fully solve the issue because it does not delete the previous screen until the new screen has finished being navigated to. @AgneLukoseviciute at exactly which stage of navigation the issue is occurring?

[AgneLukoseviciute]

@chiaramooney From everything I've seen, this happens once you've already navigated to a new page and is pretty easy to repro. It might be possible you can somehow quickly tab onto the other page while a new one is being loaded, but I haven't seen that myself nor heard anyone bringing that side of it up.

[chiaramooney]

This issue will be solved by react-native-screens or a native implementation of no-hide-descendants that overrides the UIA tree. Note traversing all elements and setting their accessible prop to false will not be sufficient because it will not cover the community module case (most community modules have not implemented the accessible prop).

For now, there is a native implementation of no-hide-descendants in progress. We also have a workaround implemented in gallery which sets the contents of the page to an empty View when the page is blurred. See gallery's Page.tsx for a source example.

Bumping issue to 72.