search

react-navigation / react-navigation

Routing and navigation for your React Native apps
https://reactnavigation.org
23.58k stars 5.04k forks source link

NativeStack on WEB - Header is the last element in the DOM and it is bad for screenReader on web #12025

Open t1gu1 opened 4 months ago

t1gu1 commented 4 months ago

Current behavior

When using VoiceOver of any screenreader on web, when we start to move the screenreader in the screen, it finish the focus with the header. (Last element in the dom)

Expected behavior

Header should be the first element in the dom.

Here the link of the file to edit and changes that should be done:

I found a related issue where it wxplain why we should keep the HeaderConfig at the end on IOS. https://github.com/software-mansion/react-native-screens/pull/1825#issuecomment-2174392085

Reproduction

Simply inspect the header. You'll see that is under the main content in the DOM.

https://snack.expo.dev/@stefan-5gpay/frowning-turkish-delight

Platform

Packages

Environment

package version
@react-navigation/native latest
@react-navigation/native-stack latest
react-native latest
expo latest
node 20
npm or yarn nom from node 20
github-actions[bot] commented 4 months ago

Couldn't find version numbers for the following packages in the issue:

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

anthoninCL commented 1 month ago

Hey @t1gu1 I was wondering if you managed to find any solution. I am facing the same issue in one of my project and I struggle to find documentation. Thanks!

t1gu1 commented 1 month ago

@anthoninCL No solution using the native header on web.

But my workaround for the moment is, for the web only, to disable the header. I let the user use the browser navigation and I add a title that will be only show on Web only.

joonshakya commented 2 weeks ago

Same issue

6TELOIV commented 2 weeks ago

Was searching to see if this was reported; can confirm having the same issue. Seems to be fixed by commit 3101d04 , so should be changed in the next release.