[Inji 648] add accessibility id to elements in different screens (#1105)

* [INJI-648] add accessibility IDs to the requested elements in different screens Signed-off-by: PuBHARGAVI <46226958+PuBHARGAVI@users.noreply.github.com> * [INJI-648] fix accessibility IDs for some elements to work in ios Signed-off-by: PuBHARGAVI <46226958+PuBHARGAVI@users.noreply.github.com> * [INJI-648] change accessibility IDs for pressable and child elements to work in ios Signed-off-by: PuBHARGAVI <46226958+PuBHARGAVI@users.noreply.github.com> * [INJI-648] remove icon parameter in testId function for plus icon Signed-off-by: PuBHARGAVI <46226958+PuBHARGAVI@users.noreply.github.com> --------- Signed-off-by: PuBHARGAVI <46226958+PuBHARGAVI@users.noreply.github.com>
2026-01-09 05:27:57 -05:00 · 2023-12-21 10:43:36 +05:30
parent 680e1bb504
commit 03b64426ed
28 changed files with 159 additions and 49 deletions
--- a/.talismanrc
+++ b/.talismanrc
@@ -44,7 +44,7 @@ fileignoreconfig:
  - filename: screens/Issuers/IssuersScreen.tsx
    checksum: 9c53e3770dbefe26e0de67ee4b7d5cc9c52d9823cbb136a1a5104dcb0a101071
  - filename: ios/Podfile.lock
-    checksum: c30eada0d288ef1705e0eeb03bb941863ca7e5663196baaa814cb24e8312655e
+    checksum: 2487c4e11fb1bd95032cc4511435d9420fc0dfc62f3c015d177213fa089df7f2
  - filename: screens/Home/IntroSlidersScreen.tsx
    checksum: 72ef913857448ef05763e52e32356faa2d1f3de8130a1c638d1897f44823031f
  - filename: shared/commonUtil.ts
--- a/components/CopyButton.tsx
+++ b/components/CopyButton.tsx
@@ -5,13 +5,16 @@ import Clipboard from '@react-native-clipboard/clipboard';
 import {Icon} from 'react-native-elements';
 import {Row, Text} from './ui';
 import {useTranslation} from 'react-i18next';
+import testIDProps from '../shared/commonUtil';

 export const CopyButton: React.FC<CopyButtonProps> = ({content}) => {
  const {t} = useTranslation('common');
  const [buttonText, setButtonText] = useState(t('clipboard.copy'));
-
  return (
    <Pressable
+      {...testIDProps(`${buttonText}Button`)}
+      accessible={false}
+      style={Theme.Styles.iconContainer}
      onPress={() => {
        setButtonText(t('clipboard.copied'));
        setTimeout(() => setButtonText(t('clipboard.copy')), 3000);
@@ -19,13 +22,18 @@ export const CopyButton: React.FC<CopyButtonProps> = ({content}) => {
      }}>
      <Row crossAlign="center">
        <Icon
+          {...testIDProps('fileCopyIcon')}
          type={'material'}
          name={'file-copy'}
          color={Theme.Colors.Icon}
          style={{marginRight: 2}}
          size={19}
        />
-        <Text weight="semibold" align="center" style={{paddingTop: 5}}>
+        <Text
+          testID={`${buttonText}Text`}
+          weight="semibold"
+          align="center"
+          style={{paddingTop: 5}}>
          {buttonText}
        </Text>
      </Row>
--- a/components/DualMessageOverlay.tsx
+++ b/components/DualMessageOverlay.tsx
@@ -67,6 +67,7 @@ export const DualMessageOverlay: React.FC<DualMessageOverlayProps> = props => {
          <Row style={Theme.MessageOverlayStyles.buttonContainer}>
            {!props.children && props.onTryAgain ? (
              <Button
+                testID='tryAgain'
                title={t('tryAgain')}
                type="gradient"
                onPress={props.onTryAgain}
@@ -79,6 +80,7 @@ export const DualMessageOverlay: React.FC<DualMessageOverlayProps> = props => {
            ) : null}
            {!props.children && props.onIgnore ? (
              <Button
+                testID='ignore'
                type="gradient"
                title={t('ignore')}
                onPress={props.onIgnore}
--- a/components/EditableListItem.tsx
+++ b/components/EditableListItem.tsx
@@ -29,7 +29,11 @@ export const EditableListItem: React.FC<EditableListItemProps> = props => {
  }

  return (
-    <ListItem bottomDivider topDivider onPress={() => setIsEditing(true)}>
+    <ListItem
+      {...testIDProps(props.testID)}
+      bottomDivider
+      topDivider
+      onPress={() => setIsEditing(true)}>
      <Icon
        name={props.Icon}
        type={props.IconType}
@@ -37,7 +41,9 @@ export const EditableListItem: React.FC<EditableListItemProps> = props => {
        color={Theme.Colors.Icon}
      />
      <ListItem.Content>
-        <ListItem.Title {...testIDProps(props.testID)} style={{paddingTop: 3}}>
+        <ListItem.Title
+          {...testIDProps(props.testID + 'Title')}
+          style={{paddingTop: 3}}>
          <Text weight="semibold" color={props.titleColor}>
            {props.title}
          </Text>
@@ -57,8 +63,11 @@ export const EditableListItem: React.FC<EditableListItemProps> = props => {
          {props.items.map((item: ListItemProps, index) => {
            return (
              <React.Fragment key={index}>
-                <Text>{t('editLabel', {label: item.label})}</Text>
+                <Text testID={item.testID + 'Label'}>
+                  {t('editLabel', {label: item.label})}
+                </Text>
                <Input
+                  {...testIDProps(item.testID + 'InputField')}
                  autoFocus
                  value={items[index].value}
                  onChangeText={value => updateItems(item.label, value)}
@@ -68,7 +77,9 @@ export const EditableListItem: React.FC<EditableListItemProps> = props => {
                  }}
                />
                {index === 0 && props.response === 'error' && (
-                  <Text style={Theme.TextStyles.error}>
+                  <Text
+                    testID={item.testID + 'ErrorMessage'}
+                    style={Theme.TextStyles.error}>
                    {props.errorMessage}
                  </Text>
                )}
@@ -77,8 +88,15 @@ export const EditableListItem: React.FC<EditableListItemProps> = props => {
          })}
          {props.response === 'success' && overlayOpened && closePopup()}
          <Row>
-            <Button fill type="clear" title={t('cancel')} onPress={dismiss} />
            <Button
+              testID="cancel"
+              fill
+              type="clear"
+              title={t('cancel')}
+              onPress={dismiss}
+            />
+            <Button
+              testID="save"
              fill
              title={t('save')}
              onPress={edit}
@@ -128,4 +146,5 @@ interface EditableListItemProps {
 interface ListItemProps {
  label: string;
  value: string;
+  testID: string;
 }
--- a/components/HelpScreen.tsx
+++ b/components/HelpScreen.tsx
@@ -15,6 +15,7 @@ export const HelpScreen: React.FC<HelpScreenProps & MainRouteProps> = props => {
  return (
    <React.Fragment>
      <Pressable
+        accessible={false}
        onPress={() => {
          setShowHelpPage(!showHelpPage);
        }}>
--- a/components/LanguageSelector.tsx
+++ b/components/LanguageSelector.tsx
@@ -17,7 +17,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = props => {
  return (
    <View>
      <Picker
-        testID="language"
+        testID="languages"
        items={languages}
        selectedValue={i18n.language}
        onValueChange={language => changeLanguage(i18n, language)}
--- a/components/MessageOverlay.tsx
+++ b/components/MessageOverlay.tsx
@@ -24,12 +24,13 @@ export const MessageOverlay: React.FC<MessageOverlayProps> = props => {
      onShow={props.onShow}
      onBackdropPress={props.onBackdropPress}>
      <Column
+        testID={props.testID}
        width={Dimensions.get('screen').width * 0.8}
        style={[Theme.MessageOverlayStyles.popupOverLay, style.customHeight]}>
        <Column padding="21" crossAlign="center">
          {props.title && (
            <Text
-              testID={props.testID}
+              testID={props.testID && props.testID + 'Title'}
              style={{paddingTop: 3}}
              align="center"
              weight="bold"
@@ -40,6 +41,7 @@ export const MessageOverlay: React.FC<MessageOverlayProps> = props => {
          )}
          {props.message && (
            <Text
+              testID={props.testID && props.testID + 'Message'}
              align="center"
              weight="semibold"
              size="small"
@@ -51,6 +53,7 @@ export const MessageOverlay: React.FC<MessageOverlayProps> = props => {
          {props.progress && <Progress progress={props.progress} />}
          {props.hint && (
            <Text
+              testID={props.testID && props.testID + 'Hint'}
              size="smaller"
              color={Theme.Colors.textLabel}
              margin={[4, 0, 0, 0]}>
@@ -61,6 +64,7 @@ export const MessageOverlay: React.FC<MessageOverlayProps> = props => {
        </Column>
        {!props.children && props.onButtonPress ? (
          <Button
+            testID="cancel"
            type="gradient"
            title={props.buttonText ? t(props.buttonText) : t('cancel')}
            onPress={props.onButtonPress}
--- a/components/QrCodeOverlay.tsx
+++ b/components/QrCodeOverlay.tsx
@@ -5,6 +5,7 @@ import {Centered, Column, Row, Text} from './ui';
 import QRCode from 'react-native-qrcode-svg';
 import {Theme} from './ui/styleUtils';
 import {useTranslation} from 'react-i18next';
+import testIDProps from '../shared/commonUtil';
 import {SvgImage} from './ui/svg';

 export const QrCodeOverlay: React.FC<QrCodeOverlayProps> = props => {
@@ -15,10 +16,11 @@ export const QrCodeOverlay: React.FC<QrCodeOverlayProps> = props => {
  const toggleQrOverlay = () => setIsQrOverlayVisible(!isQrOverlayVisible);
  return (
    <React.Fragment>
-      <Pressable onPress={toggleQrOverlay}>
+      <Pressable {...testIDProps('qrCodePressable')} onPress={toggleQrOverlay}>
        <View style={Theme.QrCodeStyles.QrView}>
          <Row>
            <QRCode
+              {...testIDProps('qrCode')}
              size={90}
              value={props.qrCodeDetails}
              backgroundColor={Theme.Colors.QRCodeBackgroundColor}
@@ -26,6 +28,7 @@ export const QrCodeOverlay: React.FC<QrCodeOverlayProps> = props => {
          </Row>
        </View>
        <Row
+          testID="magnifierZoom"
          align="flex-end"
          margin="-35 0 0 67"
          style={Theme.QrCodeStyles.magnifierZoom}>
@@ -46,6 +49,7 @@ export const QrCodeOverlay: React.FC<QrCodeOverlayProps> = props => {
              {t('qrCodeHeader')}
            </Text>
            <Icon
+              {...testIDProps('qrCodeCloseIcon')}
              name="close"
              onPress={toggleQrOverlay}
              color={Theme.Colors.Details}
@@ -54,6 +58,7 @@ export const QrCodeOverlay: React.FC<QrCodeOverlayProps> = props => {
          </Row>
          <Centered testID="qrCodeDetails" pY={30}>
            <QRCode
+              {...testIDProps('qrCodeExpandedView')}
              size={300}
              value={props.qrCodeDetails}
              backgroundColor={Theme.Colors.QRCodeBackgroundColor}
--- a/components/QrScanner.tsx
+++ b/components/QrScanner.tsx
@@ -10,6 +10,7 @@ import {useSelector} from '@xstate/react';
 import {selectIsActive} from '../machines/app';
 import {useTranslation} from 'react-i18next';
 import {useScanLayout} from '../screens/Scan/ScanLayoutController';
+import testIDProps from '../shared/commonUtil';
 import {SvgImage} from './ui/svg';

 export const QrScanner: React.FC<QrScannerProps> = props => {
@@ -48,16 +49,20 @@ export const QrScanner: React.FC<QrScannerProps> = props => {

  const CameraDisabledPopUp: React.FC = () => {
    return (
-      <View style={Theme.Styles.cameraDisabledPopupContainer}>
+      <View
+        {...testIDProps('cameraDisabledPopup')}
+        style={Theme.Styles.cameraDisabledPopupContainer}>
        <Row style={Theme.Styles.cameraDisabledPopUp}>
          <Column style={{flex: 1}}>
            <Text
+              testID="cameraAccessDisabled"
              color={Theme.Colors.whiteText}
              weight="semibold"
              margin="0 0 5 0">
              {t('cameraAccessDisabled')}
            </Text>
            <Text
+              testID="cameraPermissionGuide"
              color={Theme.Colors.whiteText}
              size="regular"
              style={{opacity: 0.8}}>
@@ -66,6 +71,7 @@ export const QrScanner: React.FC<QrScannerProps> = props => {
          </Column>
          <Pressable>
            <Icon
+              testID="close"
              name="close"
              onPress={controller.DISMISS}
              color={Theme.Colors.whiteText}
@@ -81,6 +87,7 @@ export const QrScanner: React.FC<QrScannerProps> = props => {
      <View style={Theme.Styles.scannerContainer}>
        {hasPermission ? (
          <Camera
+            {...testIDProps('camera')}
            style={Theme.Styles.scanner}
            barCodeScannerSettings={{
              barcodeTypes: [BarCodeScanner.Constants.BarCodeType.qr],
@@ -94,6 +101,7 @@ export const QrScanner: React.FC<QrScannerProps> = props => {
      </View>
      {props.title && (
        <Text
+          testID="holdPhoneSteadyMessage"
          align="center"
          weight="semibold"
          style={Theme.TextStyles.base}
@@ -113,7 +121,7 @@ export const QrScanner: React.FC<QrScannerProps> = props => {
          }}>
          {SvgImage.FlipCameraIcon()}
        </TouchableOpacity>
-        <Text size="small" weight="semibold" margin="8">
+        <Text testID="flipCameraText" size="small" weight="semibold" margin="8">
          {t('flipCamera')}
        </Text>
      </Column>
--- a/components/ui/Picker.tsx
+++ b/components/ui/Picker.tsx
@@ -3,6 +3,7 @@ import {Dimensions, Pressable} from 'react-native';
 import {Icon, ListItem, Overlay} from 'react-native-elements';
 import {Column} from './Layout';
 import {Text} from './Text';
+import testIDProps from '../../shared/commonUtil';

 interface Picker extends React.VFC<PickerProps<unknown>> {
  <T>(props: PickerProps<T>): ReturnType<React.FC>;
@@ -38,7 +39,7 @@ export const Picker: Picker = (props: PickerProps<unknown>) => {
          width={Dimensions.get('window').width * 0.8}>
          {props.items.map((item, index) => (
            <ListItem
-              testID={item.value}
+              {...testIDProps(item.value as string)}
              topDivider={index !== 0}
              onPress={() => selectItem(index)}
              key={index}>
--- a/components/ui/svg.tsx
+++ b/components/ui/svg.tsx
@@ -160,6 +160,7 @@ export class SvgImage {
    const {width, height} = Theme.Styles.cameraFlipIcon;
    return (
      <FlipCameraIcon
+        {...testIDProps('flipCameraIcon')}
        color1={Theme.Colors.linearGradientStart}
        color2={Theme.Colors.linearGradientEnd}
        width={width}
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -6,7 +6,7 @@ PODS:
  - AppAuth/ExternalUserAgent (1.6.2):
    - AppAuth/Core
  - ASN1Decoder (1.8.0)
-  - biometric-sdk-react-native (0.2.4):
+  - biometric-sdk-react-native (0.2.6):
    - BiometricSdk (= 0.5.9)
    - React-Core
  - BiometricSdk (0.5.9):
@@ -369,7 +369,7 @@ PODS:
    - ReactCommon/turbomodule/core
  - react-native-secure-key-store (2.0.10):
    - React-Core
-  - react-native-secure-keystore (0.1.1):
+  - react-native-secure-keystore (0.1.2):
    - React-Core
  - react-native-spinkit (1.4.1):
    - React
@@ -778,7 +778,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
  AppAuth: 3bb1d1cd9340bd09f5ed189fb00b1cc28e1e8570
  ASN1Decoder: 6110fdeacfdb41559b1481457a1645be716610aa
-  biometric-sdk-react-native: 5d1207e0d9ee34788cb4ccb59cfc205022d7e3f1
+  biometric-sdk-react-native: d2a3a1279013cc4a7514a1b43fe557eb76e4e4c1
  BiometricSdk: 303e7329404ea4d922dc14108449d10d21574f77
  boost: 57d2868c099736d80fcd648bf211b4431e51a558
  BVLinearGradient: 916632041121a658c704df89d99f04acb038de0f
@@ -840,7 +840,7 @@ SPEC CHECKSUMS:
  react-native-rsa-native: 12132eb627797529fdb1f0d22fd0f8f9678df64a
  react-native-safe-area-context: 39c2d8be3328df5d437ac1700f4f3a4f75716acc
  react-native-secure-key-store: 910e6df6bc33cb790aba6ee24bc7818df1fe5898
-  react-native-secure-keystore: d9e791a495d23c33db7711732f3a761533b882db
+  react-native-secure-keystore: 2396168e3fac38697297bc0b716d87f8683e689f
  react-native-spinkit: da294fd828216ad211fe36a5c14c1e09f09e62db
  react-native-tuvali: bd369208d58ff9e1528c2a76dce126f60d7fd35d
  React-perflogger: d21f182895de9d1b077f8a3cd00011095c8c9100
@@ -876,4 +876,4 @@ SPEC CHECKSUMS:

 PODFILE CHECKSUM: 01f58b130fa221dabb14b2d82d981ef24dcaba53

-COCOAPODS: 1.14.2
+COCOAPODS: 1.14.3
--- a/screens/Home/HomeScreen.tsx
+++ b/screens/Home/HomeScreen.tsx
@@ -15,6 +15,7 @@ import LinearGradient from 'react-native-linear-gradient';
 import {EsignetMosipVCItemMachine} from '../../machines/VCItemMachine/EsignetMosipVCItem/EsignetMosipVCItemMachine';
 import {ErrorMessageOverlay} from '../../components/MessageOverlay';
 import {Pressable} from 'react-native';
+import testIDProps from '../../shared/commonUtil';

 export const HomeScreen: React.FC<HomeRouteProps> = props => {
  const {t} = useTranslation('HomeScreen');
@@ -35,6 +36,8 @@ export const HomeScreen: React.FC<HomeRouteProps> = props => {
  const DownloadFABIcon: React.FC = () => {
    const plusIcon = (
      <Icon
+        {...testIDProps('plusIcon')}
+        accessible={true}
        name={'plus'}
        type={'entypo'}
        size={36}
@@ -49,7 +52,8 @@ export const HomeScreen: React.FC<HomeRouteProps> = props => {
          onPress={() => {
            controller.GOTO_ISSUERS();
          }}
-          testID="downloadIcon"
+          {...testIDProps('downloadCardButton')}
+          accessible={false}
          style={({pressed}) =>
            pressed
              ? Theme.Styles.downloadFabIconPressed
--- a/screens/Home/MyVcs/GetIdInputModal.tsx
+++ b/screens/Home/MyVcs/GetIdInputModal.tsx
@@ -43,7 +43,7 @@ export const GetIdInputModal: React.FC<GetIdInputModalProps> = props => {
            </Text>
            <Row crossAlign="flex-end">
              <Input
-                {...testIDProps('getIdInput')}
+                {...testIDProps('getIdInputModalIndividualId')}
                placeholder={!controller.id ? inputLabel : ''}
                labelStyle={{
                  color: controller.isInvalid
--- a/screens/Home/MyVcs/IdInputModal.tsx
+++ b/screens/Home/MyVcs/IdInputModal.tsx
@@ -59,7 +59,7 @@ export const IdInputModal: React.FC<IdInputModalProps> = props => {
            <Row crossAlign="flex-end" style={Theme.Styles.idInputContainer}>
              <Column style={Theme.Styles.idInputPicker}>
                <Picker
-                  testID="selectIdType"
+                  {...testIDProps('selectIdTypePicker')}
                  selectedValue={controller.idType}
                  onValueChange={controller.SELECT_ID_TYPE}>
                  <Picker.Item label="UIN" value="UIN" />
@@ -67,7 +67,7 @@ export const IdInputModal: React.FC<IdInputModalProps> = props => {
                </Picker>
              </Column>
              <Input
-                {...testIDProps('idInput')}
+                {...testIDProps('idInputModalIndividualId')}
                placeholder={!controller.id ? inputLabel : ''}
                inputContainerStyle={
                  controller.id ? Theme.Styles.idInputBottom : null
@@ -106,7 +106,7 @@ export const IdInputModal: React.FC<IdInputModalProps> = props => {
                </Text>
                <TouchableOpacity activeOpacity={1} onPress={props.onPress}>
                  <Text
-                    testID="getItHere"
+                    testID="getItNow"
                    color={Theme.Colors.AddIdBtnBg}
                    weight="bold"
                    size="small"
--- a/screens/Home/ViewVcModal.tsx
+++ b/screens/Home/ViewVcModal.tsx
@@ -121,6 +121,7 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = props => {
      />

      <MessageOverlay
+        testID='walletBindingError'
        isVisible={controller.isBindingError}
        title={controller.walletBindingError}
        onButtonPress={() => {
--- a/screens/HomeScreenLayout.tsx
+++ b/screens/HomeScreenLayout.tsx
@@ -11,6 +11,7 @@ import {RootRouteProps} from '../routes';
 import {HomeScreen} from './Home/HomeScreen';
 import {IssuersScreen} from './Issuers/IssuersScreen';
 import {SettingScreen} from './Settings/SettingScreen';
+import testIDProps from '../shared/commonUtil';
 import {SvgImage} from '../components/ui/svg';

 const {Navigator, Screen} = createNativeStackNavigator();
@@ -51,6 +52,8 @@ export const HomeScreenLayout: React.FC<RootRouteProps> = props => {
        <HelpScreen
          triggerComponent={
            <Icon
+              {...testIDProps('help')}
+              accessible={true}
              name="question"
              type="font-awesome"
              size={21}
@@ -65,6 +68,8 @@ export const HomeScreenLayout: React.FC<RootRouteProps> = props => {
        <SettingScreen
          triggerComponent={
            <Icon
+              {...testIDProps('settings')}
+              accessible={true}
              name="settings"
              type="simple-line-icon"
              size={21}
--- a/screens/Issuers/IssuersScreen.tsx
+++ b/screens/Issuers/IssuersScreen.tsx
@@ -133,6 +133,7 @@ export const IssuersScreen: React.FC<
            margin={[0, 8, 0, 0]}
          />
          <Button
+            testID="tryAgain"
            fill
            title={t('common:tryAgain')}
            onPress={controller.TRY_AGAIN}
--- a/screens/MainLayout.tsx
+++ b/screens/MainLayout.tsx
@@ -32,7 +32,12 @@ export const MainLayout: React.FC<
  };

  return (
-    <Navigator initialRouteName={mainRoutes[0].name} screenOptions={options}>
+    <Navigator
+      initialRouteName={mainRoutes[0].name}
+      screenOptions={({route}) => ({
+        tabBarAccessibilityLabel: route.name,
+        options,
+      })}>
      {mainRoutes.map(route => (
        <Screen
          key={route.name}
@@ -50,7 +55,7 @@ export const MainLayout: React.FC<
            title: t(route.name),
            tabBarIcon: ({focused}) => (
              <Icon
-                {...testIDProps(route.name)}
+                {...testIDProps(route.name + 'Icon')}
                name={route.icon}
                color={focused ? Theme.Colors.Icon : Theme.Colors.GrayIcon}
                style={focused ? Theme.Styles.bottomTabIconStyle : null}
--- a/screens/QrLogin/QrLogin.tsx
+++ b/screens/QrLogin/QrLogin.tsx
@@ -44,6 +44,7 @@ export const QrLogin: React.FC<QrLoginProps> = props => {
          isVisible={controller.isShowingError}
          title={controller.error}
          onButtonPress={controller.DISMISS}
+          testID='qrLoginError'
        />

        <VerifyIdentityOverlay
@@ -68,6 +69,7 @@ export const QrLogin: React.FC<QrLoginProps> = props => {
              margin={[0, 8, 0, 0]}
            />
            <Button
+              testID='tryAgain'
              fill
              title={t('common:tryAgain')}
              onPress={controller.RETRY_VERIFICATION}
--- a/screens/Request/ReceiveVcScreen.tsx
+++ b/screens/Request/ReceiveVcScreen.tsx
@@ -70,6 +70,7 @@ export const ReceiveVcScreen: React.FC = () => {
            margin={[0, 8, 0, 0]}
          />
          <Button
+            testID='tryAgain'
            fill
            title={t('common:tryAgain')}
            onPress={controller.RETRY_VERIFICATION}
--- a/screens/Request/RequestScreen.tsx
+++ b/screens/Request/RequestScreen.tsx
@@ -6,7 +6,7 @@ import {Centered, Button, Column, Text} from '../../components/ui';
 import {Theme} from '../../components/ui/styleUtils';
 import {useRequestScreen} from './RequestScreenController';
 import BluetoothStateManager from 'react-native-bluetooth-state-manager';
-import {Platform} from 'react-native';
+import {Platform, View} from 'react-native';
 import Storage from '../../shared/storage';
 import {ErrorMessageOverlay} from '../../components/MessageOverlay';
 import {
@@ -18,6 +18,7 @@ import {MainBottomTabParamList} from '../../routes/main';
 import {BOTTOM_TAB_ROUTES} from '../../routes/routesConstants';
 import {ProgressingModal} from '../../components/ProgressingModal';
 import {isIOS} from '../../shared/constants';
+import testIDProps from '../../shared/commonUtil';

 type RequestStackParamList = {
  RequestScreen: undefined;
@@ -106,7 +107,11 @@ export const RequestScreen: React.FC = () => {
 const BluetoothPrompt: React.FC<RequestScreenProps> = ({t}) => {
  return (
    <Centered fill>
-      <Text color={Theme.Colors.errorMessage} align="center" margin="0 10">
+      <Text
+        testID="bluetoothIsTurnedOffMessage"
+        color={Theme.Colors.errorMessage}
+        align="center"
+        margin="0 10">
        {t(isIOS() ? 'bluetoothStateIos' : 'bluetoothStateAndroid')}
      </Text>
    </Centered>
@@ -117,11 +122,15 @@ const NearByPrompt: React.FC<RequestScreenProps> = ({t, controller}) => {
  return (
    <Column fill align="space-between">
      <Centered fill>
-        <Text color={Theme.Colors.errorMessage} align="center">
+        <Text
+          testID="allowNearbyDevicesPermissionMessage"
+          color={Theme.Colors.errorMessage}
+          align="center">
          {t('errors.nearbyDevicesPermissionDenied.message')}
        </Text>
      </Centered>
      <Button
+        testID="allowNearbyDevicesPermissionButton"
        title={t('errors.nearbyDevicesPermissionDenied.button')}
        onPress={controller.GOTO_SETTINGS}
      />
@@ -132,15 +141,19 @@ const NearByPrompt: React.FC<RequestScreenProps> = ({t, controller}) => {
 const SharingQR: React.FC<RequestScreenProps> = ({t, controller}) => {
  return (
    <React.Fragment>
-      <Text align="center">{t('showQrCode')}</Text>
+      <Text testID="showQrCode" align="center">
+        {t('showQrCode')}
+      </Text>

      <Centered fill>
        {controller.openId4VpUri !== '' ? (
-          <QRCode
-            size={200}
-            value={controller.openId4VpUri}
-            backgroundColor={Theme.Colors.QRCodeBackgroundColor}
-          />
+          <View {...testIDProps('qrCode')}>
+            <QRCode
+              size={200}
+              value={controller.openId4VpUri}
+              backgroundColor={Theme.Colors.QRCodeBackgroundColor}
+            />
+          </View>
        ) : null}
      </Centered>
    </React.Fragment>
@@ -150,10 +163,15 @@ const SharingQR: React.FC<RequestScreenProps> = ({t, controller}) => {
 const StatusMessage: React.FC<RequestScreenProps> = ({t, controller}) => {
  return (
    controller.statusMessage !== '' && (
-      <Column elevation={1} padding="16 24">
-        <Text>{controller.statusMessage}</Text>
+      <Column testID='recievedCardStatus' elevation={1} padding="16 24">
+        <Text testID="receiveCardStatusMessage">
+          {controller.statusMessage}
+        </Text>
        {controller.statusHint !== '' && (
-          <Text size="small" color={Theme.Colors.textLabel}>
+          <Text
+            testID="receiveCardStatusHint"
+            size="small"
+            color={Theme.Colors.textLabel}>
            {controller.statusHint}
          </Text>
        )}
--- a/screens/Scan/ScanScreen.tsx
+++ b/screens/Scan/ScanScreen.tsx
@@ -46,6 +46,7 @@ export const ScanScreen: React.FC = () => {
  function noShareableVcText() {
    return (
      <Text
+        testID="noShareableVcs"
        align="center"
        style={{paddingTop: 3}}
        color={Theme.Colors.errorMessage}
@@ -57,7 +58,7 @@ export const ScanScreen: React.FC = () => {

  function bluetoothIsOffText() {
    return (
-      <Text align="center" color={Theme.Colors.errorMessage} margin="0 10">
+      <Text testID="bluetoothIsTurnedOffMessage" align="center" color={Theme.Colors.errorMessage} margin="0 10">
        {t(isIOS() ? 'bluetoothStateIos' : 'bluetoothStateAndroid')}
      </Text>
    );
@@ -87,12 +88,16 @@ export const ScanScreen: React.FC = () => {
    return (
      <Column padding="24" fill align="space-between">
        <Centered fill>
-          <Text align="center" color={Theme.Colors.errorMessage}>
+          <Text
+            testID="allowNearbyDevicesPermissionMessage"
+            align="center"
+            color={Theme.Colors.errorMessage}>
            {t('errors.nearbyDevicesPermissionDenied.message')}
          </Text>
        </Centered>

        <Button
+          testID="allowNearbyDevicesPermissionButton"
          title={t('errors.nearbyDevicesPermissionDenied.button')}
          onPress={openSettings}></Button>
      </Column>
@@ -103,12 +108,16 @@ export const ScanScreen: React.FC = () => {
    return (
      <Column padding="24" fill align="space-between">
        <Centered fill>
-          <Text align="center" color={Theme.Colors.errorMessage}>
+          <Text
+            testID="enableLocationServicesMessage"
+            align="center"
+            color={Theme.Colors.errorMessage}>
            {controller.locationError.message}
          </Text>
        </Centered>

        <Button
+          testID="enableLocationServicesButton"
          title={controller.locationError.button}
          onPress={controller.LOCATION_REQUEST}
        />
@@ -156,6 +165,7 @@ export const ScanScreen: React.FC = () => {
    return (
      !controller.isEmpty && (
        <MessageOverlay
+          testID="storageLimitReachedError"
          isVisible={
            controller.isMinimumStorageRequiredForAuditEntryLimitReached
          }
@@ -171,13 +181,14 @@ export const ScanScreen: React.FC = () => {
    return (
      !controller.isEmpty && (
        <MessageOverlay
+          testID='invalidQrPopup'
          isVisible={controller.selectIsInvalid}
          customHeight={'auto'}
          title={t('invalidQR')}
-          message
          onBackdropPress={controller.DISMISS}>
          <Row>
            <Button
+              testID='cancel'
              fill
              type="clear"
              title={t('common:cancel')}
@@ -185,6 +196,7 @@ export const ScanScreen: React.FC = () => {
              margin={[0, 8, 0, 0]}
            />
            <Button
+              testID='tryAgain'
              fill
              title={t('common:tryAgain')}
              onPress={controller.DISMISS}
--- a/screens/Scan/SendVcScreen.tsx
+++ b/screens/Scan/SendVcScreen.tsx
@@ -143,6 +143,7 @@ export const SendVcScreen: React.FC = () => {
        onBackdropPress={controller.DISMISS}>
        <Row>
          <Button
+            testID='cancel'
            fill
            type="clear"
            title={t('common:cancel')}
@@ -150,6 +151,7 @@ export const SendVcScreen: React.FC = () => {
            margin={[0, 8, 0, 0]}
          />
          <Button
+            testID='tryAgain'
            fill
            title={t('common:tryAgain')}
            onPress={controller.RETRY_VERIFICATION}
--- a/screens/Settings/AboutInji.tsx
+++ b/screens/Settings/AboutInji.tsx
@@ -34,7 +34,7 @@ export const AboutInji: React.FC<AboutInjiProps> = ({appId}) => {
        onPress={() => {
          setShowAboutInji(!showAboutInji);
        }}>
-        <ListItem testID="aboutInji" topDivider bottomDivider>
+        <ListItem {...testIDProps('aboutInji')} topDivider bottomDivider>
          <Icon
            type={'feather'}
            name={'file'}
@@ -43,7 +43,7 @@ export const AboutInji: React.FC<AboutInjiProps> = ({appId}) => {
          />
          <ListItem.Content>
            <ListItem.Title
-              {...testIDProps('aboutInji')}
+              {...testIDProps('aboutInjiTitle')}
              style={{paddingTop: 3}}>
              <Text weight="semibold" color={Theme.Colors.settingsLabel}>
                {t('aboutInji')}
@@ -122,6 +122,7 @@ export const AboutInji: React.FC<AboutInjiProps> = ({appId}) => {
            style={Theme.Styles.versionContainer}>
            <Row>
              <Text
+                testID="tuvaliVersion"
                weight="semibold"
                style={{paddingTop: 3}}
                color={Theme.Colors.aboutVersion}>
--- a/screens/Settings/ReceivedCards.tsx
+++ b/screens/Settings/ReceivedCards.tsx
@@ -6,6 +6,7 @@ import {Theme} from '../../components/ui/styleUtils';
 import {Image} from 'react-native';
 import {useReceivedVcsTab} from '../Home/ReceivedVcsTabController';
 import {ReceivedCardsModal} from './ReceivedCardsModal';
+import testIDProps from '../../shared/commonUtil';
 import {SvgImage} from '../../components/ui/svg';

 export const ReceivedCards: React.FC = () => {
@@ -14,7 +15,9 @@ export const ReceivedCards: React.FC = () => {

  return (
    <React.Fragment>
-      <Pressable onPress={controller.TOGGLE_RECEIVED_CARDS}>
+      <Pressable
+        {...testIDProps('receivedCardsPressableArea')}
+        onPress={controller.TOGGLE_RECEIVED_CARDS}>
        <Column align="center" style={Theme.Styles.receiveCardsContainer}>
          {SvgImage.ReceivedCards()}
          <Text
--- a/screens/Settings/ReceivedCardsModal.tsx
+++ b/screens/Settings/ReceivedCardsModal.tsx
@@ -16,6 +16,7 @@ export const ReceivedCardsModal: React.FC<ReceivedCardsProps> = ({
  const {t} = useTranslation('ReceivedVcsTab');
  return (
    <Modal
+      testID='receivedCardsModal'
      isVisible={isVisible}
      arrowLeft={<Icon name={''} />}
      headerTitle={t('header')}
--- a/screens/Settings/SettingScreen.tsx
+++ b/screens/Settings/SettingScreen.tsx
@@ -24,7 +24,7 @@ const LanguageSetting: React.FC = () => {
  return (
    <LanguageSelector
      triggerComponent={
-        <ListItem>
+        <ListItem {...testIDProps('language')}>
          <Icon
            name="globe"
            size={22}
@@ -33,7 +33,7 @@ const LanguageSetting: React.FC = () => {
          />
          <ListItem.Content>
            <ListItem.Title
-              {...testIDProps('language')}
+              {...testIDProps('languageTitle')}
              style={{paddingTop: 3}}>
              <Text weight="semibold" color={Theme.Colors.settingsLabel}>
                {t('language')}
@@ -41,6 +41,7 @@ const LanguageSetting: React.FC = () => {
            </ListItem.Title>
          </ListItem.Content>
          <Icon
+            {...testIDProps('chevronRightIcon')}
            name="chevron-right"
            size={21}
            color={Theme.Colors.chevronRightColor}
@@ -64,7 +65,7 @@ export const SettingScreen: React.FC<

  return (
    <React.Fragment>
-      <Pressable onPress={controller.TOGGLE_SETTINGS}>
+      <Pressable accessible={false} onPress={controller.TOGGLE_SETTINGS}>
        {props.triggerComponent}
      </Pressable>
      <Modal
@@ -89,7 +90,9 @@ export const SettingScreen: React.FC<
            <Row
              align="space-evenly"
              backgroundColor={Theme.Colors.whiteBackgroundColor}>
-              <Pressable onPress={controller.RECEIVE_CARD}>
+              <Pressable
+                {...testIDProps('receiveCardPressableArea')}
+                onPress={controller.RECEIVE_CARD}>
                <Column
                  align="center"
                  style={Theme.Styles.receiveCardsContainer}>
@@ -165,10 +168,12 @@ export const SettingScreen: React.FC<
                  {
                    label: t('credentialRegistry'),
                    value: controller.credentialRegistry,
+                    testID: 'credentialRegistry',
                  },
                  {
                    label: t('esignethosturl'),
                    value: controller.esignetHostUrl,
+                    testID: 'esignetHost',
                  },
                ]}
                response={controller.credentialRegistryResponse}