react-navigation/react-navigation

Accessibility bug when using a Stack with animation on web

Open

#12 583 ouverte le 6 mai 2025

Voir sur GitHub
 (0 commentaires) (0 réactions) (0 assignés)TypeScript (23 189 stars) (4 962 forks)batch import
bughelp wantedplatform:webrepro provided

Description

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 screenOptions of the stack or options for 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 main element 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 headerMode to float, 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.0 works fine. Not sure if the console warning was there on 7.2.1, but it is at the latest version tested at least.

Reproduction

https://github.com/mathias-berg/react-navigation-a11y-bug

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

  • @react-navigation/bottom-tabs
  • @react-navigation/drawer
  • @react-navigation/material-top-tabs
  • @react-navigation/stack
  • @react-navigation/native-stack
  • react-native-drawer-layout
  • react-native-tab-view

Environment

  • I've removed the packages that I don't use
package version
@react-navigation/native 7.1.8
@react-navigation/stack 7.3.1
react-native-screens 4.10.0
react-native-safe-area-context 5.4.0
react-native-web 0.20.0
node 22.14.0
yarn 1.22.22
Electron 36.1.0

Guide contributeur

Stack technique
typescriptreact
Domaine
frontendaccessibility
Type d'issue
bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 hours
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
fresh
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
clear
Prérequis
ReactReact NavigationAccessibility basics
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
70
Direction de recherche
Investigate the animation related changes in @react navigation/stack between versions 7.2.0 and 7.2.1. Focus on how the stack animation affects the accessibility tree, particularly the `accessibilityElementsHidden` and `importantForAccessibility` props. The console warning suggests a missing or incorrect accessibility property. Check the `TransitionConfig` and `Screen` components. The reproduction repo is at https://github.com/mathias berg/react navigation a11y bug. Compare the behavior with and without animation to identify the root cause.