react-native-ui-lib 8.1.8-snapshot.7613 → 8.1.8-snapshot.7616

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "8.1.8-snapshot.7613",
+  "version": "8.1.8-snapshot.7616",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/components/textField/index.js

@@ -78,6 +78,7 @@ const TextField = props => {
     readonly = false,
     showMandatoryIndication,
     clearButtonStyle,
+    accessibilityLabel: accessibilityLabelProp,
     ...others
   } = usePreset(props);
   const {
@@ -135,8 +136,28 @@ const TextField = props => {
   const hasValue = fieldState.value !== undefined; // NOTE: not pressable if centered without a value (so can't center placeholder)
   const inputStyle = useMemo(() => [typographyStyle, colorStyle, others.style, hasValue && centeredTextStyle], [typographyStyle, colorStyle, others.style, centeredTextStyle, hasValue]);
   const dummyPlaceholderStyle = useMemo(() => [inputStyle, styles.dummyPlaceholder], [inputStyle]);
+  const defaultAccessibilityLabel = useMemo(() => {
+    const parts = [];
+    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} accessible accessibilityLabel={accessibilityLabel} style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
         <View row spread style={centeredContainerStyle}>
           <Label label={label} labelColor={labelColor} labelStyle={_labelStyle} labelProps={labelProps} floatingPlaceholder={floatingPlaceholder} validationMessagePosition={validationMessagePosition} testID={`${props.testID}.label`} showMandatoryIndication={showMandatoryIndication} enableErrors={enableErrors} />
           {validationMessagePosition === ValidationMessagePosition.TOP && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace && retainTopMessageSpace} testID={`${props.testID}.validationMessage`} />}