@basiq/connect-auth 1.1.36 → 1.1.40-alpha

package/dist/index.js

@@ -88,6 +88,11 @@ var SimpleButton = import_styled_components.default.button`
 	cursor: pointer;
 	margin-bottom: 8px;
 	padding: 10px;
+
+	&:focus-visible {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
 `;
 var Input = import_styled_components.default.input`
 	height: 48px;
@@ -115,7 +120,8 @@ var Input = import_styled_components.default.input`
 	}
 
 	&:focus-visible {
-		outline: none;
+		outline: 2px solid ${({ theme: theme2 }) => theme2.color.endeavour};
+		outline-offset: 2px;
 		background-color: ${({ theme: theme2 }) => theme2.color.spindle};
 	}
 
@@ -126,7 +132,6 @@ var Input = import_styled_components.default.input`
 	}
 `;
 var H4Styled = import_styled_components.default.h4`
-	cursor: pointer;
 	user-select: none;
 	${({ theme: theme2 }) => theme2.mixin.subtitle()};
 `;
@@ -210,17 +215,17 @@ var ButtonStyled = (0, import_styled_components2.default)(SimpleButton)`
 					justify-content: initial;
 					padding: 0;
 					min-height: unset;
-					color: ${theme2.color.casper};
+					color: ${theme2.color.abbey};
 					width: auto;
 					img {
 						width: 25px;
-						filter: invert(68%) sepia(13%) saturate(348%) hue-rotate(155deg) brightness(91%) contrast(94%);
+						filter: invert(31%) sepia(10%) saturate(313%) hue-rotate(155deg) brightness(96%) contrast(87%);
 					}
 					&:hover {
-						color: ${theme2.color.abbey};
+						color: ${theme2.color.jumbo};
 						background-color: unset;
 						img {
-							filter: invert(31%) sepia(10%) saturate(313%) hue-rotate(155deg) brightness(96%) contrast(87%);
+							filter: invert(49%) sepia(0%) saturate(5%) hue-rotate(29deg) brightness(99%) contrast(83%);
 						}
 					}
 					&:active {
@@ -252,6 +257,11 @@ var ButtonStyled = (0, import_styled_components2.default)(SimpleButton)`
 		color: ${({ theme: theme2 }) => theme2.color.casper};
 		cursor: not-allowed;
 	}
+
+	&:focus-visible {
+		outline: 2px solid ${({ theme: theme2 }) => theme2.color.congressBlue};
+		outline-offset: 2px;
+	}
 `;
 
 // src/styledComponents/ui/modals.ts
@@ -272,8 +282,9 @@ var hexToRGBa = (hex, opacity) => {
   return `rgba(${hexToRGBA == null ? void 0 : hexToRGBA.concat(opp).join()})`;
 };
 var handleUserKeyPress = (e, onEnter) => {
-  const { keyCode } = e;
-  if (keyCode === 13) {
+  const target = e.target;
+  const isInteractive = target.tagName === "A" || target.tagName === "BUTTON" || target.tagName === "INPUT" || target.tagName === "SELECT" || target.tagName === "TEXTAREA" || target.getAttribute("role") === "button" || target.getAttribute("role") === "link";
+  if (e.key === "Enter" && !isInteractive) {
     onEnter();
   }
 };
@@ -341,7 +352,7 @@ var theme = {
     dodgerBlueLight: "#5e7Bff",
     royalBlue: "#4461e6",
     bostonBlue: "#367ab9",
-    endeavour: "#0459a8",
+    endeavour: "#0460af",
     congressBlue: "#045097",
     brilliantBlue: "#0075dc",
     curiousBlue: "#2784da",
@@ -533,7 +544,7 @@ var PageConnectFooterControl = import_styled_components5.default.div`
 	box-sizing: border-box;
 	padding: 16px;
 `;
-var PageConnectFooterText = import_styled_components5.default.span`
+var PageConnectFooterText = import_styled_components5.default.p`
 	color: ${({ theme: theme2 }) => theme2.color.abbey};
 	font-size: 12px;
 `;
