packages/legacy/core/App/components/chat/MessageInput.tsx

@@ -27,6 +27,8 @@ export const renderComposer = (props: any, theme: any, placeholder: string) => (
     }}
     placeholder={placeholder}
     placeholderTextColor={theme.placeholderText}
+    // the placeholder is read by accessibility features when multiline is enabled so a label is not necessary (results in double announcing if used)
+    textInputProps={{ accessibilityLabel: '' }}
   />
 )
 

packages/legacy/core/App/components/misc/ConnectionAlert.tsx

@@ -9,6 +9,7 @@ import { hitSlop } from '../../constants'
 import { useTheme } from '../../contexts/theme'
 import { RootStackParams, Screens, Stacks } from '../../types/navigators'
 import PopupModal from '../modals/PopupModal'
+import Link from '../texts/Link'
 
 import { InfoBoxType } from './InfoBox'
 import UnorderedList from './UnorderedList'
@@ -41,11 +42,6 @@ const ConnectionAlert: React.FC<ConnectionAlertProps> = ({ connectionID }) => {
       paddingVertical: 15,
       marginVertical: 15,
     },
-    fakeLink: {
-      ...TextTheme.normal,
-      color: ColorPallet.notification.infoText,
-      textDecorationLine: 'underline',
-    },
     row: {
       flexDirection: 'row',
     },
@@ -104,13 +100,12 @@ const ConnectionAlert: React.FC<ConnectionAlertProps> = ({ connectionID }) => {
                   t('ConnectionAlert.PopupPoint3'),
                 ]}
               />
-              <Text style={styles.modalText}>
-                {t('ConnectionAlert.SettingsInstruction')}
-                <Text style={styles.fakeLink} onPress={navigateToSettings}>
-                  {t('ConnectionAlert.SettingsLink')}
-                </Text>
-                .
-              </Text>
+              <Text style={styles.modalText}>{t('ConnectionAlert.SettingsInstruction')}</Text>
+              <Link
+                style={{ marginBottom: 8 }}
+                onPress={navigateToSettings}
+                linkText={t('ConnectionAlert.SettingsLink')}
+              />
               <Text style={styles.modalText}>{t('ConnectionAlert.PrivacyMessage')}</Text>
             </View>
           }

packages/legacy/core/App/components/misc/EmptyListContacts.tsx

@@ -5,7 +5,7 @@ import { StyleSheet, Text, View } from 'react-native'
 
 import { useTheme } from '../../contexts/theme'
 import { ContactStackParams, Screens, Stacks } from '../../types/navigators'
-import { testIdWithKey } from '../../utils/testable'
+import Link from '../texts/Link'
 
 export interface EmptyListProps {
   navigation: StackNavigationProp<ContactStackParams, Screens.Contacts>
@@ -26,12 +26,12 @@ const EmptyListContacts: React.FC<EmptyListProps> = ({ navigation }) => {
     },
     text: {
       textAlign: 'center',
-      paddingTop: 10,
+      marginTop: 10,
     },
-    fakeLink: {
-      ...TextTheme.normal,
-      color: ColorPallet.notification.infoText,
-      textDecorationLine: 'underline',
+    link: {
+      textAlign: 'center',
+      marginTop: 10,
+      alignSelf: 'center',
     },
   })
 
@@ -42,15 +42,9 @@ const EmptyListContacts: React.FC<EmptyListProps> = ({ navigation }) => {
   return (
     <View style={styles.container}>
       <Assets.svg.contactBook fill={ListItems.emptyList.color} height={120} />
-      <Text style={[TextTheme.headingThree, styles.text, { paddingTop: 30 }]}>{t('Contacts.EmptyList')}</Text>
+      <Text style={[TextTheme.headingThree, styles.text, { marginTop: 30 }]}>{t('Contacts.EmptyList')}</Text>
       <Text style={[ListItems.emptyList, styles.text]}>{t('Contacts.PeopleAndOrganizations')}</Text>
-      <Text
-        style={[styles.fakeLink, styles.text]}
-        onPress={navigateToWhatAreContacts}
-        testID={testIdWithKey('WhatAreContacts')}
-      >
-        {t('Contacts.WhatAreContacts')}
-      </Text>
+      <Link style={styles.link} linkText={t('Contacts.WhatAreContacts')} onPress={navigateToWhatAreContacts} />
     </View>
   )
 }

packages/legacy/core/App/components/modals/CommonRemoveModal.tsx

@@ -10,7 +10,7 @@ import { hitSlop } from '../../constants'
 import { useTheme } from '../../contexts/theme'
 import { GenericFn } from '../../types/fn'
 import { ModalUsage } from '../../types/remove'
