Stack header not announced by accessibility as a Heading on Android

[justin-unterreiner-lulus]

Current behavior

The header label for a stack navigator is announced by VoiceOver on iOS as Home, heading. But using TalkBack on Android it is just announced as Home. I would expect it to be announced in a same or similar way on Android.

This is reproducible using the code from the Creating a native stack navigator section of Hello React Navigation:
https://reactnavigation.org/docs/hello-react-navigation/#creating-a-native-stack-navigator

Here is a Snack that is produced when clicking the Try this example on Snack link.
https://snack.expo.dev/@justin.unterreiner.lulus/react-navigation-talkback-android-title-bug

Reproduced using Expo Go and the above snack.

iOS	Android

Expected behavior

TalkBack should announce the label as a Heading similar to VoiceOver on iOS: Home, Heading.

Reproduction

https://snack.expo.dev/@justin.unterreiner.lulus/react-navigation-talkback-android-title-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-tab-view

Environment

• [] I've removed the packages that I don't use

package	version
@react-navigation/native	6.0.10
@react-navigation/bottom-tabs	6.3.1
@react-navigation/drawer	6.4.1
@react-navigation/material-top-tabs	6.2.1
@react-navigation/stack	6.2.1
@react-navigation/native-stack	6.6.1
react-native-safe-area-context	4.8.2
react-native-screens	~3.29.0
react-native-gesture-handler	~2.14.0
react-native-reanimated	~3.6.2
react-native-tab-view	^3.0.0
react-native-pager-view	6.2.3

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 6.0.10, latest: 6.1.10)
• @react-navigation/bottom-tabs (found: 6.3.1, latest: 6.5.12)
• @react-navigation/drawer (found: 6.4.1, latest: 6.6.7)
• @react-navigation/material-top-tabs (found: 6.2.1, latest: 6.6.6)
• @react-navigation/stack (found: 6.2.1, latest: 6.3.21)
• react-native-tab-view (found: 3.0.0, latest: 3.5.2)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[satya164]

I would expect it to be announced in a same or similar way on Android

Android and iOS are different OS. You can't expect them to work the same.

We use the native header, so whatever accessibility is provided is how native components behave. We don't control any accessibility related options for the header.

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[justin-unterreiner-lulus]

We use the native header, so whatever accessibility is provided is how native components behave. We don't control any accessibility related options for the header.

Who does control the accessibility options for the native header?

Normally this can be achieved by using the accessibilityRole="header" property. This is how <Text> works for example.

When you say "native" do you mean that there is not an underlying <Text> element in this case?

[justin-unterreiner-lulus]

I found a workaround after digging around in the @react-navigation/native-stack package source in HeaderConfig.tsx.

When the platform is Android, there is a code section that handles applying different header views based on config properties. If either headerTitle is a function or headerTitleAlign is set to center then a <HeaderTitle> component will be used instead of the (presumably) "native" fallback:

react-navigation/packages/native-stack/src/views/HeaderConfig.tsx

Lines 228 to 262 in 8367758

	<>
	{headerLeftElement != null || typeof headerTitle === 'function' ? (
	<ScreenStackHeaderLeftView>
	<View style={styles.row}>
	{headerLeftElement}
	{headerTitleAlign !== 'center' ? (
	typeof headerTitle === 'function' ? (
	headerTitleElement
	) : (
	<HeaderTitle
	tintColor={tintColor}
	style={headerTitleStyleSupported}
	>
	{titleText}
	</HeaderTitle>
	)
	) : null}
	</View>
	</ScreenStackHeaderLeftView>
	) : null}
	{headerTitleAlign === 'center' ? (
	<ScreenStackHeaderCenterView>
	{typeof headerTitle === 'function' ? (
	headerTitleElement
	) : (
	<HeaderTitle
	tintColor={tintColor}
	style={headerTitleStyleSupported}
	>
	{titleText}
	</HeaderTitle>
	)}
	</ScreenStackHeaderCenterView>
	) : null}
	</>

In looking at the <HeaderTitle> component, you can see that it sets the accessibilityRole="header" property, which resolves the issue for my use case:

react-navigation/packages/elements/src/Header/HeaderTitle.tsx

Line 23 in 8367758

accessibilityRole="header"

So the tradeoff here is that we need to set either a header title render function or set the alignment to center on all screens in order to get the proper accessibility role applied to the header text.