textField - a11y label improvements, testID fix. (#3947)

* fix: extract testID from usePreset instead of using props.testID in TextField

* Integrated back a11y logic added in the previous PR and reverted

* fix: move testID to accessible container and update driver to target input sub-element

Author: yotam-wix

packages/react-native-ui-lib/src/components/textField/TextField.driver.new.ts

@@ -10,6 +10,7 @@ import {ViewDriver} from '../view/View.driver.new';
 
 export const TextFieldDriver = (props: ComponentProps, options?: ComponentDriverOptions) => {
   const driver = usePressableDriver(useComponentDriver(props, options));
+  const inputDriver = useComponentDriver({renderTree: props.renderTree, testID: `${props.testID}.input`}, options);
 
   const floatingPlaceholderDriver = TextDriver({
     renderTree: props.renderTree,
@@ -44,35 +45,37 @@ export const TextFieldDriver = (props: ComponentProps, options?: ComponentDriver
     testID: `${props.testID}.clearButton.container`
   });
 
+  const getInputElement = () => inputDriver.queryElement() ?? driver.getElement();
+
   const getValue = (): string | undefined => {
-    return driver.getElement().props.value ?? driver.getElement().props.defaultValue;
+    return getInputElement().props.value ?? getInputElement().props.defaultValue;
   };
 
   const changeText = (text: string): void => {
-    fireEvent.changeText(driver.getElement(), text);
+    fireEvent.changeText(getInputElement(), text);
   };
 
   const focus = (): void => {
-    fireEvent(driver.getElement(), 'focus');
+    fireEvent(getInputElement(), 'focus');
   };
 
   const blur = (): void => {
-    fireEvent(driver.getElement(), 'blur');
+    fireEvent(getInputElement(), 'blur');
   };
 
   const isEnabled = (): boolean => {
-    return !driver.getElement().props.accessibilityState?.disabled;
+    return !getInputElement().props.accessibilityState?.disabled;
   };
 
   const getPlaceholder = () => {
     const exists = (): boolean => {
-      const hasPlaceholder = !!driver.getElement().props.placeholder;
+      const hasPlaceholder = !!getInputElement().props.placeholder;
       const hasText = !!getValue();
       return hasPlaceholder && (!hasText || (hasText && floatingPlaceholderDriver.exists()));
     };
     const getText = (): string | undefined => {
       if (exists()) {
-        return driver.getElement().props.placeholder;
+        return getInputElement().props.placeholder;
       }
     };
 

packages/react-native-ui-lib/src/components/textField/index.tsx

@@ -92,6 +92,8 @@ const TextField = (props: InternalTextFieldProps) => {
     readonly = false,
     showMandatoryIndication,
     clearButtonStyle,
+    testID,
+    accessibilityLabel: accessibilityLabelProp,
     ...others
   } = usePreset(props);
 
@@ -138,9 +140,38 @@ const TextField = (props: InternalTextFieldProps) => {
     [typographyStyle, colorStyle, others.style, centeredTextStyle, hasValue]);
   const dummyPlaceholderStyle = useMemo(() => [inputStyle, styles.dummyPlaceholder], [inputStyle]);
 
+  const defaultAccessibilityLabel = useMemo(() => {
+    const parts: string[] = [];
+
+    if (label) {
+      parts.push(label);
+    }
+
+    if (context.isMandatory) {
+      parts.push('required');
+    }
+
+    parts.push('textField');
+
+    if (helperText) {
+      parts.push(helperText);
+    } else if (placeholder) {
+      parts.push(placeholder);
+    }
+
+    if (showCharCounter && others.maxLength) {
+      parts.push(`you can enter up to ${others.maxLength} characters`);
+    }
+
+    return parts.join(', ');
+
+  }, [label, context.isMandatory, helperText, placeholder, showCharCounter, others.maxLength]);
+
+  const accessibilityLabel = accessibilityLabelProp ?? defaultAccessibilityLabel;
+
   return (
     <FieldContext.Provider value={context}>
-      <View {...containerProps} style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
+      <View {...containerProps} testID={testID} accessible accessibilityLabel={accessibilityLabel} style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
         <View row spread style={centeredContainerStyle}>
           <Label
             label={label}
@@ -149,7 +180,7 @@ const TextField = (props: InternalTextFieldProps) => {
             labelProps={labelProps}
             floatingPlaceholder={floatingPlaceholder}
             validationMessagePosition={validationMessagePosition}
-            testID={`${props.testID}.label`}
+            testID={`${testID}.label`}
             showMandatoryIndication={showMandatoryIndication}
             enableErrors={enableErrors}
           />
@@ -160,7 +191,7 @@ const TextField = (props: InternalTextFieldProps) => {
               validationMessage={others.validationMessage}
               validationMessageStyle={_validationMessageStyle}
               retainValidationSpace={retainValidationSpace && retainTopMessageSpace}
-              testID={`${props.testID}.validationMessage`}
+              testID={`${testID}.validationMessage`}
             />
           )}
           {topTrailingAccessory && <View>{topTrailingAccessory}</View>}
@@ -189,7 +220,7 @@ const TextField = (props: InternalTextFieldProps) => {
                   floatOnFocus={floatOnFocus}
                   validationMessagePosition={validationMessagePosition}
                   extraOffset={leadingAccessoryMeasurements?.width}
-                  testID={`${props.testID}.floatingPlaceholder`}
+                  testID={`${testID}.floatingPlaceholder`}
                   showMandatoryIndication={showMandatoryIndication}
                 />
               )}
@@ -198,6 +229,7 @@ const TextField = (props: InternalTextFieldProps) => {
                 placeholderTextColor={hidePlaceholder ? 'transparent' : placeholderTextColor}
                 value={fieldState.value}
                 {...others}
+                testID={`${testID}.input`}
                 readonly={readonly}
                 style={inputStyle}
                 onFocus={onFocus}
@@ -212,7 +244,7 @@ const TextField = (props: InternalTextFieldProps) => {
           {showClearButton && (
             <ClearButton
               onClear={onClear}
-              testID={`${props.testID}.clearButton`}
+              testID={`${testID}.clearButton`}
               onChangeText={onChangeText}
               clearButtonStyle={clearButtonStyle}
             />
@@ -230,11 +262,11 @@ const TextField = (props: InternalTextFieldProps) => {
                 validationIcon={validationIcon}
                 validationMessageStyle={_validationMessageStyle}
                 retainValidationSpace={retainValidationSpace}
-                testID={`${props.testID}.validationMessage`}
+                testID={`${testID}.validationMessage`}
               />
             )}
             {helperText && (
-              <Text $textNeutralHeavy subtext marginT-s1 testID={`${props.testID}.helperText`}>
+              <Text $textNeutralHeavy subtext marginT-s1 testID={`${testID}.helperText`}>
                 {helperText}
               </Text>
             )}
@@ -245,7 +277,7 @@ const TextField = (props: InternalTextFieldProps) => {
               <CharCounter
                 maxLength={others.maxLength}
                 charCounterStyle={charCounterStyle}
-                testID={`${props.testID}.charCounter`}
+                testID={`${testID}.charCounter`}
               />
             )}
           </View>