@thecb/components 9.3.2 → 9.3.3-beta.10

package/dist/index.esm.js

@@ -45810,7 +45810,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 = useContext(ThemeContext),
       isMobile = _useContext.isMobile;
@@ -45837,7 +45839,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.createElement(Box, {
     padding: "0",
     borderRadius: "2px",
@@ -45884,7 +45890,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"
@@ -45896,7 +45904,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",
@@ -45907,7 +45917,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,
@@ -45916,7 +45928,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, {
@@ -45925,7 +45939,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);
 };
 
@@ -47756,7 +47772,8 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     continueAction: function continueAction() {
       toggleAccepted(true);
       toggleOpen(false);
-    }
+    },
+    initialFocusSelector: "[name='Close']"
   }, /*#__PURE__*/React.createElement(Text$1, {
     variant: "pS",
     onClick: function onClick() {
@@ -47769,7 +47786,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));
 };
 
@@ -47826,7 +47845,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.createElement(Modal$1, {
     modalOpen: isOpen,
     hideModal: function hideModal() {
@@ -47852,7 +47873,8 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     continueAction: function continueAction() {
       toggleAccepted(true);
       toggleOpen(false);
-    }
+    },
+    initialFocusSelector: initialFocusSelector
   }, /*#__PURE__*/React.createElement(Text$1, {
     variant: linkVariant,
     onClick: function onClick() {
@@ -47865,7 +47887,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));
 };
 
@@ -47878,7 +47903,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 = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47900,7 +47927,8 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
     terms: terms,
     isOpen: showTerms,
     toggleOpen: toggleShowTerms,
-    linkVariant: linkVariant
+    linkVariant: linkVariant,
+    initialFocusSelector: initialFocusSelector
   })))));
 };
 
@@ -47931,7 +47959,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 = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47987,7 +48017,8 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     isOpen: showTerms,
     toggleOpen: toggleTerms,
     linkVariant: modalVariant,
-    title: modalTitle
+    title: modalTitle,
+    initialFocusSelector: initialFocusSelector
   })), /*#__PURE__*/React.createElement("div", {
     "aria-live": "polite",
     "aria-atomic": true
@@ -48188,7 +48219,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent
+    terms: termsContent,
+    initialFocusSelector: ".modal-close-button"
   })))));
 };
 
@@ -48384,7 +48416,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent
+    terms: termsContent,
+    initialFocusSelector: ".modal-close-button"
   })))));
 };