feat: add testIDs for android with automation supports

Author: virajpsimformsolutions

src/OtpInput/OtpInput.tsx

@@ -23,6 +23,7 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
     theme = {},
     textInputProps,
     textProps,
+    buttonProps,
     type = "numeric",
   } = props;
   const {
@@ -82,7 +83,13 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
               disabled={disabled}
               onPress={handlePress}
               style={generatePinCodeContainerStyle(isFocusedContainer, char)}
-              testID="otp-input"
+              {...buttonProps}
+              testID={buttonProps?.testID ? `${buttonProps.testID}${index}` : `otp-input-${index}`}
+              {...(Platform.OS === "android" && {
+                accessibilityLabel: buttonProps?.testID
+                  ? `${buttonProps.testID}${index}`
+                  : `otp-input-${index}`,
+              })}
             >
               {isFocusedInput && !hideStick ? (
                 <VerticalStick
@@ -93,7 +100,12 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
               ) : (
                 <Text
                   {...textProps}
-                  testID={textProps?.testID ? `${textProps.testID}-${index}` : undefined}
+                  testID={textProps?.testID ? `${textProps.testID}${index}` : undefined}
+                  {...(Platform.OS === "android" && {
+                    accessibilityLabel: textProps?.testID
+                      ? `${textProps.testID}${index}`
+                      : `otp-input-text-${index}`,
+                  })}
                   style={[
                     styles.codeText,
                     pinCodeTextStyle,
@@ -120,6 +132,7 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
         aria-disabled={disabled}
         editable={!disabled}
         testID="otp-input-hidden"
+        {...(Platform.OS === "android" && { accessibilityLabel: "otp-input-hidden" })}
         onFocus={handleFocus}
         onBlur={handleBlur}
         caretHidden={Platform.OS === "ios"}

src/OtpInput/OtpInput.types.ts

@@ -1,4 +1,11 @@
-import { ColorValue, TextInputProps, TextProps, TextStyle, ViewStyle } from "react-native";
+import {
+  ColorValue,
+  TextInputProps,
+  TextProps,
+  TextStyle,
+  ViewStyle,
+  PressableProps,
+} from "react-native";
 
 export interface OtpInputProps {
   numberOfDigits?: number;
@@ -16,6 +23,7 @@ export interface OtpInputProps {
   disabled?: boolean;
   textInputProps?: TextInputProps;
   textProps?: TextProps;
+  buttonProps?: PressableProps;
   type?: "alpha" | "numeric" | "alphanumeric";
   placeholder?: string;
 }

src/OtpInput/VerticalStick.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { memo, useEffect, useRef } from "react";
-import { Animated, ColorValue, View, ViewStyle } from "react-native";
+import { Animated, ColorValue, View, ViewStyle, Platform } from "react-native";
 import { styles } from "./OtpInput.styles";
 
 interface VerticalStickProps {
@@ -38,6 +38,9 @@ export const VerticalStick: React.FC<VerticalStickProps> = memo(
         <View
           style={[styles.stick, focusColor ? { backgroundColor: focusColor } : {}, style]}
           testID="otp-input-stick"
+          {...(Platform.OS === "android" && {
+            accessibilityLabel: "otp-input-stick",
+          })}
         />
       </Animated.View>
     );