CU/10187-Chika-AddBackAnnouncementForScreenreaderUsers (#10314)

department-of-veterans-affairs · Dec 13, 2024 · 2936abd · 2936abd
1 parent 86880c7
commit 2936abd
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/VAMobile/src/components/Templates/FeatureLandingAndChildTemplate.tsx b/VAMobile/src/components/Templates/FeatureLandingAndChildTemplate.tsx
@@ -1,11 +1,13 @@
 import React, { FC, ReactNode, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { LayoutChangeEvent, StatusBar, View, ViewStyle, useWindowDimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { useIsScreenReaderEnabled } from '@department-of-veterans-affairs/mobile-component-library'
 
 import { HeaderButton, TextView, TextViewProps, WaygateWrapper } from 'components'
 import VAScrollView, { VAScrollViewProps } from 'components/VAScrollView'
+import { NAMESPACE } from 'constants/namespaces'
 import { useTheme } from 'utils/hooks'
 
 import HeaderBanner, { HeaderBannerProps } from './HeaderBanner'
@@ -59,6 +61,7 @@ export const ChildTemplate: FC<ChildTemplateProps> = ({
   const fontScale = useWindowDimensions().fontScale
   const theme = useTheme()
   const screenReaderEnabled = useIsScreenReaderEnabled()
+  const { t } = useTranslation(NAMESPACE.COMMON)
 
   const [scrollOffset, setScrollOffset] = useState(0)
   const [trackScrollOffset, setTrackScrollOffset] = useState(true)
@@ -73,7 +76,9 @@ export const ChildTemplate: FC<ChildTemplateProps> = ({
   const headerProps: HeaderBannerProps = {
     leftButton: {
       text: backLabel,
-      a11yLabel: backLabelA11y,
+      a11yLabel: backLabelA11y
+        ? t('back.a11yLabel', { screenName: backLabelA11y })
+        : t('back.a11yLabel', { screenName: backLabel }),
       testID: backLabelTestID,
       onPress: backLabelOnPress,
       descriptiveBack: true,

diff --git a/VAMobile/src/components/Templates/HeaderBanner.tsx b/VAMobile/src/components/Templates/HeaderBanner.tsx
@@ -277,6 +277,7 @@ const HeaderBanner: FC<HeaderBannerProps> = ({
               {leftButton?.descriptiveBack ? (
                 <DescriptiveBackButton
                   label={leftButton.text}
+                  labelA11y={leftButton.a11yLabel}
                   onPress={leftButton.onPress}
                   focusOnButton={focus === 'Left'}
                   backButtonTestID={leftButton.testID}

diff --git a/VAMobile/src/translations/en/common.json b/VAMobile/src/translations/en/common.json
@@ -348,6 +348,7 @@
   "automatedPhoneSystem": "Automated phone system: ",
   "back": "Back",
   "back.a11yHint": "Navigates to the previous page",
+  "back.a11yLabel": "Back to {{screenName}}",
   "benefits.title": "Benefits",
   "benefits.activity.error": "We can't get some of your information. Benefits activity may not be accurate.",
   "benefits.activity.nonFatalError": "We can't get some of your information right now. Benefits activity may not be accurate. Check back later.",