@@ -549,6 +560,11 @@ var InputStyled = import_styled_components5.default.input`
 	box-shadow: none;
 	letter-spacing: 20px;
 	text-indent: 20px;
+
+	&:focus-visible {
+		outline: 2px solid ${({ theme: theme2 }) => theme2.color.endeavour};
+		outline-offset: 2px;
+	}
 `;
 var InputContainer = import_styled_components5.default.div`
 	width: 100%;
@@ -556,10 +572,22 @@ var InputContainer = import_styled_components5.default.div`
 	align-items: center;
 	justify-content: center;
 `;
-var DivAsLink = import_styled_components5.default.div`
+var InlineButton = import_styled_components5.default.button`
 	color: ${({ theme: theme2, disabled }) => disabled ? theme2.color.casper : theme2.color.endeavour};
-	display: inherit;
+	display: inline;
 	cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+	background: none;
+	border: none;
+	padding: 0;
+	font-size: inherit;
+	font-family: inherit;
+	text-decoration: none;
+
+	&:focus-visible {
+		outline: 2px solid ${({ theme: theme2 }) => theme2.color.endeavour};
+		outline-offset: 2px;
+		border-radius: 2px;
+	}
 `;
 
 // src/styledComponents/pages/start.ts
@@ -618,6 +646,11 @@ var StatusScreenErrorCode = import_styled_components7.default.span`
 	margin-top: 16px;
 	color: ${({ theme: theme2 }) => theme2.color.osloGrey};
 `;
+var StatusScreenTitle = import_styled_components7.default.h1`
+	font-size: 16px;
+	font-weight: normal;
+	margin: 0 0 4px 0;
+`;
 var PageSuccessImgContainer = import_styled_components7.default.div`
 	margin-bottom: 24px;
 	width: 64px;
@@ -652,12 +685,16 @@ var Root = import_styled_components8.default.div`
 		text-decoration: none;
 		color: ${({ theme: theme2 }) => theme2.color.endeavour};
 	}
