diff --git a/packages/stack/src/types.tsx b/packages/stack/src/types.tsx index 61d3b1b5..108f87ff 100644 --- a/packages/stack/src/types.tsx +++ b/packages/stack/src/types.tsx @@ -404,6 +404,10 @@ export type StackHeaderLeftButtonProps = { * Whether it's possible to navigate back in stack. */ canGoBack?: boolean; + /** + * Accessibility label for the button for screen readers. + */ + accessibilityLabel?: string; }; export type StackHeaderTitleProps = { diff --git a/packages/stack/src/views/Header/HeaderBackButton.tsx b/packages/stack/src/views/Header/HeaderBackButton.tsx index 39d59f58..f172eecc 100644 --- a/packages/stack/src/views/Header/HeaderBackButton.tsx +++ b/packages/stack/src/views/Header/HeaderBackButton.tsx @@ -29,6 +29,7 @@ export default function HeaderBackButton({ tintColor: customTintColor, titleLayout, truncatedLabel = 'Back', + accessibilityLabel = label && label !== 'Back' ? `${label}, back` : 'Go back', }: Props) { const { dark, colors } = useTheme(); @@ -153,9 +154,7 @@ export default function HeaderBackButton({ accessible accessibilityRole="button" accessibilityComponentType="button" - accessibilityLabel={ - label && label !== 'Back' ? `${label}, back` : 'Go back' - } + accessibilityLabel={accessibilityLabel} accessibilityTraits="button" testID="header-back" delayPressIn={0}