-import { testIdWithKey } from '../../utils/testable'
+import { testIdForAccessabilityLabel, testIdWithKey } from '../../utils/testable'
 import Button, { ButtonType } from '../buttons/Button'
 import ContentGradient from '../misc/ContentGradient'
 import UnorderedListModal from '../misc/UnorderedListModal'
@@ -40,6 +40,8 @@ const Dropdown: React.FC<RemoveProps> = ({ title, content }) => {
     <>
       <TouchableOpacity
         onPress={() => setIsCollapsed(!isCollapsed)}
+        accessibilityLabel={title}
+        testID={testIdWithKey(testIdForAccessabilityLabel(title))}
         style={[
           {
             padding: 15,

packages/legacy/core/App/components/texts/Link.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Text, StyleSheet, TextStyle, TextProps } from 'react-native'
+
+import { useTheme } from '../../contexts/theme'
+import { testIdForAccessabilityLabel, testIdWithKey } from '../../utils/testable'
+
+interface LinkProps {
+  linkText: string
+  style?: TextStyle
+  textProps?: TextProps
+  onPress: () => void
+}
+
+const Link: React.FC<LinkProps> = ({ linkText, onPress, style = {}, ...textProps }) => {
+  const { TextTheme, ColorPallet } = useTheme()
+  const styles = StyleSheet.create({
+    link: {
+      ...TextTheme.normal,
+      color: ColorPallet.brand.link,
+      textDecorationLine: 'underline',
+      alignSelf: 'flex-start',
+    },
+  })
+  return (
+    <Text
+      style={[styles.link, style]}
+      accessibilityLabel={linkText}
+      accessible
+      accessibilityRole={'link'}
+      testID={testIdWithKey(testIdForAccessabilityLabel(linkText))}
+      onPress={onPress}
+      {...textProps}
+    >
+      {linkText}
+    </Text>
+  )
+}
+
+export default Link

packages/legacy/core/App/index.ts

@@ -16,6 +16,7 @@ import ErrorModal from './components/modals/ErrorModal'
 import NetInfo from './components/network/NetInfo'
 import Record from './components/record/Record'
 import InfoTextBox from './components/texts/InfoTextBox'
+import Link from './components/texts/Link'
 import { ToastType } from './components/toast/BaseToast'
 import toastConfig from './components/toast/ToastConfig'
 import { AttachTourStep } from './components/tour/AttachTourStep'
@@ -54,7 +55,7 @@ export { animatedComponents } from './animated-components'
 export { theme } from './theme'
 export { useAuth } from './contexts/auth'
 export { NavigationTheme } from './theme'
-export { testIdWithKey } from './utils/testable'
+export { testIdWithKey, testIdForAccessabilityLabel } from './utils/testable'
 export { Screens, Stacks, TabStacks } from './types/navigators'
 export { createStyles } from './screens/OnboardingPages'
 export { statusBarStyleForColor, StatusBarStyles } from './utils/luminance'
@@ -120,6 +121,7 @@ export {
   InfoTextBox,
   InfoBox,
   InfoBoxType,
+  Link,
   ToastType,
   toastConfig,
   RootStack,

packages/legacy/core/App/screens/WhatAreContacts.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native'
 
+import Link from '../components/texts/Link'
 import { useTheme } from '../contexts/theme'
 import { Screens, Stacks } from '../types/navigators'
 
@@ -28,10 +29,6 @@ const WhatAreContacts: React.FC<WhatAreContactsProps> = ({ navigation }) => {
       paddingLeft: 25,
       paddingRight: 25,
     },
-    fakeLink: {
-      color: ColorPallet.brand.link,
-      textDecorationLine: 'underline',
-    },
   })
 
   const goToContactList = () => {
@@ -65,12 +62,8 @@ const WhatAreContacts: React.FC<WhatAreContactsProps> = ({ navigation }) => {
         <Text style={styles.title}>{t('WhatAreContacts.Title')}</Text>
         <Text style={TextTheme.normal}>{t('WhatAreContacts.Preamble')}</Text>
         {bulletPoints}
-        <Text style={[TextTheme.normal, { marginBottom: 30 }]}>
-          {`${t('WhatAreContacts.RemoveContacts')} `}
-          <Text onPress={goToContactList} style={[TextTheme.normal, styles.fakeLink]}>
-            {t('WhatAreContacts.ContactsLink')}.
-          </Text>
-        </Text>
+        <Text style={TextTheme.normal}>{`${t('WhatAreContacts.RemoveContacts')} `}</Text>
+        <Link linkText={t('WhatAreContacts.ContactsLink')} onPress={goToContactList} />
       </ScrollView>
     </SafeAreaView>
   )

packages/legacy/core/__tests__/components/Link.test.tsx

@@ -0,0 +1,16 @@
+import { render, fireEvent } from '@testing-library/react-native'
+import React from 'react'
+
+import Link from '../../App/components/texts/Link'
+import { testIdWithKey } from '../../App/utils/testable'
+
+describe('Link Component', () => {
+  test('Renders correctly, testID exists, and is pressable', async () => {
+    const onPress = jest.fn()
+    const tree = render(<Link linkText={'my link'} onPress={onPress} />)
+    const link = tree.getByTestId(testIdWithKey('MyLink'))
+    fireEvent(link, 'press')
+    expect(onPress).toBeCalledTimes(1)
+    expect(tree).toMatchSnapshot()
+  })
+})

packages/legacy/core/__tests__/components/__snapshots__/CommonRemoveModal.test.tsx.snap

@@ -2614,6 +2614,7 @@ exports[`CommonRemoveModal Component Remove credential renders correctly 1`] = `
             }
           >
             <View
+              accessibilityLabel="CredentialDetails.YouWillNotLose"
               accessibilityState={
                 Object {
                   "busy": undefined,
@@ -2651,6 +2652,7 @@ exports[`CommonRemoveModal Component Remove credential renders correctly 1`] = `
                   "padding": 15,
                 }
               }
+              testID="com.ariesbifold:id/CredentialDetails.YouWillNotLose"
             >
               <Text
                 style={
@@ -2822,6 +2824,7 @@ exports[`CommonRemoveModal Component Remove credential renders correctly 1`] = `
             }
           >
             <View
+              accessibilityLabel="CredentialDetails.HowToGetThisCredentialBack"
               accessibilityState={
                 Object {
                   "busy": undefined,
@@ -2859,6 +2862,7 @@ exports[`CommonRemoveModal Component Remove credential renders correctly 1`] = `
                   "padding": 15,
                 }
               }
