chore: add accessibility props to components and screens

packages/legacy/core/App/components/buttons/ToggleButton.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { Pressable, Animated } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialIcons'
 import { useTheme } from '../../contexts/theme'
+import { useTranslation } from 'react-i18next'
 
 interface ToggleButtonProps {
   isEnabled: boolean
@@ -24,6 +25,7 @@ const ToggleButton: React.FC<ToggleButtonProps> = ({
 }) => {
   const { ColorPallet } = useTheme()
   const [toggleAnim] = useState(new Animated.Value(isEnabled ? 1 : 0))
+  const { t } = useTranslation()
 
   useEffect(() => {
     Animated.timing(toggleAnim, {
@@ -47,7 +49,7 @@ const ToggleButton: React.FC<ToggleButtonProps> = ({
     <Pressable
       accessible
       testID={testID}
-      accessibilityLabel="Toggle Button"
+      accessibilityLabel={isEnabled ? t('Biometry.On') : t('Biometry.Off')}
       accessibilityRole="switch"
       accessibilityState={{
         checked: isEnabled,

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

@@ -85,6 +85,7 @@ const ActionSlider: React.FC<Props> = ({ actions, onDismiss }) => {
                   key={action.text}
                   testID={testIdWithKey(action.text)}
                   accessibilityLabel={testIdWithKey(action.text)}
+                  accessibilityRole="button"
                   style={styles.drawerRow}
                   onPress={action.onPress}
                 >

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

@@ -121,6 +121,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({ messageProps }) => {
         {message.messageOpensCallbackType && (
           <TouchableOpacity
             accessibilityLabel={textForCallbackType(message.messageOpensCallbackType)}
+            accessibilityRole="button"
             testID={testIdForCallbackType(message.messageOpensCallbackType)}
             onPress={() => {
               if (message.onDetails) message.onDetails()

packages/legacy/core/App/components/inputs/CheckBoxRow.tsx

@@ -46,6 +46,8 @@ const CheckBoxRow: React.FC<Props> = ({
       <TouchableOpacity
         accessible={accessible}
         accessibilityLabel={accessibilityLabel}
+        accessibilityRole="checkbox"
+        accessibilityState={{ checked }}
         testID={testID}
         onPress={onPress}
         hitSlop={hitSlop}

packages/legacy/core/App/components/listItems/ContactListItem.tsx

@@ -90,6 +90,7 @@ const ContactListItem: React.FC<ContactListItemProps> = ({ contact, navigation }
       onPress={navigateToContact}
       testID={testIdWithKey('Contact')}
       accessibilityLabel={t('ContactDetails.AContact')}
+      accessibilityRole="button"
     >
       <View style={styles.container}>
         <View style={styles.avatarContainer}>

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

@@ -223,6 +223,7 @@ const InfoBox: React.FC<InfoBoxProps> = ({
           {message && !showDetails && (showDetailsInfo ?? true) && (
             <TouchableOpacity
               accessibilityLabel={t('Global.ShowDetails')}
+              accessibilityRole="button"
               testID={testIdWithKey('ShowDetails')}
               style={{ marginVertical: 14 }}
               onPress={onShowDetailsTouched}
@@ -263,7 +264,10 @@ const InfoBox: React.FC<InfoBoxProps> = ({
             </View>
           )}
           {showVersionFooter ? (
-            <Text style={[TextTheme.caption, { flex: 1, marginTop: 8, textAlign: 'center' }]} testID={testIdWithKey('VersionNumber')}>
+            <Text
+              style={[TextTheme.caption, { flex: 1, marginTop: 8, textAlign: 'center' }]}
+              testID={testIdWithKey('VersionNumber')}
+            >
               {`${t('Settings.Version')} ${getVersion()} (${getBuildNumber()})`}
             </Text>
           ) : null}

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

@@ -327,7 +327,7 @@ const NewQRView: React.FC<Props> = ({ defaultToConnect, handleCodeScan, error, e
           </ScrollView>
         )}
 
-        <View style={styles.tabContainer}>
+        <View accessible={true} style={styles.tabContainer} accessibilityRole="tablist">
           <ScanTab
             title={t('Scan.ScanQRCode')}
             iconName={'crop-free'}

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

@@ -32,6 +32,7 @@ const ScanTab: React.FC<ScanTabProps> = ({ onPress, active, iconName, title }) =
       style={styles.container}
       onPress={onPress}
       accessibilityLabel={title}
+      accessibilityRole="tab"
       testID={testIdWithKey(title)}
     >
       <Icon name={iconName} size={30} color={styles.text.color}></Icon>

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

@@ -139,7 +139,7 @@ const VerifierCredentialCard: React.FC<VerifierCredentialCardProps> = ({
       language: i18n.language,
     }
     bundleResolver.resolveAllBundles(params).then((bundle) => {
-      setOverlay(o => ({
+      setOverlay((o) => ({
         ...o,
         ...bundle,
         brandingOverlay: bundle.brandingOverlay as BrandingOverlay,
@@ -185,7 +185,7 @@ const VerifierCredentialCard: React.FC<VerifierCredentialCardProps> = ({
     const [showImageModal, setShowImageModal] = useState(false)
 
     useEffect(() => {
-      setValue(v => formatIfDate(item.format, v))
+      setValue((v) => formatIfDate(item.format, v))
     }, [item.format])
 
     return (
@@ -208,6 +208,7 @@ const VerifierCredentialCard: React.FC<VerifierCredentialCardProps> = ({
             {isDataUrl(value) ? (
               <TouchableOpacity
                 accessibilityLabel={t('Record.Zoom')}
+                accessibilityRole="imagebutton"
                 testID={testIdWithKey('zoom')}
                 onPress={() => setShowImageModal(true)}
               >

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

@@ -79,7 +79,7 @@ const AppGuideModal: React.FC<AppGuideModalProps> = ({
   })
 
   return (
-    <Modal transparent>
+    <Modal transparent accessibilityViewIsModal>
       <View style={styles.modalCenter}>
         <View style={styles.container}>
           <View style={styles.headerContainer}>

packages/legacy/core/App/components/record/Record.tsx

@@ -79,6 +79,7 @@ const Record: React.FC<RecordProps> = ({ header, footer, fields, hideFieldValues
                   testID={testIdWithKey('HideAll')}
                   accessible={true}
                   accessibilityLabel={t('Record.HideAll')}
+                  accessibilityRole="button"
                 >
                   <Text style={ListItems.recordLink}>{t('Record.HideAll')}</Text>
                 </TouchableOpacity>

packages/legacy/core/App/components/record/RecordBinaryField.tsx

@@ -37,6 +37,7 @@ const RecordBinaryField: React.FC<RecordBinaryFieldProps> = ({ attributeValue, s
           accessibilityLabel={t('Record.Zoom')}
           testID={testIdWithKey('zoom')}
           onPress={() => setShowImageModal(true)}
+          accessibilityRole="imagebutton"
         >
           <Image style={styles.image} source={{ uri: attributeValue }} />
         </TouchableOpacity>

packages/legacy/core/App/components/record/RecordField.tsx

@@ -107,6 +107,7 @@ const RecordField: React.FC<RecordFieldProps> = ({
           <TouchableOpacity
             accessible={true}
             accessibilityLabel={shown ? t('Record.Hide') : t('Record.Show')}
+            accessibilityRole="button"
             testID={testIdWithKey('ShowHide')}
             activeOpacity={1}
             onPress={onToggleViewPressed}

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

@@ -19,7 +19,7 @@ const HeaderTitle: React.FC<Props> = ({ children }) => {
   })
 
   return (
-    <Text numberOfLines={1} ellipsizeMode="tail" style={styles.title}>
+    <Text accessibilityRole="header" numberOfLines={1} ellipsizeMode="tail" style={styles.title}>
       {children}
     </Text>
   )

packages/legacy/core/App/components/tour/TourOverlay.tsx

@@ -85,7 +85,11 @@ export const TourOverlay = (props: TourOverlayProps) => {
   }, [windowWidth, windowHeight])
 
   return currentStep !== undefined ? (
-    <View style={{ position: 'absolute', top: 0, left: 0, height: windowHeight + 1, width: windowWidth + 1 }} testID={testIdWithKey('SpotlightOverlay')}>
+    <View
+      accessibilityViewIsModal
+      style={{ position: 'absolute', top: 0, left: 0, height: windowHeight + 1, width: windowWidth + 1 }}
+      testID={testIdWithKey('SpotlightOverlay')}
+    >
       <Svg
         testID={testIdWithKey('SpotOverlay')}
         height={windowHeight + 1}

packages/legacy/core/App/localization/en/index.ts

@@ -279,6 +279,8 @@ const translation = {
   },
   "Biometry": {
     "Toggle": "Toggle Biometrics",
+    "On": "Biomtrics On",
+    "Off": "Biometrics Off",
     "EnabledText1": "Unlock the wallet with your phone's biometrics instead of your wallet PIN.",
     "EnabledText2": "Using biometrics means that all fingerprints or face ID added on this phone will have access to your wallet.",
     "NotEnabledText1": "Biometrics is not currently setup on this device and therefore cannot be enabled.",

packages/legacy/core/App/localization/fr/index.ts

@@ -278,6 +278,8 @@ const translation = {
     },
     "Biometry": {
         "Toggle": "Basculer la biométrie",
+        "On": "Biométrie Activée",
+        "Off": "Biométrie Desactivée",
         "EnabledText1": "Déverrouiller votre portefeuille avec la biométrie de votre appareil au lieu d’utiliser le NIP du portefeuille.",
         "EnabledText2": "Toute personne qui a des données biométriques enregistrées sur cet appareil pourra déverrouiller votre portefeuille et avoir accès à vos attestations.",
         "NotEnabledText1": "La biométrie n'est pas actuellement configurée sur cet appareil et ne peut donc pas être activée.",

packages/legacy/core/App/localization/pt-br/index.ts

@@ -256,6 +256,8 @@ const translation = {
   },
   "Biometry": {
     "Toggle": "Habilitar Biometria",
+    "On": "Biometria ativada",
+    "Off": "Biometria desativada",
     "EnabledText1": "Destravar a carteira utilizando a biometria de seu telefone ao invés do seu PIN.",
     "EnabledText2": "Usar a biometria significa que todas impressões digitais ou face ID adicionadas neste telefone terão acesso à sua carteira.",
     "NotEnabledText1": "Biometria não está configurada nesse dispositivo e portanto não pode ser habilitada.",

packages/legacy/core/App/modules/openid/components/CredentialRowCard.tsx

@@ -46,7 +46,12 @@ export function OpenIDCredentialRowCard({ name, issuer, bgColor, bgImage, txtCol
   //
   return (
     <View style={style.container}>
-      <TouchableOpacity onPress={onPress} style={style.rowContainer}>
+      <TouchableOpacity
+        onPress={onPress}
+        style={style.rowContainer}
+        accessibilityLabel={name}
+        accessibilityRole="button"
+      >
         <View style={[style.issuerBadge, bgColor ? { backgroundColor: bgColor } : {}]}>
           {bgImage ? <Image style={style.imageStyle} source={{ uri: bgImage }} resizeMode="cover" /> : null}
         </View>

packages/legacy/core/App/modules/openid/components/OpenIDCredentialCard.tsx

@@ -227,6 +227,7 @@ const OpenIDCredentialCard: React.FC<CredentialCardProps> = ({
       accessibilityLabel={`${display?.issuer.name ? `${t('Credentials.IssuedBy')} ${display?.issuer.name}` : ''}, ${t(
         'Credentials.Credential'
       )}.`}
+      accessibilityRole="button"
       disabled={typeof onPress === 'undefined' ? true : false}
       onPress={onPress}
       style={[styles.container, style]}

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

@@ -67,7 +67,9 @@ const Language = () => {
             <View style={[styles.section, styles.sectionRow]}>
               <Text style={TextTheme.title}>{value}</Text>
               <BouncyCheckbox
-                accessibilityLabel={value}
+                accessibilityLabel={''} // To avoid Voice Over reading the value twice (one time from the text component and another time from the BouncyCheckbox component)
+                accessibilityRole="radio"
+                accessibilityState={{ checked: id === i18n.language }}
                 disableText
                 fillColor={ColorPallet.brand.secondaryBackground}
                 unfillColor={ColorPallet.brand.secondaryBackground}

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

@@ -83,6 +83,7 @@ const ProofRequestsCard: React.FC<ProofRequestsCardProps> = ({ navigation, templ
       style={style.card}
       onPress={() => navigation.navigate(Screens.ProofRequestDetails, { templateId: template.id, connectionId })}
       accessibilityLabel={t('Screens.ProofRequestDetails')}
+      accessibilityRole="button"
       testID={testIdWithKey('ProofRequestsCard')}
     >
       <View style={style.textContainer}>

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

@@ -153,6 +153,7 @@ const ProofChangeCredential: React.FC<ProofChangeProps> = ({ route, navigation }
           return (
             <View style={styles.pageMargin}>
               <TouchableOpacity
+                accessibilityRole="button"
                 testID={testIdWithKey(`select:${item.credId}`)}
                 onPress={() => changeCred(item.credId ?? '')}
                 style={[item.credId === selectedCred ? styles.selectedCred : undefined, { marginBottom: 10 }]}

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

@@ -98,6 +98,7 @@ const ProofRequestUsageHistoryRecord: React.FC<ProofRequestUsageHistoryRecordPro
       onPress={onDetails}
       disabled={!presentationReceived}
       accessibilityLabel={t('Screens.ProofDetails')}
+      accessibilityRole="button"
       testID={testIdWithKey('ProofDetails')}
     >
       <View style={style.leftContainer}>

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

@@ -339,6 +339,7 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
       <TouchableOpacity
         accessible={true}
         accessibilityLabel={accessibilityLabel}
+        accessibilityRole="button"
         testID={testID}
         style={styles.sectionRow}
         onPress={onPress}

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

@@ -61,6 +61,9 @@ const UseBiometry: React.FC = () => {
       minHeight: 200,
       marginBottom: 66,
     },
+    biometryAvailableRowGap: {
+      rowGap: 20,
+    },
   })
 
   useEffect(() => {
@@ -281,18 +284,16 @@ const UseBiometry: React.FC = () => {
           <Assets.svg.biometrics style={styles.image} />
         </View>
         {biometryAvailable ? (
-          <View>
+          <View style={styles.biometryAvailableRowGap}>
             <Text style={TextTheme.normal}>{t('Biometry.EnabledText1')}</Text>
-            <Text></Text>
             <Text style={TextTheme.normal}>
               {t('Biometry.EnabledText2')}
               <Text style={TextTheme.bold}> {t('Biometry.Warning')}</Text>
             </Text>
           </View>
         ) : (
-          <View>
+          <View style={styles.biometryAvailableRowGap}>
             <Text style={TextTheme.normal}>{t('Biometry.NotEnabledText1')}</Text>
-            <Text></Text>
             <Text style={TextTheme.normal}>{t('Biometry.NotEnabledText2')}</Text>
           </View>
         )}

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

@@ -123,14 +123,15 @@ exports[`ChatMessage Credential offer renders correctly 1`] = `
                 ]
               }
             >
-              Jan 1, 12:00 am
+              Jan 1, 2024, 12:00 am
             </Text>
           </View>
         </View>
       </View>
     </View>
     <View
       accessibilityLabel="Chat.ViewOffer"
+      accessibilityRole="button"
       accessibilityState={
         Object {
           "busy": undefined,
@@ -324,14 +325,15 @@ exports[`ChatMessage Proof request renders correctly 1`] = `
                 ]
               }
             >
-              Jan 1, 12:00 am
+              Jan 1, 2024, 12:00 am
             </Text>
           </View>
         </View>
       </View>
     </View>
     <View
       accessibilityLabel="Chat.ViewRequest"
+      accessibilityRole="button"
       accessibilityState={
         Object {
           "busy": undefined,
@@ -525,14 +527,15 @@ exports[`ChatMessage Sent presentation renders correctly 1`] = `
                 ]
               }
             >
-              Jan 1, 12:00 am
+              Jan 1, 2024, 12:00 am
             </Text>
           </View>
         </View>
       </View>
     </View>
     <View
       accessibilityLabel="Chat.OpenPresentation"
+      accessibilityRole="button"
       accessibilityState={
         Object {
           "busy": undefined,

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

@@ -13,10 +13,11 @@ exports[`CheckBoxRow Component Renders correctly 1`] = `
 >
   <View
     accessibilityLabel="Hey"
+    accessibilityRole="checkbox"
     accessibilityState={
       Object {
         "busy": undefined,
-        "checked": undefined,
+        "checked": true,
         "disabled": undefined,
         "expanded": undefined,
         "selected": undefined,

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

@@ -88,6 +88,7 @@ exports[`InfoBox Component Renders correctly as Error 1`] = `
     <View>
       <View
         accessibilityLabel="Global.ShowDetails"
+        accessibilityRole="button"
         accessibilityState={
           Object {
             "busy": undefined,
@@ -342,6 +343,7 @@ exports[`InfoBox Component Renders correctly as Info 1`] = `
     <View>
       <View
         accessibilityLabel="Global.ShowDetails"
+        accessibilityRole="button"
         accessibilityState={
           Object {
             "busy": undefined,
@@ -596,6 +598,7 @@ exports[`InfoBox Component Renders correctly as Success 1`] = `
     <View>
       <View
         accessibilityLabel="Global.ShowDetails"
+        accessibilityRole="button"
         accessibilityState={
           Object {
             "busy": undefined,
@@ -850,6 +853,7 @@ exports[`InfoBox Component Renders correctly as Warning 1`] = `
     <View>
       <View
         accessibilityLabel="Global.ShowDetails"
+        accessibilityRole="button"
         accessibilityState={
           Object {
             "busy": undefined,