Accessibility bug when using a Stack with animation on web #12583
Labels
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
{{ message }}
Current behavior
When using a stack I would expect only the top most screen in the stack to be visible in the accessibility tree.
And it is, as long as you don't add an animation in
screenOptionsof the stack oroptionsfor the screen.For this very simple set up with two screens (Home Screen and Details Screen) it looks like this when on the Details Screen:
But as soon as I add animation, the previous screen will be listed in the accessibility tree.
As you see in the image above the
mainelement of the previous screen (Home Screen) is exposed and accessible from a screen reader and if you use the keyboard to tab to a focusable element.There is also an warning in the console related to this:
Expected behavior
The expected behaviour is that it should work the same way regardless if the animation is set or not.
The previous screen should not be accessible to a screen reader or you should not be able to keyboard tab to the previous screen.
A side note is that is also the same if I change the
headerModetofloat, then the previous header is also accessible from the current screen which it should not be.This behaviour is not really reproducible on Snack. The previous screen is visible in the accessibility tree for a short moment and then is goes away. Why I don't know, but I will add a small repo that you can test this on and also the Snack link.
https://snack.expo.dev/@fyranollfyra/accessibility-bug
This behaviour started on version
7.2.1,7.2.0works fine. Not sure if the console warning was there on7.2.1, but it is at the latest version tested at least.Reproduction
https://github.com/mathias-berg/react-navigation-a11y-bug
Platform
Packages
Environment
The text was updated successfully, but these errors were encountered: