@basiq/connect-auth 1.1.36 → 1.1.40-alpha

package/dist/index.mjs

@@ -24,7 +24,7 @@ import React10 from "react";
 import { ThemeProvider } from "styled-components";
 
 // src/App.tsx
-import React9, { createRef, useEffect as useEffect2, useState as useState3 } from "react";
+import React9, { createRef, useEffect as useEffect5, useState as useState3 } from "react";
 
 // src/styledComponents/ui/basic.ts
 import styled, { css, keyframes } from "styled-components";
@@ -53,6 +53,11 @@ var SimpleButton = styled.button`
 	cursor: pointer;
 	margin-bottom: 8px;
 	padding: 10px;
+
+	&:focus-visible {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
 `;
 var Input = styled.input`
 	height: 48px;
@@ -80,7 +85,8 @@ var Input = styled.input`
 	}
 
 	&:focus-visible {
-		outline: none;
+		outline: 2px solid ${({ theme: theme2 }) => theme2.color.endeavour};
+		outline-offset: 2px;
 		background-color: ${({ theme: theme2 }) => theme2.color.spindle};
 	}
 
@@ -91,7 +97,6 @@ var Input = styled.input`
 	}
 `;
 var H4Styled = styled.h4`
-	cursor: pointer;
 	user-select: none;
 	${({ theme: theme2 }) => theme2.mixin.subtitle()};
 `;
