CU/8216-CleanUpTestIdPropsUsage (#8995)

Co-authored-by: Therese <[email protected]>
department-of-veterans-affairs · Sep 12, 2024 · d5721ee · d5721ee
1 parent acd81b4
commit d5721ee
Show file tree

Hide file tree

Showing 44 changed files with 136 additions and 171 deletions.
diff --git a/VAMobile/src/components/AccordionCollapsible.tsx b/VAMobile/src/components/AccordionCollapsible.tsx
@@ -4,7 +4,6 @@ import { Pressable, PressableProps, View } from 'react-native'
 
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
-import { testIdProps } from 'utils/accessibility'
 import { logAnalyticsEvent } from 'utils/analytics'
 import { useTheme } from 'utils/hooks'
 
@@ -113,7 +112,7 @@ const AccordionCollapsible: FC<AccordionCollapsibleProps> = ({
   }
 
   return (
-    <Box {...boxProps} {...testIdProps('accordion-wrapper', true)} testID={testID} importantForAccessibility={'no'}>
+    <Box {...boxProps} testID={testID} importantForAccessibility={'no'}>
       <TextArea noBorder={noBorder}>
         {renderHeader()}
         {!expanded && collapsedContent}

diff --git a/VAMobile/src/components/BackButton.tsx b/VAMobile/src/components/BackButton.tsx
@@ -6,7 +6,7 @@ import { useFocusEffect } from '@react-navigation/native'
 
 import { BackButtonLabel } from 'constants/backButtonLabels'
 import { NAMESPACE } from 'constants/namespaces'
-import { a11yHintProp, testIdProps } from 'utils/accessibility'
+import { a11yHintProp } from 'utils/accessibility'
 import { useAccessibilityFocus, useTheme } from 'utils/hooks'
 
 import Box from './Box'
@@ -67,7 +67,7 @@ export const BackButton: FC<BackButtonProps> = ({
     <TouchableWithoutFeedback
       ref={focusRef}
       onPress={onPress}
-      {...testIdProps(label)}
+      accessibilityLabel={label}
       {...a11yHintProp(a11yHintPropParam)}
       accessibilityRole="button"
       accessible={true}

diff --git a/VAMobile/src/components/BaseListItem.tsx b/VAMobile/src/components/BaseListItem.tsx
@@ -3,7 +3,7 @@ import { AccessibilityProps, AccessibilityRole, AccessibilityState, Pressable, P
 import { HapticFeedbackTypes } from 'react-native-haptic-feedback'
 
 import FileRequestNumberIndicator from 'screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/FileRequestNumberIndicator'
-import { a11yHintProp, a11yValueProp, testIdProps } from 'utils/accessibility'
+import { a11yHintProp, a11yValueProp } from 'utils/accessibility'
 import { triggerHaptic } from 'utils/haptics'
 import { useTheme } from 'utils/hooks'
 
@@ -254,10 +254,10 @@ const BaseListItem: FC<BaseListItemProps> = (props) => {
   }
 
   const a11yProps: AccessibilityProps = {
-    ...testIdProps(testId || ''),
     ...a11yHintProp(a11yHint),
     ...a11yValueProp(a11yValue ? { text: a11yValue } : {}),
     accessibilityState: a11yState ? a11yState : {},
+    accessibilityLabel: testId,
   }
 
   if (isSwitchRow && decoratorProps) {
@@ -270,7 +270,7 @@ const BaseListItem: FC<BaseListItemProps> = (props) => {
   const generateItem = (accessibilityProps?: AccessibilityProps): ReactElement => {
     // accessible property set to true when there is no onPress because it is already wrapped in the accessible Pressable
     return (
-      <Box {...boxProps} {...accessibilityProps} accessible={!onPress}>
+      <Box {...boxProps} {...accessibilityProps} testID={accessibilityProps?.accessibilityLabel} accessible={!onPress}>
         {claimsRequestNumber !== undefined ? (
           <FileRequestNumberIndicator requestNumber={claimsRequestNumber} fileUploaded={fileUploaded} />
         ) : (
@@ -289,7 +289,7 @@ const BaseListItem: FC<BaseListItemProps> = (props) => {
   // onPress exist, wrap in Pressable and apply a11yProps
   if (onPress) {
     return (
-      <Pressable {...a11yProps} {...pressableProps}>
+      <Pressable {...a11yProps} {...pressableProps} testID={testId}>
         {generateItem()}
       </Pressable>
     )

diff --git a/VAMobile/src/components/Carousel/CarouselTabBar.tsx b/VAMobile/src/components/Carousel/CarouselTabBar.tsx
@@ -9,7 +9,7 @@ import { TFunction } from 'i18next'
 import styled from 'styled-components'
 import _ from 'underscore'
 
-import { a11yHintProp, testIdProps } from 'utils/accessibility'
+import { a11yHintProp } from 'utils/accessibility'
 import { useRouteNavigation, useTheme } from 'utils/hooks'
 import { themeFn } from 'utils/theme'
 
@@ -97,8 +97,9 @@ function CarouselTabBar({ onCarouselEnd, screenList, translation }: CarouselTabB
     return (
       <StyledPressable
         onPress={onPressCallback}
+        accessibilityLabel={translation(buttonText)}
+        testID={translation(buttonText)}
         accessibilityRole="link"
-        {...testIdProps(translation(buttonText))}
         {...a11yHintProp(allyHint || '')}>
         <TextView variant="MobileBody" color="primaryContrast" allowFontScaling={false} mr="auto" selectable={false}>
           {translation(buttonText)}
@@ -122,8 +123,9 @@ function CarouselTabBar({ onCarouselEnd, screenList, translation }: CarouselTabB
     return (
       <StyledPressable
         onPress={onContinue}
+        accessibilityLabel={translation(buttonText)}
+        testID={translation(buttonText)}
         accessibilityRole="link"
-        {...testIdProps(translation(buttonText))}
         {...a11yHintProp(allyHint || '')}>
         <TextView
           variant="MobileBodyBold"
@@ -161,7 +163,7 @@ function CarouselTabBar({ onCarouselEnd, screenList, translation }: CarouselTabB
           {goBackOrSkipBtn()}
         </Box>
         <Box
-          {...testIdProps(translation('carouselIndicators'))}
+          testID={'carouselIndicators'}
           {...a11yHintProp(a11yHints?.carouselIndicatorsHint || '')}
           {...progressBarContainerProps}>
           {getProgressBar()}

diff --git a/VAMobile/src/components/CollapsibleView.tsx b/VAMobile/src/components/CollapsibleView.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useState } from 'react'
 import { Pressable, PressableProps, ViewStyle } from 'react-native'
 
-import { a11yHintProp, testIdProps } from 'utils/accessibility'
+import { a11yHintProp } from 'utils/accessibility'
 import { useTheme } from 'utils/hooks'
 
 import Box, { BoxProps } from './Box'
@@ -84,7 +84,7 @@ const CollapsibleView: FC<CollapsibleViewProps> = ({
   const touchableRow = (
     <Box minHeight={theme.dimensions.touchableMinHeight}>
       <Pressable
-        {...testIdProps(text)}
+        accessibilityLabel={text}
         {...a11yHintProp(a11yHint || '')}
         style={pressableStyles}
         {...pressableProps}

diff --git a/VAMobile/src/components/CommonErrorComponents/BasicError.tsx b/VAMobile/src/components/CommonErrorComponents/BasicError.tsx
@@ -6,7 +6,6 @@ import { Button } from '@department-of-veterans-affairs/mobile-component-library
 
 import { Box, TextView, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
-import { testIdProps } from 'utils/accessibility'
 import { useTheme } from 'utils/hooks'
 
 export type BasicErrorProps = {
@@ -54,7 +53,7 @@ const BasicError: FC<BasicErrorProps> = ({
       <Box justifyContent="center" {...containerStyles}>
         {headerText && (
           <TextView
-            {...testIdProps(headerA11yLabel ? headerA11yLabel : headerText)}
+            accessibilityLabel={headerA11yLabel}
             variant="MobileBodyBold"
             accessibilityRole="header"
             textAlign="center">

diff --git a/VAMobile/src/components/FormWrapper/FormFields/VASelector.tsx b/VAMobile/src/components/FormWrapper/FormFields/VASelector.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { TouchableWithoutFeedback } from 'react-native'
 
 import { VAIconColors, VATextColors } from 'styles/theme'
-import { a11yHintProp, testIdProps } from 'utils/accessibility'
+import { a11yHintProp } from 'utils/accessibility'
 import { getTranslation } from 'utils/formattingUtils'
 import { useTheme } from 'utils/hooks'
 
@@ -96,15 +96,20 @@ const VASelector: FC<VASelectorProps> = ({
   const getCheckBoxIcon = (): React.ReactNode => {
     if (disabled && selectorType === SelectorType.Radio) {
       return (
-        <VAIcon {...getIconsProps('RadioEmpty', 'checkboxDisabled', 'radioDisabled')} {...testIdProps('RadioEmpty')} />
+        <VAIcon
+          {...getIconsProps('RadioEmpty', 'checkboxDisabled', 'radioDisabled')}
+          testID="RadioEmpty"
+          accessibilityLabel="RadioEmpty"
+        />
       )
     }
 
     if (!!error && selectorType === SelectorType.Checkbox) {
       return (
         <VAIcon
           {...getIconsProps('CheckBoxError', theme.colors.icon.error, 'checkboxDisabledContrast')}
-          {...testIdProps('CheckBoxError')}
+          testID="CheckBoxError"
+          accessibilityLabel="CheckBoxError"
         />
       )
     }
@@ -116,7 +121,7 @@ const VASelector: FC<VASelectorProps> = ({
     const fill = selected ? 'checkboxEnabledPrimary' : 'checkboxDisabledContrast'
     const stroke = selected ? undefined : 'checkboxDisabled'
 
-    return <VAIcon {...getIconsProps(name, stroke, fill)} {...testIdProps(name)} />
+    return <VAIcon {...getIconsProps(name, stroke, fill)} testID={name} accessibilityLabel={name} />
   }
 
   const hintProp = a11yHint ? a11yHintProp(a11yHint) : {}
@@ -135,7 +140,7 @@ const VASelector: FC<VASelectorProps> = ({
       <Box>
         {!!error && <Box {...errorBoxProps}>{renderInputError(error)}</Box>}
         <Box flexDirection="row">
-          <Box {...testIdProps('checkbox-with-label')} mt={5}>
+          <Box testID="checkbox-with-label" mt={5}>
             {getCheckBoxIcon()}
           </Box>
           <Box {...selectorBoxProps}>

diff --git a/VAMobile/src/components/List.tsx b/VAMobile/src/components/List.tsx
@@ -1,6 +1,5 @@
 import React, { FC } from 'react'
 
-import { testIdProps } from 'utils/accessibility'
 import { useTheme } from 'utils/hooks'
 
 import BaseListItem, { BaseListItemProps } from './BaseListItem'
@@ -72,11 +71,13 @@ const List: FC<ListProps> = ({ items, title, titleA11yLabel }) => {
   return (
     <Box>
       {title && (
-        <Box accessible={true} accessibilityRole={'header'}>
-          <TextView {...titleProps} {...testIdProps(titleA11yLabel ? titleA11yLabel : title)}>
-            {title}
-          </TextView>
-        </Box>
+        <TextView
+          {...titleProps}
+          accessibilityLabel={titleA11yLabel}
+          testID={titleA11yLabel || title}
+          accessible={true}>
+          {title}
+        </TextView>
       )}
       <Box borderTopWidth={theme.dimensions.borderWidth} borderStyle="solid" borderColor="primary">
         <Box backgroundColor={'list'}>{buttons}</Box>

diff --git a/VAMobile/src/components/NavigationTabBar.tsx b/VAMobile/src/components/NavigationTabBar.tsx
@@ -10,7 +10,7 @@ import { TFunction } from 'i18next'
 import styled from 'styled-components'
 
 import { NAMESPACE } from 'constants/namespaces'
-import { a11yValueProp, testIdProps } from 'utils/accessibility'
+import { a11yValueProp } from 'utils/accessibility'
 import { useRouteNavigation, useTheme } from 'utils/hooks'
 import { changeNavigationBarColor } from 'utils/rnNativeUIUtilities'
 import { themeFn } from 'utils/theme'
@@ -115,7 +115,8 @@ const NavigationTabBar: FC<NavigationTabBarProps> = ({ state, navigation, transl
 
           return (
             <TouchableWithoutFeedback
-              {...testIdProps(translatedName)}
+              accessibilityLabel={translatedName}
+              testID={translatedName}
               {...props}
               {...a11yValueProp({ text: t('listPosition', { position: index + 1, total: state.routes.length }) })}>
               <Box flex={1} display="flex" flexDirection="column" mt={7}>

diff --git a/VAMobile/src/components/Pagination.tsx b/VAMobile/src/components/Pagination.tsx
@@ -4,7 +4,6 @@ import { Pressable, PressableProps } from 'react-native'
 
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
-import { testIdProps } from 'utils/accessibility'
 import { logAnalyticsEvent } from 'utils/analytics'
 import { useTheme } from 'utils/hooks'
 
@@ -59,7 +58,7 @@ export const PaginationArrow: FC<PaginationArrowProps> = ({ onPress, a11yHint, i
     borderRadius: 5,
   }
   return (
-    <Pressable {...pressableProps} {...testIdProps(testID)}>
+    <Pressable {...pressableProps} testID={testID} accessibilityLabel={testID}>
       <Box {...boxProps}>
         <VAIcon fill={theme.colors.icon.pagination} width={16} height={16} preventScaling={true} {...iconProps} />
       </Box>

diff --git a/VAMobile/src/components/VABulletList.tsx b/VAMobile/src/components/VABulletList.tsx
@@ -3,7 +3,6 @@ import React, { FC } from 'react'
 import _ from 'underscore'
 
 import { VATextColors } from 'styles/theme'
-import { testIdProps } from 'utils/accessibility'
 import { useExternalLink } from 'utils/hooks'
 import { useTheme } from 'utils/hooks'
 
@@ -95,7 +94,7 @@ const VABulletList: FC<VABulletListProps> = ({ listOfText, paragraphSpacing }) =
             <Box mr={20} mt={12}>
               <VAIcon name="Bullet" fill={color || 'bodyText'} height={6} width={6} />
             </Box>
-            <TextView {...textViewProps} {...testIdProps(a11yLabel || text)}>
+            <TextView {...textViewProps} accessibilityLabel={a11yLabel || text}>
               {!!boldedTextPrefix && <TextView variant="MobileBodyBold">{boldedTextPrefix}</TextView>}
               {text.trim()}
               {!!boldedText && <TextView variant="MobileBodyBold">{boldedText}</TextView>}

diff --git a/VAMobile/src/components/VAImage/VAImage.tsx b/VAMobile/src/components/VAImage/VAImage.tsx
@@ -2,8 +2,6 @@ import React, { FC } from 'react'
 import { Image, useWindowDimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
-import { testIdProps } from 'utils/accessibility'
-
 /**
  * Add images to android('res/drawable') and in xcode('Images.xcassets') when new ones are added.
  * Android and IOS are not rendering using local path(ex. require('./images/asset.png')) and needs to be added as an asset resource.
@@ -53,10 +51,10 @@ const VAImage: FC<VAImageProps> = ({ name, a11yLabel, marginX }) => {
     <Image
       source={imageProps.source}
       style={{ width: width, height: imageProps.height * ratio }}
-      {...testIdProps(a11yLabel)}
       accessibilityLabel={a11yLabel}
       accessible={true}
       accessibilityRole={'image'}
+      testID={a11yLabel}
     />
   )
 }

diff --git a/...src/screens/BenefitsScreen/ClaimsScreen/AppealDetailsScreen/AppealIssues/AppealIssues.tsx b/...src/screens/BenefitsScreen/ClaimsScreen/AppealDetailsScreen/AppealIssues/AppealIssues.tsx
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 
 import { TextArea, TextView, VABulletList } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
-import { testIdProps } from 'utils/accessibility'
 
 type AppealsIssuesProps = {
   issues: Array<string>
@@ -13,7 +12,7 @@ function AppealIssues({ issues }: AppealsIssuesProps) {
   const { t } = useTranslation(NAMESPACE.COMMON)
 
   return (
-    <TextArea {...testIdProps('Your-appeal: Issues-tab-appeal-details-page')}>
+    <TextArea>
       <TextView variant="MobileBodyBold" accessibilityRole="header">
         {t('appealDetails.currentlyOnAppeal')}
       </TextView>

diff --git a/...een/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx b/...een/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx
@@ -14,7 +14,6 @@ import { MAX_NUM_PHOTOS } from 'constants/claims'
 import { NAMESPACE } from 'constants/namespaces'
 import { BenefitsStackParamList } from 'screens/BenefitsScreen/BenefitsStackScreens'
 import { a11yLabelVA } from 'utils/a11yLabel'
-import { testIdProps } from 'utils/accessibility'
 import { logAnalyticsEvent } from 'utils/analytics'
 import { onAddPhotos } from 'utils/claims'
 import getEnv from 'utils/env'
@@ -97,7 +96,7 @@ function TakePhotos({ navigation, route }: TakePhotosProps) {
           <TextView variant="MobileBody" my={theme.dimensions.standardMarginBetween}>
             {t('fileUpload.takePhotoEachPage')}
           </TextView>
-          <TextView variant="MobileBody" {...testIdProps(t('fileUpload.ifMoreThan10.a11y'))}>
+          <TextView variant="MobileBody" accessibilityLabel={t('fileUpload.ifMoreThan10.a11y')}>
             {t('fileUpload.ifMoreThan10.1')}
             <TextView variant="MobileBodyBold">
               {t('fileUpload.ifMoreThan10.2')}

diff --git a/...creen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimTimeline/DEPRECATED_ClaimPhase.tsx b/...creen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimTimeline/DEPRECATED_ClaimPhase.tsx
@@ -9,7 +9,6 @@ import { AccordionCollapsible, Box, TextView } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
 import { a11yLabelVA } from 'utils/a11yLabel'
-import { testIdProps } from 'utils/accessibility'
 import { logAnalyticsEvent } from 'utils/analytics'
 import { groupTimelineActivity, needItemsFromVet, numberOfItemsNeedingAttentionFromVet } from 'utils/claims'
 import { sortByDate } from 'utils/common'
@@ -85,8 +84,10 @@ function DEPRECATED_ClaimPhase({ phase, current, attributes, claimID }: ClaimPha
 
   const getPhaseExpandedContent = (): ReactNode => {
     return (
-      <Box mt={condensedMarginBetween} {...testIdProps(detailsA11yLabel)} accessible={true}>
-        <TextView variant={'MobileBody'}>{detailsText}</TextView>
+      <Box mt={condensedMarginBetween}>
+        <TextView accessibilityLabel={detailsA11yLabel} variant={'MobileBody'}>
+          {detailsText}
+        </TextView>
       </Box>
     )
   }

diff --git a/...aimsScreen/ClaimDetailsScreen/ClaimStatus/EstimatedDecisionDate/EstimatedDecisionDate.tsx b/...aimsScreen/ClaimDetailsScreen/ClaimStatus/EstimatedDecisionDate/EstimatedDecisionDate.tsx
@@ -5,7 +5,6 @@ import { DateTime } from 'luxon'
 
 import { AlertWithHaptics, Box, TextArea, TextView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
-import { testIdProps } from 'utils/accessibility'
 import getEnv from 'utils/env'
 import { formatDateMMMMDDYYYY } from 'utils/formattingUtils'
 import { useExternalLink, useTheme } from 'utils/hooks'
@@ -66,16 +65,14 @@ function EstimatedDecisionDate({ maxEstDate, showCovidMessage }: EstimatedDecisi
 
   return (
     <TextArea>
-      <Box {...testIdProps(`${t('claimDetails.estimatedDecisionDate')} ${displayDate}`)} accessible={true}>
+      <Box accessibilityLabel={`${t('claimDetails.estimatedDecisionDate')} ${displayDate}`} accessible={true}>
         <TextView variant="MobileBody">{t('claimDetails.estimatedDecisionDate')}</TextView>
         <TextView variant="MobileBodyBold">{displayDate}</TextView>
       </Box>
       {!!maxEstDate && !maxEstDateIsMoreThanTwoYearsOut && (
-        <Box {...testIdProps(subText)} accessible={true}>
-          <TextView variant="MobileBody" mt={theme.dimensions.standardMarginBetween}>
-            {subText}
-          </TextView>
-        </Box>
+        <TextView variant="MobileBody" mt={theme.dimensions.standardMarginBetween} accessible={true}>
+          {subText}
+        </TextView>
       )}
     </TextArea>
   )