Phantom tab stops after content

[will-ks]

If you press the tab key until focus is on the last element on the screen and then press tab again, tab focus should wrap around to the first element on screen. However, what actually happens is that the focus indicator disappears until you've pressed tab again about 30 times, then it finally wraps around to the start again. If you're running Narrator while you do this, the screen reader is completely silent on these phantom tab stops.

I'm posting this here because we are facing a similar problem in our app (although in ours, we only have a single phantom tab stop). I think it is to do with the windows implementation of react-navigation (in our app, removing the react-navigation Stack.Navigator makes the issue go away). Interested to see if anyone has any suggestions of what might be causing this, or any tips for debugging such an issue.

[chrisglein]

@Yajur-Grover this sounds similar to some of the accessibility issues you've been investigating. Can you help provide guidance, share what you've learned (and/or the known bugs being worked on)?

[Yajur-Grover]

I was able to repro the same behaviour, but it doesn't seem to be similar to any recent accessibility issue. This behavior is present both with or without Narrator being enabled. I also tried this on another example page in an app without react-navigation and there were no phantom stops. Will try and debug what the tab stop is being activated on when out of view.

[Yajur-Grover]

It looks like the phantom tab stops are actually going through the navigation drawer. If you keep tabbing after the end of the page content and press 'Enter', depending on how many times you have pressed 'Tab', it will select the DrawerItem that is focused on currently, and open the component example page corresponding to the item.

[chrisglein]

It looks like the phantom tab stops are actually going through the navigation drawer. If you keep tabbing after the end of the page content and press 'Enter', depending on how many times you have pressed 'Tab', it will select the DrawerItem that is focused on currently, and open the component example page corresponding to the item.

If the collapsed drawer items are focusable then that's causing issues. There's that "important for accessibility" prop / "no hide descendants" type fix. Maybe this is still not quite right.

[chrisglein]

Made some edits to Gallery to clean up the drawer. After that, in a release build, there is still exactly one "phantom tab stab" (I like that term 👻). Needs digging in to find out what it is.

To the question posed above:

Interested to see if anyone has any suggestions of what might be causing this, or any tips for debugging such an issue.

That is a key question, and worth spending some time documenting. In the past the way I've debugged this is with adding breakpoints/tracepoints to the various focus change events in the framework. Which is tedious at best. We should find out from the XAML team if there's helpful tooling for debugging "where has focus gone?", because it's not an uncommon problem.

[will-ks]

FWIW, I did some experimenting in our app and found that the issue only showed while we were using react-navigation's native-stack-navigator. We switched to using the stack-navigator instead and the tab stop isn't there. This must be an issue that needs fixing upstream in react-navigation.