-	h3 {
+	h1 {
 		font-weight: normal;
 		${({ theme: theme2 }) => theme2.mixin.title()};
 		strong {
 			${({ theme: theme2 }) => theme2.mixin.title()};
 		}
+		&:focus,
+		&:focus-visible {
+			outline: none;
+		}
 	}
 	${devices.phone} {
 		width: 100%;
@@ -736,6 +773,18 @@ body * {
   font-size: 14px;
   font-style: normal;
 }
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 `;
 
 // src/components/pages/Page.tsx
@@ -751,7 +800,7 @@ var back_default = 'data:image/svg+xml,<svg width="21" height="21" viewBox="0 0
 // src/components/ui/Button.tsx
 function Button(props) {
   const { onClick, label, buttonType, disabled } = props;
-  return /* @__PURE__ */ import_react2.default.createElement(ButtonStyled, { buttonType, disabled: disabled || false, onClick }, buttonType === "back" && /* @__PURE__ */ import_react2.default.createElement("img", { src: back_default, alt: "" }), /* @__PURE__ */ import_react2.default.createElement(ButtonLabel, null, " ", label || ""));
+  return /* @__PURE__ */ import_react2.default.createElement(ButtonStyled, { type: "button", buttonType, disabled: disabled || false, onClick }, buttonType === "back" && /* @__PURE__ */ import_react2.default.createElement("img", { src: back_default, alt: "" }), /* @__PURE__ */ import_react2.default.createElement(ButtonLabel, null, " ", label || ""));
 }
 var Button_default = Button;
 
@@ -760,7 +809,14 @@ function Page(props) {
   var _a;
   const { buttons, children, title, subTitle, shadow, onBack, backDisabled } = props;
   const { t } = (0, import_react_i18next.useTranslation)();
-  return /* @__PURE__ */ import_react3.default.createElement(PageStyled, { buttonCount: buttons == null ? void 0 : buttons.length }, onBack && /* @__PURE__ */ import_react3.default.createElement(Button_default, { onClick: onBack, label: t("back"), buttonType: "back", disabled: backDisabled }), title && /* @__PURE__ */ import_react3.default.createElement("h3", null, title), subTitle && /* @__PURE__ */ import_react3.default.createElement(PageSubtitle, null, subTitle), /* @__PURE__ */ import_react3.default.createElement(PageMainContainer, null, children), /* @__PURE__ */ import_react3.default.createElement(PageControlsSection, { notEmpty: ((_a = buttons == null ? void 0 : buttons.length) != null ? _a : 0) > 0 }, /* @__PURE__ */ import_react3.default.createElement(PageShadowWrapper, null, shadow && /* @__PURE__ */ import_react3.default.createElement(PageShadow, null), buttons == null ? void 0 : buttons.map((b, index) => /* @__PURE__ */ import_react3.default.createElement(Button_default, { key: index, onClick: b.onClick, label: b.label, buttonType: b.buttonType, disabled: b.disabled })))));
+  const headingRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    var _a2;
+    if (title) {
+      (_a2 = headingRef.current) == null ? void 0 : _a2.focus();
+    }
+  }, []);
+  return /* @__PURE__ */ import_react3.default.createElement(PageStyled, { buttonCount: buttons == null ? void 0 : buttons.length }, onBack && /* @__PURE__ */ import_react3.default.createElement(Button_default, { onClick: onBack, label: t("back"), buttonType: "back", disabled: backDisabled }), title && /* @__PURE__ */ import_react3.default.createElement("h1", { ref: headingRef, tabIndex: -1 }, title), subTitle && /* @__PURE__ */ import_react3.default.createElement(PageSubtitle, { as: "p" }, subTitle), /* @__PURE__ */ import_react3.default.createElement("main", null, /* @__PURE__ */ import_react3.default.createElement(PageMainContainer, null, children)), /* @__PURE__ */ import_react3.default.createElement(PageControlsSection, { notEmpty: ((_a = buttons == null ? void 0 : buttons.length) != null ? _a : 0) > 0 }, /* @__PURE__ */ import_react3.default.createElement(PageShadowWrapper, null, shadow && /* @__PURE__ */ import_react3.default.createElement(PageShadow, null), buttons == null ? void 0 : buttons.map((b, index) => /* @__PURE__ */ import_react3.default.createElement(Button_default, { key: index, onClick: b.onClick, label: b.label, buttonType: b.buttonType, disabled: b.disabled })))));
 }
 var Page_default = Page;
 
@@ -771,8 +827,8 @@ var import_react_i18next2 = require("react-i18next");
 // src/components/ui/icon.tsx
 var import_react4 = __toESM(require("react"));
 function Icon(props) {
-  const { rotating, img } = props;
-  return /* @__PURE__ */ import_react4.default.createElement(IconWrapper, { rotating }, /* @__PURE__ */ import_react4.default.createElement("img", { src: img, alt: "" }));
+  const { rotating, img, alt = "" } = props;
+  return /* @__PURE__ */ import_react4.default.createElement(IconWrapper, { rotating }, /* @__PURE__ */ import_react4.default.createElement("img", { src: img, alt }));
 }
 var icon_default = Icon;
 
@@ -782,7 +838,7 @@ var error_default = 'data:image/svg+xml,<!-- Generated by IcoMoon.io -->%0A<svg
 // src/components/pages/NotFound.tsx
 function NotFound({ messageCode = "404" }) {
   const { t } = (0, import_react_i18next2.useTranslation)();
-  return /* @__PURE__ */ import_react5.default.createElement(Page_default, { shadow: false }, /* @__PURE__ */ import_react5.default.createElement(PageStyled, null, /* @__PURE__ */ import_react5.default.createElement(PageStatusScreenMain, null, /* @__PURE__ */ import_react5.default.createElement(PageStyled, null, /* @__PURE__ */ import_react5.default.createElement(PageStatusScreenContent, null, /* @__PURE__ */ import_react5.default.createElement(StatusScreenCircleContainer, { type: "warning" }, /* @__PURE__ */ import_react5.default.createElement(icon_default, { img: error_default, rotating: false })), /* @__PURE__ */ import_react5.default.createElement("span", null, t("page_not_found")), /* @__PURE__ */ import_react5.default.createElement(StatusScreenErrorCode, null, `${t("error")}: ${messageCode}`)))), /* @__PURE__ */ import_react5.default.createElement(PageControlsSection, { notEmpty: false }, /* @__PURE__ */ import_react5.default.createElement(PageShadowWrapper, null))));
+  return /* @__PURE__ */ import_react5.default.createElement(Page_default, { shadow: false }, /* @__PURE__ */ import_react5.default.createElement(PageStyled, null, /* @__PURE__ */ import_react5.default.createElement(PageStatusScreenMain, null, /* @__PURE__ */ import_react5.default.createElement(PageStyled, null, /* @__PURE__ */ import_react5.default.createElement(PageStatusScreenContent, null, /* @__PURE__ */ import_react5.default.createElement(StatusScreenCircleContainer, { type: "warning" }, /* @__PURE__ */ import_react5.default.createElement(icon_default, { img: error_default, rotating: false })), /* @__PURE__ */ import_react5.default.createElement(StatusScreenTitle, null, t("page_not_found")), /* @__PURE__ */ import_react5.default.createElement(StatusScreenErrorCode, null, `${t("error")}: ${messageCode}`)))), /* @__PURE__ */ import_react5.default.createElement(PageControlsSection, { notEmpty: false }, /* @__PURE__ */ import_react5.default.createElement(PageShadowWrapper, null))));
 }
 var NotFound_default = NotFound;
 
@@ -877,13 +933,66 @@ var import_react_i18next3 = require("react-i18next");
 // src/components/ui/Modal.tsx
 var import_react6 = __toESM(require("react"));
 function Modal(props) {
-  const { children, onClose, isOpen, disableTransparency } = props;
+  const { children, onClose, isOpen, disableTransparency, role = "dialog", ariaLabel, ariaLive } = props;
+  const modalRef = (0, import_react6.useRef)(null);
+  const previousFocusRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
+    var _a, _b;
+    if (isOpen) {
+      previousFocusRef.current = document.activeElement;
+      (_a = modalRef.current) == null ? void 0 : _a.focus();
+    } else {
+      (_b = previousFocusRef.current) == null ? void 0 : _b.focus();
+      previousFocusRef.current = null;
+    }
+  }, [isOpen]);
   const handleOutsideClick = (e) => {
     if (onClose && e.target.id === "ui-modal") {
       onClose();
     }
   };
-  return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, isOpen ? /* @__PURE__ */ import_react6.default.createElement(ModalStyled, { id: "ui-modal", disableTransparency, onClick: handleOutsideClick }, children) : null);
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape" && onClose) {
+      e.stopPropagation();
+      onClose();
+      return;
+    }
+    if (!modalRef.current) return;
+    const focusable = modalRef.current.querySelectorAll(
+      'a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    );
+    if (focusable.length === 0) {
+      if (e.key === "Tab") e.preventDefault();
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (e.key === "Tab") {
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, isOpen ? /* @__PURE__ */ import_react6.default.createElement(
+    ModalStyled,
+    {
+      id: "ui-modal",
+      ref: modalRef,
+      tabIndex: -1,
+      disableTransparency,
+      onClick: handleOutsideClick,
+      onKeyDown: handleKeyDown,
+      role,
+      "aria-modal": role === "dialog" ? true : void 0,
+      "aria-label": ariaLabel,
+      "aria-live": ariaLive
+    },
+    children
+  ) : null);
 }
 var Modal_default = Modal;
 
@@ -894,7 +1003,8 @@ var loading_indicator_default = 'data:image/svg+xml,<!-- Generated by IcoMoon.io
 function LoadingModal(props) {
   const { isOpen, disableTransparency, loadingText } = props;
   const { t } = (0, import_react_i18next3.useTranslation)();
-  return /* @__PURE__ */ import_react7.default.createElement(Modal_default, { isOpen, disableTransparency: !!disableTransparency }, /* @__PURE__ */ import_react7.default.createElement(LoadingModalStyled, { disableTransparency: !!disableTransparency }, /* @__PURE__ */ import_react7.default.createElement(icon_default, { img: loading_indicator_default, rotating: true }), /* @__PURE__ */ import_react7.default.createElement(LoadingModalText, null, loadingText || t("loading"))));
+  const label = loadingText || t("loading");
+  return /* @__PURE__ */ import_react7.default.createElement(Modal_default, { isOpen, disableTransparency: !!disableTransparency, role: "status", ariaLabel: label, ariaLive: "polite" }, /* @__PURE__ */ import_react7.default.createElement(LoadingModalStyled, { disableTransparency: !!disableTransparency }, /* @__PURE__ */ import_react7.default.createElement(icon_default, { img: loading_indicator_default, rotating: true, alt: "" }), /* @__PURE__ */ import_react7.default.createElement(LoadingModalText, { "aria-hidden": "true" }, label)));
 }
 var LoadingModal_default = LoadingModal;
 
@@ -903,13 +1013,7 @@ function StartScreen(props) {
   const { onContinue, appName, shadow, authRequestId, showErrorScreen, smsSent, setSmsSent, test } = props;
   const [loading, setLoading] = (0, import_react8.useState)(false);
   const { t } = (0, import_react_i18next4.useTranslation)();
-  (0, import_react8.useEffect)(() => {
-    window.addEventListener("keydown", (e) => handleUserKeyPress(e, onContinue));
-    return () => {
-      window.removeEventListener("keydown", (e) => handleUserKeyPress(e, onContinue));
-    };
-  }, []);
-  const handleContinue = () => __async(null, null, function* () {
+  const handleContinue = (0, import_react8.useCallback)(() => __async(null, null, function* () {
     setLoading(true);
     if (authRequestId && !smsSent) {
       const response = yield authUser({ authRequestId, test });
@@ -924,7 +1028,14 @@ function StartScreen(props) {
       setLoading(false);
       onContinue();
     }
-  });
+  }), [authRequestId, smsSent, test, onContinue, showErrorScreen, setSmsSent]);
+  (0, import_react8.useEffect)(() => {
+    const handler = (e) => handleUserKeyPress(e, handleContinue);
+    window.addEventListener("keydown", handler);
+    return () => {
+      window.removeEventListener("keydown", handler);
+    };
+  }, [handleContinue]);
   const buttons = [
     {
       label: t("continue"),
@@ -938,7 +1049,7 @@ function StartScreen(props) {
       shadow,
       buttons
     },
-    /* @__PURE__ */ import_react8.default.createElement(InnerContainer, null, /* @__PURE__ */ import_react8.default.createElement(Spacer, null), /* @__PURE__ */ import_react8.default.createElement(H4Styled, null, t("to_do_this_we_will_ask_you_to")), /* @__PURE__ */ import_react8.default.createElement("ul", null, /* @__PURE__ */ import_react8.default.createElement("li", null, /* @__PURE__ */ import_react8.default.createElement(import_react_i18next4.Trans, { t, i18nKey: "verify_your_mobile_number_bold", components: { bold: /* @__PURE__ */ import_react8.default.createElement("strong", null) } })), /* @__PURE__ */ import_react8.default.createElement("li", null, /* @__PURE__ */ import_react8.default.createElement(import_react_i18next4.Trans, { t, i18nKey: "consent_to_share_your_data_with_us", components: { bold: /* @__PURE__ */ import_react8.default.createElement("strong", null) } })), /* @__PURE__ */ import_react8.default.createElement("li", null, /* @__PURE__ */ import_react8.default.createElement(import_react_i18next4.Trans, { t, i18nKey: "share_your_financial_data", components: { bold: /* @__PURE__ */ import_react8.default.createElement("strong", null) } }))), /* @__PURE__ */ import_react8.default.createElement(H4Styled, null, t("things_you_should_know")), /* @__PURE__ */ import_react8.default.createElement("ul", null, /* @__PURE__ */ import_react8.default.createElement("li", null, t("we_dont_share_your_data_without_your_consent")), /* @__PURE__ */ import_react8.default.createElement("li", null, t("you_can_easily_stop_sharing_your_data_at_any_time")), /* @__PURE__ */ import_react8.default.createElement("li", null, t("you_can_choose_to_delete_shared_data_when_we_no_longer_need_it"))), /* @__PURE__ */ import_react8.default.createElement(Spacer, null), /* @__PURE__ */ import_react8.default.createElement("span", null, /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, t("by_proceeding_you_agree_to_the"), " ", /* @__PURE__ */ import_react8.default.createElement("a", { href: "https://docs.basiq.io/en/articles/415750-basiq-terms-of-service", rel: "noreferrer", target: "_blank" }, t("terms_of_service")), " ", t("and"), " ", /* @__PURE__ */ import_react8.default.createElement("a", { href: "https://docs.basiq.io/en/articles/382581-basiq-privacy-policy", rel: "noreferrer", target: "_blank" }, t("privacy_notice")))), /* @__PURE__ */ import_react8.default.createElement(LoadingModal_default, { isOpen: loading }))
+    /* @__PURE__ */ import_react8.default.createElement(InnerContainer, null, /* @__PURE__ */ import_react8.default.createElement(Spacer, null), /* @__PURE__ */ import_react8.default.createElement("section", { "aria-labelledby": "steps-heading" }, /* @__PURE__ */ import_react8.default.createElement(H4Styled, { id: "steps-heading" }, t("to_do_this_we_will_ask_you_to")), /* @__PURE__ */ import_react8.default.createElement("ul", null, /* @__PURE__ */ import_react8.default.createElement("li", null, /* @__PURE__ */ import_react8.default.createElement(import_react_i18next4.Trans, { t, i18nKey: "verify_your_mobile_number_bold", components: { bold: /* @__PURE__ */ import_react8.default.createElement("strong", null) } })), /* @__PURE__ */ import_react8.default.createElement("li", null, /* @__PURE__ */ import_react8.default.createElement(import_react_i18next4.Trans, { t, i18nKey: "consent_to_share_your_data_with_us", components: { bold: /* @__PURE__ */ import_react8.default.createElement("strong", null) } })), /* @__PURE__ */ import_react8.default.createElement("li", null, /* @__PURE__ */ import_react8.default.createElement(import_react_i18next4.Trans, { t, i18nKey: "share_your_financial_data", components: { bold: /* @__PURE__ */ import_react8.default.createElement("strong", null) } })))), /* @__PURE__ */ import_react8.default.createElement("section", { "aria-labelledby": "info-heading" }, /* @__PURE__ */ import_react8.default.createElement(H4Styled, { id: "info-heading" }, t("things_you_should_know")), /* @__PURE__ */ import_react8.default.createElement("ul", null, /* @__PURE__ */ import_react8.default.createElement("li", null, t("we_dont_share_your_data_without_your_consent")), /* @__PURE__ */ import_react8.default.createElement("li", null, t("you_can_easily_stop_sharing_your_data_at_any_time")), /* @__PURE__ */ import_react8.default.createElement("li", null, t("you_can_choose_to_delete_shared_data_when_we_no_longer_need_it")))), /* @__PURE__ */ import_react8.default.createElement(Spacer, null), /* @__PURE__ */ import_react8.default.createElement("p", null, t("by_proceeding_you_agree_to_the"), " ", /* @__PURE__ */ import_react8.default.createElement("a", { href: "https://docs.basiq.io/en/articles/415750-basiq-terms-of-service", rel: "noreferrer noopener", target: "_blank" }, t("terms_of_service")), " ", t("and"), " ", /* @__PURE__ */ import_react8.default.createElement("a", { href: "https://docs.basiq.io/en/articles/382581-basiq-privacy-policy", rel: "noreferrer noopener", target: "_blank" }, t("privacy_notice"))), /* @__PURE__ */ import_react8.default.createElement(LoadingModal_default, { isOpen: loading }))
   );
 }
 var StartScreen_default = StartScreen;
@@ -954,6 +1065,13 @@ function AuthScreen({ onBack, number, authRequestId, shadow, test, queryString }
   const [resendLoading, setResendLoading] = (0, import_react9.useState)(false);
   const [loading, setLoading] = (0, import_react9.useState)(false);
   const [tooManyAttempts, setTooManyAttempts] = (0, import_react9.useState)(false);
+  const inputRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
+    var _a;
+    if (error) {
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [error]);
   const handleCodeApply = (0, import_react9.useCallback)(
     (e) => __async(null, null, function* () {
       var _a;
@@ -1001,6 +1119,10 @@ function AuthScreen({ onBack, number, authRequestId, shadow, test, queryString }
       setSmsCode(e.target.value);
     }
   };
+  const inputId = "sms-code-input";
+  const errorId = "sms-code-error";
+  const statusId = "sms-code-status";
+  const describedBy = [error ? errorId : "", resend ? statusId : ""].filter(Boolean).join(" ") || void 0;
   return /* @__PURE__ */ import_react9.default.createElement(
     Page_default,
     {
@@ -1011,9 +1133,11 @@ function AuthScreen({ onBack, number, authRequestId, shadow, test, queryString }
       onBack,
       backDisabled: tooManyAttempts
     },
-    /* @__PURE__ */ import_react9.default.createElement(InnerContainer, null, /* @__PURE__ */ import_react9.default.createElement(InputContainer, null, /* @__PURE__ */ import_react9.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement(InnerContainer, null, /* @__PURE__ */ import_react9.default.createElement(InputContainer, null, /* @__PURE__ */ import_react9.default.createElement("label", { htmlFor: inputId, className: "visually-hidden" }, t("sms_code_label")), /* @__PURE__ */ import_react9.default.createElement(
       InputStyled,
       {
+        ref: inputRef,
+        id: inputId,
         pattern: "\\d{6}",
         inputMode: "numeric",
         autoComplete: "one-time-code",
@@ -1024,9 +1148,21 @@ function AuthScreen({ onBack, number, authRequestId, shadow, test, queryString }
         filled: smsCode.length === 6,
         error: tooManyAttempts || !!error,
         disabled: tooManyAttempts,
-        onKeyDown: handleCodeApply
+        onKeyDown: handleCodeApply,
+        "aria-required": "true",
+        "aria-invalid": tooManyAttempts || !!error,
+        "aria-describedby": describedBy
       }
-    )), /* @__PURE__ */ import_react9.default.createElement(PageConnectFooterControl, null, resend && /* @__PURE__ */ import_react9.default.createElement(StatusMessage, null, t("new_sms_code_has_been_sent")), !!error && /* @__PURE__ */ import_react9.default.createElement(StatusMessage, { error: true }, error), /* @__PURE__ */ import_react9.default.createElement(PageConnectFooterText, null, /* @__PURE__ */ import_react9.default.createElement("span", null, /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, t("didnt_receive_the_code"), " ", /* @__PURE__ */ import_react9.default.createElement(DivAsLink, { disabled: tooManyAttempts || resendLoading, onClick: () => !tooManyAttempts && !resendLoading && handleResend() }, t("resend_sms")))))), /* @__PURE__ */ import_react9.default.createElement(LoadingModal_default, { isOpen: loading }))
+    )), /* @__PURE__ */ import_react9.default.createElement(PageConnectFooterControl, null, resend && /* @__PURE__ */ import_react9.default.createElement(StatusMessage, { id: statusId, role: "status", "aria-live": "polite" }, t("new_sms_code_has_been_sent")), !!error && /* @__PURE__ */ import_react9.default.createElement(StatusMessage, { id: errorId, error: true, role: "alert", "aria-live": "assertive" }, error), /* @__PURE__ */ import_react9.default.createElement(PageConnectFooterText, null, t("didnt_receive_the_code"), " ", /* @__PURE__ */ import_react9.default.createElement(
+      InlineButton,
+      {
+        disabled: tooManyAttempts || resendLoading,
+        onClick: () => !tooManyAttempts && !resendLoading && handleResend(),
+        type: "button",
+        "aria-busy": resendLoading
+      },
+      t("resend_sms")
+    ))), /* @__PURE__ */ import_react9.default.createElement(LoadingModal_default, { isOpen: loading }))
   );
 }
 var AuthScreen_default = AuthScreen;
@@ -1107,7 +1243,7 @@ function App(props) {
         return /* @__PURE__ */ import_react10.default.createElement(NotFound_default, { messageCode: errorCode });
     }
   };
-  return /* @__PURE__ */ import_react10.default.createElement(Root, null, /* @__PURE__ */ import_react10.default.createElement(styles_default, null), /* @__PURE__ */ import_react10.default.createElement(AppContainerWrapper, null, /* @__PURE__ */ import_react10.default.createElement(AppContainer, { onScroll: handleConnectionsScroll, ref }, logo && /* @__PURE__ */ import_react10.default.createElement(PageHeader, null, /* @__PURE__ */ import_react10.default.createElement("img", { src: logo, alt: "logo" })), /* @__PURE__ */ import_react10.default.createElement(AppContainerPage, null, getScreen()))));
+  return /* @__PURE__ */ import_react10.default.createElement(Root, null, /* @__PURE__ */ import_react10.default.createElement(styles_default, null), /* @__PURE__ */ import_react10.default.createElement(AppContainerWrapper, null, /* @__PURE__ */ import_react10.default.createElement(AppContainer, { onScroll: handleConnectionsScroll, ref }, logo && /* @__PURE__ */ import_react10.default.createElement(PageHeader, null, /* @__PURE__ */ import_react10.default.createElement("img", { src: logo, alt: appName ? `${appName} logo` : "Partner logo" })), /* @__PURE__ */ import_react10.default.createElement(AppContainerPage, null, getScreen()))));
 }
 var App_default = App;
 
@@ -1144,7 +1280,8 @@ var translation_default = {
   failed_to_send_sms: "Failed to send SMS.",
   page_not_found: "Page not found",
   missing_authentication_token: "Missing Authentication Token",
-  too_many_attempts: "Too many attempts. Please use a new link to try again."
+  too_many_attempts: "Too many attempts. Please use a new link to try again.",
+  sms_code_label: "SMS verification code"
 };
 
 // src/locales/i18n.ts