+              testID="com.ariesbifold:id/CredentialDetails.HowToGetThisCredentialBack"
             >
               <Text
                 style={

packages/legacy/core/__tests__/components/__snapshots__/Link.test.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Link Component Renders correctly, testID exists, and is pressable 1`] = `
+<Text
+  accessibilityLabel="my link"
+  accessibilityRole="link"
+  accessible={true}
+  onPress={
+    [MockFunction] {
+      "calls": Array [
+        Array [],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  style={
+    Array [
+      Object {
+        "alignSelf": "flex-start",
+        "color": "#FFFFFF",
+        "fontSize": 18,
+        "fontWeight": "normal",
+        "textDecorationLine": "underline",
+      },
+      Object {},
+    ]
+  }
+  testID="com.ariesbifold:id/MyLink"
+>
+  my link
+</Text>
+`;

packages/legacy/core/__tests__/screens/__snapshots__/WhatAreContacts.test.tsx.snap

@@ -195,39 +195,36 @@ exports[`WhatAreContacts Screen Renders correctly 1`] = `
         </Text>
       </View>
       <Text
+        style={
+          Object {
+            "color": "#FFFFFF",
+            "fontSize": 18,
+            "fontWeight": "normal",
+          }
+        }
+      >
+        WhatAreContacts.RemoveContacts 
+      </Text>
+      <Text
+        accessibilityLabel="WhatAreContacts.ContactsLink"
+        accessibilityRole="link"
+        accessible={true}
+        onPress={[Function]}
         style={
           Array [
             Object {
+              "alignSelf": "flex-start",
               "color": "#FFFFFF",
               "fontSize": 18,
               "fontWeight": "normal",
+              "textDecorationLine": "underline",
             },
-            Object {
-              "marginBottom": 30,
-            },
+            Object {},
           ]
         }
+        testID="com.ariesbifold:id/WhatAreContacts.ContactsLink"
       >
-        WhatAreContacts.RemoveContacts 
-        <Text
-          onPress={[Function]}
-          style={
-            Array [
-              Object {
-                "color": "#FFFFFF",
-                "fontSize": 18,
-                "fontWeight": "normal",
-              },
-              Object {
-                "color": "#FFFFFF",
-                "textDecorationLine": "underline",
-              },
-            ]
-          }
-        >
-          WhatAreContacts.ContactsLink
-          .
-        </Text>
+        WhatAreContacts.ContactsLink
       </Text>
     </View>
   </RCTScrollView>