feat: add accessibilityLabel to support Android Appium

- Added `accessibilityLabel` prop in components that declare the `testID` prob. It's value defaults to `testID` if given null. This aims to fix Appium issue with Android testID.

Author: MoKamall

examples/default/src/components/InputField.tsx

@@ -49,7 +49,7 @@ export const InputField = forwardRef<TextInput, InputFieldProps>(
           style={[styles.textInput, style]}
           maxLength={maxLength}
           accessible={true}
-          accessibilityLabel={accessibilityLabel}
+          accessibilityLabel={accessibilityLabel ?? testID}
           keyboardType={keyboardType}
           value={value}
           testID={testID}

examples/default/src/components/ListTile.tsx

@@ -8,21 +8,23 @@ interface ListTileProps extends PropsWithChildren {
   onPress?: () => void;
   testID?: string;
   truncateSubtitle?: boolean;
-  testID?: string;
+  accessibilityLabel?: string;
 }
 
 export const ListTile: React.FC<ListTileProps> = ({ title,
                                                     subtitle,
                                                     onPress,
                                                     children,
                                                     testID,
-                                                    truncateSubtitle = false, }) => {
+                                                    truncateSubtitle = false,
+                                                    accessibilityLabel, }) => {
   return (
     <Pressable
       onPress={onPress}
       p="4"
       rounded="2"
       testID={testID}
+      accessibilityLabel={accessibilityLabel ?? testID}
       shadow="1"
       accessible={true}
       borderBottomWidth="1"

examples/default/src/components/PlatformListTile.tsx

@@ -8,6 +8,7 @@ interface PlatformListTileProps extends PropsWithChildren {
   onPress?: () => void;
   platform?: 'ios' | 'android';
   testID?: string;
+  accessibilityLabel?: string;
 }
 
 export const PlatformListTile: React.FC<PlatformListTileProps> = ({
@@ -16,6 +17,7 @@ export const PlatformListTile: React.FC<PlatformListTileProps> = ({
   platform,
   children,
   testID,
+  accessibilityLabel,
 }) => {
   if (Platform.OS === platform || !platform) {
     return (
@@ -28,7 +30,8 @@ export const PlatformListTile: React.FC<PlatformListTileProps> = ({
         borderColor="coolGray.300"
         bg="coolGray.100"
         _pressed={{ bg: 'coolGray.200' }}
-        testID={testID}>
+        testID={testID}
+        accessibilityLabel={accessibilityLabel ?? testID}>
         <HStack justifyContent="space-between" alignItems="center">
           <Text>{title}</Text>
           <Box width={160}>{children}</Box>

examples/default/src/components/Select.tsx

@@ -7,24 +7,26 @@ interface SelectItem<T> {
   value: T;
   isInitial?: boolean;
   testID?: string;
+  accessibilityLabel?: string;
 }
 
 interface SelectProps<T> {
   label: string;
   items: SelectItem<T>[];
   onValueChange: (value: T) => void;
   testID?: string;
+  accessibilityLabel?: string;
 }
 
-export function Select<T>({ label, items, onValueChange, testID }: SelectProps<T>) {
+export function Select<T>({ label, items, onValueChange, testID, accessibilityLabel }: SelectProps<T>) {
   const initialItem = items.find((i) => i.isInitial) ?? items[0];
   const [selectedItem, setSelectedItem] = useState(initialItem);
 
   return (
     <NativeBaseSelect
       height="10"
       placeholder={label}
-      accessibilityLabel={label}
+      accessibilityLabel={accessibilityLabel ?? testID}
       selectedValue={selectedItem.label}
       onValueChange={(value) => {
         const item = items.find((i) => i.label === value)!;

examples/default/src/screens/apm/FlowsScreen.tsx

@@ -40,6 +40,7 @@ export const FlowsScreen: React.FC = () => {
               placeholder="Flow Name"
               onChangeText={(text) => setFlowName(text)}
               value={flowName}
+              testID="id_flow_name"
             />
             <CustomButton title="Start Flow" onPress={startFlow} />
             <CustomButton title="Start 5s Delayed Flow" onPress={startDelayedFlow} />

examples/default/src/screens/bug-reporting/DisclaimerTextScreen.tsx

@@ -31,12 +31,13 @@ export const DisclaimerTextScreen: React.FC<
           onChangeText={setLocalText}
           value={localText}
           testID="id_disclaimer_input"
+          accessibilityLabel="id_disclaimer_input"
           multiline={true}
         />
-        <Button onPress={handleSave} testID="id_disclaimer_save">
+        <Button onPress={handleSave} testID="id_disclaimer_save" accessibilityLabel="id_disclaimer_save">
           Save
         </Button>
-        <Button colorScheme="danger" onPress={() => setLocalText('')} testID="id_disclaimer_clear">
+        <Button colorScheme="danger" onPress={() => setLocalText('')} testID="id_disclaimer_clear" accessibilityLabel="id_disclaimer_clear">
           Clear
         </Button>
       </VStack>

examples/default/src/screens/bug-reporting/UserConsentScreen.tsx

@@ -50,6 +50,7 @@ export const UserConsentScreen: React.FC<
                 onChangeText={setKey}
                 value={key}
                 testID="id_consent_key"
+                accessibilityLabel="id_consent_key"
               />
             </View>
             <View style={styles.inputWrapper}>
@@ -59,6 +60,7 @@ export const UserConsentScreen: React.FC<
                 onChangeText={setDescription}
                 value={description}
                 testID="id_consent_description"
+                accessibilityLabel="id_consent_description"
               />
             </View>
             <View style={styles.inputWrapper}>
@@ -134,7 +136,7 @@ export const UserConsentScreen: React.FC<
                 onValueChange={setActionType}
               />
             </View>
-            <Button mt="4" onPress={handleSubmit} testID="id_submit_consent">
+            <Button mt="4" onPress={handleSubmit} testID="id_submit_consent" accessibilityLabel="id_submit_consent">
               Add User Consent
             </Button>
           </VStack>