headerTitleAccessibilityProps vs custom header title: which ensures dynamic accessibility updates?

Use headerTitleAccessibilityProps for automatic dynamic updates; a custom header title requires you to forward those props manually.

Confirmed facts

In React Navigation versions 5 and 6, the built‑in Header component applies headerTitleAccessibilityProps to the accessible element on every render. When the navigation title changes, the accessibility label updates automatically, causing screen readers to announce the new header immediately.

Likely explanation

When you replace the header with a completely custom component via headerTitle, you bypass the default Header's accessibility handling. Unless you spread headerTitleAccessibilityProps onto the root element of your custom title (or manage the accessibility state yourself), changes in the title are not reflected in the accessibility tree, which can lead to missed or delayed announcements.

Steps for this case

1. To get dynamic updates with minimal boilerplate, set headerTitleAccessibilityProps in your screen options:

options: ({ route }) => ({
  headerTitle: route.params?.title || 'Default Title',
  headerTitleAccessibilityProps: {
    accessibilityLabel: route.params?.title || 'Default Title',
    accessibilityRole: 'header'
  }
})

2. If you prefer a custom <Text> header title, forward the props like this:

const CustomHeaderTitle = ({ title, headerTitleAccessibilityProps }) => (
  
    {title}
  
);

// In screen options
options: ({ route }) => ({
  headerTitle: ({ headerTitleAccessibilityProps }) => 
})

3. With either approach, the header’s accessibility label will change as soon as the navigation title updates, satisfying WCAG 2.1 SC 2.4.2.

Missing diagnostic detail: Which version of React Navigation are you using? (Answer needed if behavior differs between v4, v5, or v6 regarding headerTitleAccessibilityProps propagation.)