@thecb/components 9.2.11 → 9.2.12-beta.0

package/dist/index.cjs.js

@@ -45771,7 +45771,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$initialFocusSele = _ref.initialFocusSelector,
+      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
@@ -45798,7 +45800,11 @@ var Modal$1 = function Modal(_ref) {
       width: customWidth || "615px",
       overflow: "auto"
     },
-    underlayClickExits: underlayClickExits
+    underlayClickExits: underlayClickExits,
+    "aria-modal": true,
+    initialFocus: initialFocusSelector,
+    focusDialog: !initialFocusSelector // Focus the dialogue box itself if no selector for initial focus was provided
+
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     borderRadius: "2px",
@@ -45845,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__default.createElement(Box, {
     width: "100%",
     padding: "0"
@@ -45857,7 +45865,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__default.createElement(Stack, {
     childGap: "1rem",
     direction: "row",
@@ -45868,7 +45878,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__default.createElement(ButtonWithAction, {
     variant: useDangerButton ? "danger" : "primary",
     action: continueAction,
@@ -45877,7 +45889,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__default.createElement(Box, {
     padding: "0.5rem"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
@@ -45886,7 +45900,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);
 };
 
@@ -47718,7 +47734,8 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     continueAction: function continueAction() {
       toggleAccepted(true);
       toggleOpen(false);
-    }
+    },
+    initialFocusSelector: "[name='Close']"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
     onClick: function onClick() {
@@ -47731,7 +47748,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));
 };
 
@@ -47788,7 +47807,9 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
       variant = _ref.variant,
       _ref$linkVariant = _ref.linkVariant,
       linkVariant = _ref$linkVariant === void 0 ? "p" : _ref$linkVariant,
-      themeValues = _ref.themeValues;
+      themeValues = _ref.themeValues,
+      _ref$initialFocusSele = _ref.initialFocusSelector,
+      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
   return /*#__PURE__*/React__default.createElement(Modal$1, {
     modalOpen: isOpen,
     hideModal: function hideModal() {
@@ -47814,7 +47835,8 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     continueAction: function continueAction() {
       toggleAccepted(true);
       toggleOpen(false);
-    }
+    },
+    initialFocusSelector: initialFocusSelector
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: linkVariant,
     onClick: function onClick() {
@@ -47827,7 +47849,10 @@ 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" // This should always be a "button" since it opens a modal
+    ,
+    className: "modal-trigger"
   }, link));
 };
 
@@ -47840,7 +47865,9 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
       terms = _ref.terms,
       _ref$error = _ref.error,
       error = _ref$error === void 0 ? false : _ref$error,
-      linkVariant = _ref.linkVariant;
+      linkVariant = _ref.linkVariant,
+      _ref$initialFocusSele = _ref.initialFocusSelector,
+      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47862,7 +47889,8 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
     terms: terms,
     isOpen: showTerms,
     toggleOpen: toggleShowTerms,
-    linkVariant: linkVariant
+    linkVariant: linkVariant,
+    initialFocusSelector: initialFocusSelector
   })))));
 };
 
@@ -47893,7 +47921,9 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
       _ref$checkboxMargin = _ref.checkboxMargin,
       checkboxMargin = _ref$checkboxMargin === void 0 ? "4px 8px 4px 4px" : _ref$checkboxMargin,
       _ref$modalTitle = _ref.modalTitle,
-      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle;
+      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle,
+      _ref$initialFocusSele = _ref.initialFocusSelector,
+      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47949,7 +47979,8 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     isOpen: showTerms,
     toggleOpen: toggleTerms,
     linkVariant: modalVariant,
-    title: modalTitle
+    title: modalTitle,
+    initialFocusSelector: initialFocusSelector
   })), /*#__PURE__*/React__default.createElement("div", {
     "aria-live": "polite",
     "aria-atomic": true
@@ -48150,7 +48181,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent
+    terms: termsContent,
+    initialFocusSelector: ".modal-close-button"
   })))));
 };
 
@@ -48346,7 +48378,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent
+    terms: termsContent,
+    initialFocusSelector: ".modal-close-button"
   })))));
 };