textField - a11y label improvements

.yarnrc.yml

@@ -12,4 +12,4 @@ npmRegistryServer: "https://registry.npmjs.org/"
 npmMinimalAgeGate: "14d"
 npmPreapprovedPackages: ["@wix/*"]
 
-yarnPath: .yarn/releases/yarn-4.12.0.cjs
+yarnPath: .yarn/releases/yarn-4.12.0.cjs

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

@@ -138,9 +138,35 @@ const TextField = (props: InternalTextFieldProps) => {
     [typographyStyle, colorStyle, others.style, centeredTextStyle, hasValue]);
   const dummyPlaceholderStyle = useMemo(() => [inputStyle, styles.dummyPlaceholder], [inputStyle]);
 
+  const accessibilityLabel = 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]);
+
   return (
     <FieldContext.Provider value={context}>
-      <View {...containerProps} style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
+      <View {...containerProps} accessible accessibilityLabel={accessibilityLabel} style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
         <View row spread style={centeredContainerStyle}>
           <Label
             label={label}