@mxenabled/connect-widget 0.13.0 → 0.13.2

package/dist/index.es.js

@@ -78674,6 +78674,7 @@ const RoutingNumber = (props) => {
     }
   };
   const containerRef = useRef(null);
+  const routingNumberInputRef = useRef(null);
   useAnalyticsPath(...PageviewInfo.CONNECT_MICRODEPOSITS_ROUTING_NUMBER);
   const tokens = useTokens();
   const styles = getStyles$r(tokens);
@@ -78746,6 +78747,11 @@ const RoutingNumber = (props) => {
   useEffect(() => {
     if (institutions.length > 0) props.setShowSharedRoutingNumber(true);
   }, [institutions.length]);
+  useEffect(() => {
+    if (errors.routingNumber) {
+      routingNumberInputRef.current.focus();
+    }
+  }, [errors]);
   const handleContinue = (newAccountDetails) => fadeOut(containerRef.current, "up", 300).then(() => onContinue(newAccountDetails));
   if (showFindDetails) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(FindAccountInfo, { onClose: () => setShowFindDetails(false), step: "routingNumber" });
@@ -78793,7 +78799,11 @@ const RoutingNumber = (props) => {
           error: !!errors.routingNumber || !!routingBlocked,
           fullWidth: true,
           helperText: errors.routingNumber ?? routingBlocked,
-          inputProps: { "data-test": "routing-number-input" },
+          inputProps: {
+            "data-test": "routing-number-input",
+            "aria-describedby": errors.routingNumber ? "routingNumber-error" : void 0
+          },
+          inputRef: routingNumberInputRef,
           label: __("Routing number"),
           name: "routingNumber",
           onChange: handleTextInputChange,
@@ -79572,6 +79582,8 @@ const reducer$3 = (state, action) => {
 };
 const VerifyDeposits = ({ microdeposit, onSuccess }) => {
   const containerRef = useRef(null);
+  const firstInputRef = useRef(null);
+  const secondInputRef = useRef(null);
   useAnalyticsPath(...PageviewInfo.CONNECT_MICRODEPOSITS_VERIFY_DEPOSITS);
   const { api } = useApi();
   const initialForm = { firstAmount: "", secondAmount: "" };
@@ -79613,6 +79625,13 @@ const VerifyDeposits = ({ microdeposit, onSuccess }) => {
     );
     return () => subscription.unsubscribe();
   }, [state.isSubmitting]);
+  useEffect(() => {
+    if (errors.firstAmount) {
+      firstInputRef.current.focus();
+    } else if (errors.secondAmount) {
+      secondInputRef.current.focus();
+    }
+  }, [errors]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: containerRef, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.header, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(x, { "data-test": "title-header", style: styles.title, truncate: false, variant: "H2", children: __("Enter deposit amounts") }),
@@ -79651,7 +79670,11 @@ const VerifyDeposits = ({ microdeposit, onSuccess }) => {
             error: !!errors.firstAmount,
             helperText: errors.firstAmount,
             id: schema.firstAmount.label,
-            inputProps: { "data-test": "amount-1-input" },
+            inputProps: {
+              "data-test": "amount-1-input",
+              "aria-describedby": errors.firstAmount ? "firstAmount-error" : void 0
+            },
+            inputRef: firstInputRef,
             label: schema.firstAmount.label,
             name: "firstAmount",
             onChange: handleTextInputChange,
@@ -79667,7 +79690,11 @@ const VerifyDeposits = ({ microdeposit, onSuccess }) => {
             error: !!errors.secondAmount,
             helperText: errors.secondAmount,
             id: schema.secondAmount.label,
-            inputProps: { "data-test": "amount-2-input" },
+            inputProps: {
+              "data-test": "amount-2-input",
+              "aria-describedby": errors.secondAmount ? "secondAmount-error" : void 0
+            },
+            inputRef: secondInputRef,
             label: schema.secondAmount.label,
             name: "secondAmount",
             onChange: handleTextInputChange,