@@ -175,17 +180,17 @@ var ButtonStyled = styled2(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 {
@@ -217,6 +222,11 @@ var ButtonStyled = styled2(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
@@ -237,8 +247,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();
   }
 };
@@ -306,7 +317,7 @@ var theme = {
     dodgerBlueLight: "#5e7Bff",
     royalBlue: "#4461e6",
     bostonBlue: "#367ab9",
-    endeavour: "#0459a8",
+    endeavour: "#0460af",
     congressBlue: "#045097",
     brilliantBlue: "#0075dc",
     curiousBlue: "#2784da",
@@ -498,7 +509,7 @@ var PageConnectFooterControl = styled5.div`
 	box-sizing: border-box;
 	padding: 16px;
 `;
-var PageConnectFooterText = styled5.span`
+var PageConnectFooterText = styled5.p`
 	color: ${({ theme: theme2 }) => theme2.color.abbey};
 	font-size: 12px;
 `;
@@ -514,6 +525,11 @@ var InputStyled = styled5.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 = styled5.div`
 	width: 100%;
@@ -521,10 +537,22 @@ var InputContainer = styled5.div`
 	align-items: center;
 	justify-content: center;
 `;
-var DivAsLink = styled5.div`
+var InlineButton = styled5.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
@@ -583,6 +611,11 @@ var StatusScreenErrorCode = styled7.span`
 	margin-top: 16px;
 	color: ${({ theme: theme2 }) => theme2.color.osloGrey};
 `;
+var StatusScreenTitle = styled7.h1`
+	font-size: 16px;
+	font-weight: normal;
+	margin: 0 0 4px 0;
+`;
 var PageSuccessImgContainer = styled7.div`
 	margin-bottom: 24px;
 	width: 64px;
@@ -617,12 +650,16 @@ var Root = styled8.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%;
@@ -701,10 +738,22 @@ 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
-import React2 from "react";
+import React2, { useEffect, useRef as useRef2 } from "react";
 import { useTranslation } from "react-i18next";
 
 // src/components/ui/Button.tsx
@@ -716,7 +765,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__ */ React.createElement(ButtonStyled, { buttonType, disabled: disabled || false, onClick }, buttonType === "back" && /* @__PURE__ */ React.createElement("img", { src: back_default, alt: "" }), /* @__PURE__ */ React.createElement(ButtonLabel, null, " ", label || ""));
+  return /* @__PURE__ */ React.createElement(ButtonStyled, { type: "button", buttonType, disabled: disabled || false, onClick }, buttonType === "back" && /* @__PURE__ */ React.createElement("img", { src: back_default, alt: "" }), /* @__PURE__ */ React.createElement(ButtonLabel, null, " ", label || ""));
 }
 var Button_default = Button;
 
@@ -725,7 +774,14 @@ function Page(props) {
   var _a;
   const { buttons, children, title, subTitle, shadow, onBack, backDisabled } = props;
   const { t } = useTranslation();
-  return /* @__PURE__ */ React2.createElement(PageStyled, { buttonCount: buttons == null ? void 0 : buttons.length }, onBack && /* @__PURE__ */ React2.createElement(Button_default, { onClick: onBack, label: t("back"), buttonType: "back", disabled: backDisabled }), title && /* @__PURE__ */ React2.createElement("h3", null, title), subTitle && /* @__PURE__ */ React2.createElement(PageSubtitle, null, subTitle), /* @__PURE__ */ React2.createElement(PageMainContainer, null, children), /* @__PURE__ */ React2.createElement(PageControlsSection, { notEmpty: ((_a = buttons == null ? void 0 : buttons.length) != null ? _a : 0) > 0 }, /* @__PURE__ */ React2.createElement(PageShadowWrapper, null, shadow && /* @__PURE__ */ React2.createElement(PageShadow, null), buttons == null ? void 0 : buttons.map((b, index) => /* @__PURE__ */ React2.createElement(Button_default, { key: index, onClick: b.onClick, label: b.label, buttonType: b.buttonType, disabled: b.disabled })))));
+  const headingRef = useRef2(null);
+  useEffect(() => {
+    var _a2;
+    if (title) {
+      (_a2 = headingRef.current) == null ? void 0 : _a2.focus();
+    }
+  }, []);
+  return /* @__PURE__ */ React2.createElement(PageStyled, { buttonCount: buttons == null ? void 0 : buttons.length }, onBack && /* @__PURE__ */ React2.createElement(Button_default, { onClick: onBack, label: t("back"), buttonType: "back", disabled: backDisabled }), title && /* @__PURE__ */ React2.createElement("h1", { ref: headingRef, tabIndex: -1 }, title), subTitle && /* @__PURE__ */ React2.createElement(PageSubtitle, { as: "p" }, subTitle), /* @__PURE__ */ React2.createElement("main", null, /* @__PURE__ */ React2.createElement(PageMainContainer, null, children)), /* @__PURE__ */ React2.createElement(PageControlsSection, { notEmpty: ((_a = buttons == null ? void 0 : buttons.length) != null ? _a : 0) > 0 }, /* @__PURE__ */ React2.createElement(PageShadowWrapper, null, shadow && /* @__PURE__ */ React2.createElement(PageShadow, null), buttons == null ? void 0 : buttons.map((b, index) => /* @__PURE__ */ React2.createElement(Button_default, { key: index, onClick: b.onClick, label: b.label, buttonType: b.buttonType, disabled: b.disabled })))));
 }
 var Page_default = Page;
 
@@ -736,8 +792,8 @@ import { useTranslation as useTranslation2 } from "react-i18next";
 // src/components/ui/icon.tsx
 import React3 from "react";
 function Icon(props) {
-  const { rotating, img } = props;
-  return /* @__PURE__ */ React3.createElement(IconWrapper, { rotating }, /* @__PURE__ */ React3.createElement("img", { src: img, alt: "" }));
+  const { rotating, img, alt = "" } = props;
+  return /* @__PURE__ */ React3.createElement(IconWrapper, { rotating }, /* @__PURE__ */ React3.createElement("img", { src: img, alt }));
 }
 var icon_default = Icon;
 
@@ -747,12 +803,12 @@ var error_default = 'data:image/svg+xml,<!-- Generated by IcoMoon.io -->%0A<svg
 // src/components/pages/NotFound.tsx
 function NotFound({ messageCode = "404" }) {
   const { t } = useTranslation2();
-  return /* @__PURE__ */ React4.createElement(Page_default, { shadow: false }, /* @__PURE__ */ React4.createElement(PageStyled, null, /* @__PURE__ */ React4.createElement(PageStatusScreenMain, null, /* @__PURE__ */ React4.createElement(PageStyled, null, /* @__PURE__ */ React4.createElement(PageStatusScreenContent, null, /* @__PURE__ */ React4.createElement(StatusScreenCircleContainer, { type: "warning" }, /* @__PURE__ */ React4.createElement(icon_default, { img: error_default, rotating: false })), /* @__PURE__ */ React4.createElement("span", null, t("page_not_found")), /* @__PURE__ */ React4.createElement(StatusScreenErrorCode, null, `${t("error")}: ${messageCode}`)))), /* @__PURE__ */ React4.createElement(PageControlsSection, { notEmpty: false }, /* @__PURE__ */ React4.createElement(PageShadowWrapper, null))));
+  return /* @__PURE__ */ React4.createElement(Page_default, { shadow: false }, /* @__PURE__ */ React4.createElement(PageStyled, null, /* @__PURE__ */ React4.createElement(PageStatusScreenMain, null, /* @__PURE__ */ React4.createElement(PageStyled, null, /* @__PURE__ */ React4.createElement(PageStatusScreenContent, null, /* @__PURE__ */ React4.createElement(StatusScreenCircleContainer, { type: "warning" }, /* @__PURE__ */ React4.createElement(icon_default, { img: error_default, rotating: false })), /* @__PURE__ */ React4.createElement(StatusScreenTitle, null, t("page_not_found")), /* @__PURE__ */ React4.createElement(StatusScreenErrorCode, null, `${t("error")}: ${messageCode}`)))), /* @__PURE__ */ React4.createElement(PageControlsSection, { notEmpty: false }, /* @__PURE__ */ React4.createElement(PageShadowWrapper, null))));
 }
 var NotFound_default = NotFound;
 
 // src/components/pages/StartScreen.tsx
-import React7, { useEffect, useState } from "react";
+import React7, { useCallback, useEffect as useEffect3, useState } from "react";
 import { Trans, useTranslation as useTranslation4 } from "react-i18next";
 
 // src/actions/actions.ts
@@ -840,15 +896,68 @@ import React6 from "react";
 import { useTranslation as useTranslation3 } from "react-i18next";
 
 // src/components/ui/Modal.tsx
-import React5 from "react";
+import React5, { useEffect as useEffect2, useRef as useRef3 } from "react";
 function Modal(props) {
-  const { children, onClose, isOpen, disableTransparency } = props;
+  const { children, onClose, isOpen, disableTransparency, role = "dialog", ariaLabel, ariaLive } = props;
+  const modalRef = useRef3(null);
+  const previousFocusRef = useRef3(null);
+  useEffect2(() => {
+    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__ */ React5.createElement(React5.Fragment, null, isOpen ? /* @__PURE__ */ React5.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__ */ React5.createElement(React5.Fragment, null, isOpen ? /* @__PURE__ */ React5.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;
 
@@ -859,7 +968,8 @@ var loading_indicator_default = 'data:image/svg+xml,<!-- Generated by IcoMoon.io
 function LoadingModal(props) {
   const { isOpen, disableTransparency, loadingText } = props;
   const { t } = useTranslation3();
-  return /* @__PURE__ */ React6.createElement(Modal_default, { isOpen, disableTransparency: !!disableTransparency }, /* @__PURE__ */ React6.createElement(LoadingModalStyled, { disableTransparency: !!disableTransparency }, /* @__PURE__ */ React6.createElement(icon_default, { img: loading_indicator_default, rotating: true }), /* @__PURE__ */ React6.createElement(LoadingModalText, null, loadingText || t("loading"))));
+  const label = loadingText || t("loading");
+  return /* @__PURE__ */ React6.createElement(Modal_default, { isOpen, disableTransparency: !!disableTransparency, role: "status", ariaLabel: label, ariaLive: "polite" }, /* @__PURE__ */ React6.createElement(LoadingModalStyled, { disableTransparency: !!disableTransparency }, /* @__PURE__ */ React6.createElement(icon_default, { img: loading_indicator_default, rotating: true, alt: "" }), /* @__PURE__ */ React6.createElement(LoadingModalText, { "aria-hidden": "true" }, label)));
 }
 var LoadingModal_default = LoadingModal;
 
@@ -868,13 +978,7 @@ function StartScreen(props) {
   const { onContinue, appName, shadow, authRequestId, showErrorScreen, smsSent, setSmsSent, test } = props;
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation4();
-  useEffect(() => {
-    window.addEventListener("keydown", (e) => handleUserKeyPress(e, onContinue));
-    return () => {
-      window.removeEventListener("keydown", (e) => handleUserKeyPress(e, onContinue));
-    };
-  }, []);
-  const handleContinue = () => __async(null, null, function* () {
+  const handleContinue = useCallback(() => __async(null, null, function* () {
     setLoading(true);
     if (authRequestId && !smsSent) {
       const response = yield authUser({ authRequestId, test });
@@ -889,7 +993,14 @@ function StartScreen(props) {
       setLoading(false);
       onContinue();
     }
-  });
+  }), [authRequestId, smsSent, test, onContinue, showErrorScreen, setSmsSent]);
+  useEffect3(() => {
+    const handler = (e) => handleUserKeyPress(e, handleContinue);
+    window.addEventListener("keydown", handler);
+    return () => {
+      window.removeEventListener("keydown", handler);
+    };
+  }, [handleContinue]);
   const buttons = [
     {
       label: t("continue"),
@@ -903,13 +1014,13 @@ function StartScreen(props) {
       shadow,
       buttons
     },
-    /* @__PURE__ */ React7.createElement(InnerContainer, null, /* @__PURE__ */ React7.createElement(Spacer, null), /* @__PURE__ */ React7.createElement(H4Styled, null, t("to_do_this_we_will_ask_you_to")), /* @__PURE__ */ React7.createElement("ul", null, /* @__PURE__ */ React7.createElement("li", null, /* @__PURE__ */ React7.createElement(Trans, { t, i18nKey: "verify_your_mobile_number_bold", components: { bold: /* @__PURE__ */ React7.createElement("strong", null) } })), /* @__PURE__ */ React7.createElement("li", null, /* @__PURE__ */ React7.createElement(Trans, { t, i18nKey: "consent_to_share_your_data_with_us", components: { bold: /* @__PURE__ */ React7.createElement("strong", null) } })), /* @__PURE__ */ React7.createElement("li", null, /* @__PURE__ */ React7.createElement(Trans, { t, i18nKey: "share_your_financial_data", components: { bold: /* @__PURE__ */ React7.createElement("strong", null) } }))), /* @__PURE__ */ React7.createElement(H4Styled, null, t("things_you_should_know")), /* @__PURE__ */ React7.createElement("ul", null, /* @__PURE__ */ React7.createElement("li", null, t("we_dont_share_your_data_without_your_consent")), /* @__PURE__ */ React7.createElement("li", null, t("you_can_easily_stop_sharing_your_data_at_any_time")), /* @__PURE__ */ React7.createElement("li", null, t("you_can_choose_to_delete_shared_data_when_we_no_longer_need_it"))), /* @__PURE__ */ React7.createElement(Spacer, null), /* @__PURE__ */ React7.createElement("span", null, /* @__PURE__ */ React7.createElement(React7.Fragment, null, t("by_proceeding_you_agree_to_the"), " ", /* @__PURE__ */ React7.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__ */ React7.createElement("a", { href: "https://docs.basiq.io/en/articles/382581-basiq-privacy-policy", rel: "noreferrer", target: "_blank" }, t("privacy_notice")))), /* @__PURE__ */ React7.createElement(LoadingModal_default, { isOpen: loading }))
+    /* @__PURE__ */ React7.createElement(InnerContainer, null, /* @__PURE__ */ React7.createElement(Spacer, null), /* @__PURE__ */ React7.createElement("section", { "aria-labelledby": "steps-heading" }, /* @__PURE__ */ React7.createElement(H4Styled, { id: "steps-heading" }, t("to_do_this_we_will_ask_you_to")), /* @__PURE__ */ React7.createElement("ul", null, /* @__PURE__ */ React7.createElement("li", null, /* @__PURE__ */ React7.createElement(Trans, { t, i18nKey: "verify_your_mobile_number_bold", components: { bold: /* @__PURE__ */ React7.createElement("strong", null) } })), /* @__PURE__ */ React7.createElement("li", null, /* @__PURE__ */ React7.createElement(Trans, { t, i18nKey: "consent_to_share_your_data_with_us", components: { bold: /* @__PURE__ */ React7.createElement("strong", null) } })), /* @__PURE__ */ React7.createElement("li", null, /* @__PURE__ */ React7.createElement(Trans, { t, i18nKey: "share_your_financial_data", components: { bold: /* @__PURE__ */ React7.createElement("strong", null) } })))), /* @__PURE__ */ React7.createElement("section", { "aria-labelledby": "info-heading" }, /* @__PURE__ */ React7.createElement(H4Styled, { id: "info-heading" }, t("things_you_should_know")), /* @__PURE__ */ React7.createElement("ul", null, /* @__PURE__ */ React7.createElement("li", null, t("we_dont_share_your_data_without_your_consent")), /* @__PURE__ */ React7.createElement("li", null, t("you_can_easily_stop_sharing_your_data_at_any_time")), /* @__PURE__ */ React7.createElement("li", null, t("you_can_choose_to_delete_shared_data_when_we_no_longer_need_it")))), /* @__PURE__ */ React7.createElement(Spacer, null), /* @__PURE__ */ React7.createElement("p", null, t("by_proceeding_you_agree_to_the"), " ", /* @__PURE__ */ React7.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__ */ React7.createElement("a", { href: "https://docs.basiq.io/en/articles/382581-basiq-privacy-policy", rel: "noreferrer noopener", target: "_blank" }, t("privacy_notice"))), /* @__PURE__ */ React7.createElement(LoadingModal_default, { isOpen: loading }))
   );
 }
 var StartScreen_default = StartScreen;
 
 // src/components/pages/AuthScreen.tsx
-import React8, { useCallback, useState as useState2 } from "react";
+import React8, { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef4, useState as useState2 } from "react";
 import { useTranslation as useTranslation5 } from "react-i18next";
 function AuthScreen({ onBack, number, authRequestId, shadow, test, queryString }) {
   const { t } = useTranslation5();
@@ -919,7 +1030,14 @@ function AuthScreen({ onBack, number, authRequestId, shadow, test, queryString }
   const [resendLoading, setResendLoading] = useState2(false);
   const [loading, setLoading] = useState2(false);
   const [tooManyAttempts, setTooManyAttempts] = useState2(false);
-  const handleCodeApply = useCallback(
+  const inputRef = useRef4(null);
+  useEffect4(() => {
+    var _a;
+    if (error) {
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [error]);
+  const handleCodeApply = useCallback2(
     (e) => __async(null, null, function* () {
       var _a;
       if (smsCode.length === 6 && error.length === 0 && (!e || (e == null ? void 0 : e.key) === "Enter")) {
@@ -966,6 +1084,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__ */ React8.createElement(
     Page_default,
     {
@@ -976,9 +1098,11 @@ function AuthScreen({ onBack, number, authRequestId, shadow, test, queryString }
       onBack,
       backDisabled: tooManyAttempts
     },
-    /* @__PURE__ */ React8.createElement(InnerContainer, null, /* @__PURE__ */ React8.createElement(InputContainer, null, /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React8.createElement(InnerContainer, null, /* @__PURE__ */ React8.createElement(InputContainer, null, /* @__PURE__ */ React8.createElement("label", { htmlFor: inputId, className: "visually-hidden" }, t("sms_code_label")), /* @__PURE__ */ React8.createElement(
       InputStyled,
       {
+        ref: inputRef,
+        id: inputId,
         pattern: "\\d{6}",
         inputMode: "numeric",
         autoComplete: "one-time-code",
@@ -989,9 +1113,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__ */ React8.createElement(PageConnectFooterControl, null, resend && /* @__PURE__ */ React8.createElement(StatusMessage, null, t("new_sms_code_has_been_sent")), !!error && /* @__PURE__ */ React8.createElement(StatusMessage, { error: true }, error), /* @__PURE__ */ React8.createElement(PageConnectFooterText, null, /* @__PURE__ */ React8.createElement("span", null, /* @__PURE__ */ React8.createElement(React8.Fragment, null, t("didnt_receive_the_code"), " ", /* @__PURE__ */ React8.createElement(DivAsLink, { disabled: tooManyAttempts || resendLoading, onClick: () => !tooManyAttempts && !resendLoading && handleResend() }, t("resend_sms")))))), /* @__PURE__ */ React8.createElement(LoadingModal_default, { isOpen: loading }))
+    )), /* @__PURE__ */ React8.createElement(PageConnectFooterControl, null, resend && /* @__PURE__ */ React8.createElement(StatusMessage, { id: statusId, role: "status", "aria-live": "polite" }, t("new_sms_code_has_been_sent")), !!error && /* @__PURE__ */ React8.createElement(StatusMessage, { id: errorId, error: true, role: "alert", "aria-live": "assertive" }, error), /* @__PURE__ */ React8.createElement(PageConnectFooterText, null, t("didnt_receive_the_code"), " ", /* @__PURE__ */ React8.createElement(
+      InlineButton,
+      {
+        disabled: tooManyAttempts || resendLoading,
+        onClick: () => !tooManyAttempts && !resendLoading && handleResend(),
+        type: "button",
+        "aria-busy": resendLoading
+      },
+      t("resend_sms")
+    ))), /* @__PURE__ */ React8.createElement(LoadingModal_default, { isOpen: loading }))
   );
 }
 var AuthScreen_default = AuthScreen;
@@ -1017,7 +1153,7 @@ function App(props) {
     setErrorCode(code);
     setCurrentScreen(3);
   };
-  useEffect2(() => {
+  useEffect5(() => {
     const getData = () => __async(null, null, function* () {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
       const id = (_b = (_a = window.location.pathname) == null ? void 0 : _a.substring(1)) == null ? void 0 : _b.split("?")[0];
@@ -1072,7 +1208,7 @@ function App(props) {
         return /* @__PURE__ */ React9.createElement(NotFound_default, { messageCode: errorCode });
     }
   };
-  return /* @__PURE__ */ React9.createElement(Root, null, /* @__PURE__ */ React9.createElement(styles_default, null), /* @__PURE__ */ React9.createElement(AppContainerWrapper, null, /* @__PURE__ */ React9.createElement(AppContainer, { onScroll: handleConnectionsScroll, ref }, logo && /* @__PURE__ */ React9.createElement(PageHeader, null, /* @__PURE__ */ React9.createElement("img", { src: logo, alt: "logo" })), /* @__PURE__ */ React9.createElement(AppContainerPage, null, getScreen()))));
+  return /* @__PURE__ */ React9.createElement(Root, null, /* @__PURE__ */ React9.createElement(styles_default, null), /* @__PURE__ */ React9.createElement(AppContainerWrapper, null, /* @__PURE__ */ React9.createElement(AppContainer, { onScroll: handleConnectionsScroll, ref }, logo && /* @__PURE__ */ React9.createElement(PageHeader, null, /* @__PURE__ */ React9.createElement("img", { src: logo, alt: appName ? `${appName} logo` : "Partner logo" })), /* @__PURE__ */ React9.createElement(AppContainerPage, null, getScreen()))));
 }
 var App_default = App;
 
@@ -1109,7 +1245,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