@thecb/components 9.2.5 → 9.2.6-beta.0

package/dist/index.esm.js

@@ -45745,7 +45745,9 @@ var Modal$1 = function Modal(_ref) {
       buttonExtraStyles = _ref.buttonExtraStyles,
       children = _ref.children,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
+      _ref$initialFocus = _ref.initialFocus,
+      initialFocus = _ref$initialFocus === void 0 ? null : _ref$initialFocus;
 
   var _useContext = useContext(ThemeContext),
       isMobile = _useContext.isMobile;
@@ -45755,7 +45757,7 @@ var Modal$1 = function Modal(_ref) {
     ref: modalContainerRef,
     "data-qa": dataQa
   }, modalOpen && /*#__PURE__*/React.createElement(reactAriaModal // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
-  , {
+  , _extends({
     focusTrapOptions: {
       fallbackFocus: modalContainerRef === null || modalContainerRef === void 0 ? void 0 : modalContainerRef.current
     },
@@ -45769,11 +45771,14 @@ var Modal$1 = function Modal(_ref) {
       alignItems: "center"
     },
     dialogStyle: {
-      width: customWidth || "615px",
-      overflow: "auto"
+      width: customWidth || "615px"
     },
-    underlayClickExits: underlayClickExits
-  }, /*#__PURE__*/React.createElement(Box, {
+    underlayClickExits: underlayClickExits,
+    "aria-modal": true,
+    "aria-name": modalHeaderText
+  }, initialFocus ? {
+    initialFocus: initialFocus
+  } : {}), /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     borderRadius: "2px",
     boxShadow: "inset 0px -2px 0px 0px rgb(0, 80, 149)"
@@ -45819,7 +45824,9 @@ var Modal$1 = function Modal(_ref) {
     text: cancelButtonText,
     dataQa: cancelButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-cancel-button"
+    className: "modal-cancel-button",
+    role: "button",
+    name: cancelButtonText
   })), /*#__PURE__*/React.createElement(Box, {
     width: "100%",
     padding: "0"
@@ -45831,7 +45838,9 @@ var Modal$1 = function Modal(_ref) {
     isLoading: isLoading,
     disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
-    className: "modal-continue-button"
+    className: "modal-continue-button",
+    role: "button",
+    name: continueButtonText
   }))) : /*#__PURE__*/React.createElement(Stack, {
     childGap: "1rem",
     direction: "row",
@@ -45842,7 +45851,9 @@ var Modal$1 = function Modal(_ref) {
     text: cancelButtonText,
     dataQa: cancelButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-cancel-button"
+    className: "modal-cancel-button",
+    role: "button",
+    name: cancelButtonText
   }), /*#__PURE__*/React.createElement(ButtonWithAction, {
     variant: useDangerButton ? "danger" : "primary",
     action: continueAction,
@@ -45851,7 +45862,9 @@ var Modal$1 = function Modal(_ref) {
     isLoading: isLoading,
     disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
-    className: "modal-continue-button"
+    className: "modal-continue-button",
+    role: "button",
+    name: continueButtonText
   }))) : /*#__PURE__*/React.createElement(Box, {
     padding: "0.5rem"
   }, /*#__PURE__*/React.createElement(ButtonWithAction, {
@@ -45860,7 +45873,9 @@ var Modal$1 = function Modal(_ref) {
     text: closeButtonText,
     dataQa: closeButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-close-button"
+    className: "modal-close-button",
+    role: "button",
+    name: closeButtonText
   }))))))))), children);
 };
 
@@ -47705,7 +47720,9 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "cursor: pointer;"
+    extraStyles: "cursor: pointer;",
+    role: "button",
+    className: "modal-trigger"
   }, link));
 };
 
@@ -47762,8 +47779,10 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
       variant = _ref.variant,
       _ref$linkVariant = _ref.linkVariant,
       linkVariant = _ref$linkVariant === void 0 ? "p" : _ref$linkVariant,
-      themeValues = _ref.themeValues;
-  return /*#__PURE__*/React.createElement(Modal$1, {
+      themeValues = _ref.themeValues,
+      _ref$initialFocus = _ref.initialFocus,
+      initialFocus = _ref$initialFocus === void 0 ? null : _ref$initialFocus;
+  return /*#__PURE__*/React.createElement(Modal$1, _extends({
     modalOpen: isOpen,
     hideModal: function hideModal() {
       return toggleOpen(false);
@@ -47789,7 +47808,9 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
       toggleAccepted(true);
       toggleOpen(false);
     }
-  }, /*#__PURE__*/React.createElement(Text$1, {
+  }, initialFocus ? {
+    initialFocus: initialFocus
+  } : {}), /*#__PURE__*/React.createElement(Text$1, {
     variant: linkVariant,
     onClick: function onClick() {
       return toggleOpen(true);
@@ -47801,7 +47822,9 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "display: inline-block; width: fit-content; cursor: pointer"
+    extraStyles: "display: inline-block; width: fit-content; cursor: pointer",
+    role: "button",
+    className: "modal-trigger"
   }, link));
 };
 
@@ -47836,7 +47859,8 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
     terms: terms,
     isOpen: showTerms,
     toggleOpen: toggleShowTerms,
-    linkVariant: linkVariant
+    linkVariant: linkVariant,
+    initialFocus: "[role=\"button\"]:not(.modal-trigger)"
   })))));
 };
 
@@ -47919,7 +47943,8 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     isOpen: showTerms,
     toggleOpen: toggleTerms,
     linkVariant: modalVariant,
-    title: modalTitle
+    title: modalTitle,
+    initialFocus: ".modal-close-button"
   })), /*#__PURE__*/React.createElement("div", {
     "aria-live": "polite",
     "aria-atomic": true