@mxenabled/connect-widget 0.13.3 → 0.13.5

package/dist/index.es.js

@@ -70218,6 +70218,15 @@ const Credentials = React__default.forwardRef(
       formSchema,
       initialValues
     );
+    const inputRefs = useRef({});
+    useEffect(() => {
+      for (const field of credentials) {
+        if (errors[field.field_name]) {
+          inputRefs.current[field.field_name]?.focus();
+          break;
+        }
+      }
+    }, [errors]);
     function attemptConnect() {
       const credentialsPayload = credentials.map((credential) => {
         return {
@@ -70393,7 +70402,11 @@ const Credentials = React__default.forwardRef(
                   fullWidth: true,
                   helperText: validations.isCapsLockOn && __("Caps lock is on") || validations.validateSpaceMessage || errors[field.field_name],
                   id: field.field_name,
-                  inputProps: { "aria-label": field.label },
+                  inputProps: {
+                    "aria-label": field.label,
+                    "aria-describedby": errors[field.field_name] ? `${field.field_name}-error` : void 0
+                  },
+                  inputRef: (el) => inputRefs.current[field.field_name] = el,
                   label: field.label,
                   name: field.field_name,
                   onBlur: handleBlur,
@@ -70417,7 +70430,11 @@ const Credentials = React__default.forwardRef(
                   fullWidth: true,
                   helperText: errors[field.field_name],
                   id: field.field_name,
-                  inputProps: { "aria-label": __("Enter your %1", field.label) },
+                  inputProps: {
+                    "aria-label": __("Enter your %1", field.label),
+                    "aria-describedby": errors[field.field_name] ? `${field.field_name}-error` : void 0
+                  },
+                  inputRef: (el) => inputRefs.current[field.field_name] = el,
                   label: field.label,
                   name: field.field_name,
                   onChange: handleUserNameTextChange,
@@ -81153,6 +81170,7 @@ const ManualAccountForm = React__default.forwardRef(
     const getNextDelay = getDelay();
     const fields = getFormFields(props.accountType);
     const formRef = ref;
+    const inputRefs = useRef({});
     const {
       handleTextInputChange,
       handleSubmit,
@@ -81226,6 +81244,14 @@ const ManualAccountForm = React__default.forwardRef(
       );
       return () => createManualAccount$.unsubscribe();
     }, [saving]);
+    useEffect(() => {
+      for (const field of fields) {
+        if (errors[field.name]) {
+          inputRefs.current[field.name]?.focus();
+          break;
+        }
+      }
+    }, [errors]);
     const shouldFocus = (field, returnField2, i) => returnField2 ? returnField2 === field : i === 0;
     if (props.showDayPicker) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -81304,7 +81330,11 @@ const ManualAccountForm = React__default.forwardRef(
                 fullWidth: true,
                 helperText: errors[field.name],
                 id: field.name,
-                inputProps: { "data-test": "date-input" },
+                inputProps: {
+                  "data-test": "date-input",
+                  "aria-describedby": errors[field.name] ? field.name + "-error" : void 0
+                },
+                inputRef: (el) => inputRefs.current[field.name] = el,
                 label: field.label,
                 name: field.name,
                 onChange: () => {
@@ -81341,7 +81371,11 @@ const ManualAccountForm = React__default.forwardRef(
                 fullWidth: true,
                 helperText: errors[field.name],
                 id: field.name,
-                inputProps: { "data-test": `text-input-${field.name}` },
+                inputProps: {
+                  "data-test": `text-input-${field.name}`,
+                  "aria-describedby": errors[field.name] ? field.name + "-error" : void 0
+                },
+                inputRef: (el) => inputRefs.current[field.name] = el,
                 label: field.label,
                 name: field.name,
                 onChange: handleTextInputChange,