@thecb/components 9.2.10-beta.8 → 9.2.11-beta.0

package/dist/index.cjs.js

@@ -22145,6 +22145,7 @@ var Checkbox = function Checkbox(_ref4) {
       checkboxMargin = _ref4$checkboxMargin === void 0 ? "0 16px 0 0" : _ref4$checkboxMargin,
       extraStyles = _ref4.extraStyles,
       textExtraStyles = _ref4.textExtraStyles,
+      labelledById = _ref4.labelledById,
       _ref4$dataQa = _ref4.dataQa,
       dataQa = _ref4$dataQa === void 0 ? null : _ref4$dataQa;
 
@@ -22159,6 +22160,9 @@ var Checkbox = function Checkbox(_ref4) {
     }
   };
 
+  var titleId = title ? "checkboxlabel-".concat(name) : undefined;
+  var ariaLabelledById = labelledById !== null && labelledById !== void 0 ? labelledById : titleId;
+  var ariaLabel = ariaLabelledById ? undefined : name;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     tabIndex: "0",
@@ -22182,6 +22186,8 @@ var Checkbox = function Checkbox(_ref4) {
     id: "checkbox-".concat(name),
     disabled: disabled,
     name: name,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledById,
     checked: checked,
     onChange: onChange,
     tabIndex: "-1",
@@ -22199,8 +22205,7 @@ var Checkbox = function Checkbox(_ref4) {
     errorStyles: themeValues.errorStyles,
     disabledStyles: themeValues.disabledStyles,
     disabledCheckedStyles: themeValues.disabledCheckedStyles,
-    focusedStyles: themeValues.focusedStyles,
-    "aria-labelledby": "".concat(name, "_title_id")
+    focusedStyles: themeValues.focusedStyles
   }, /*#__PURE__*/React__default.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
@@ -22209,10 +22214,10 @@ var Checkbox = function Checkbox(_ref4) {
   }, /*#__PURE__*/React__default.createElement("polyline", {
     points: "20 6 9 17 4 12"
   })))), title && /*#__PURE__*/React__default.createElement(Text$1, {
+    id: titleId,
     variant: "p",
     weight: themeValues.textFontWeight,
     color: themeValues.textColor,
-    id: "".concat(name, "_title_id"),
     extraStyles: textExtraStyles ? "".concat(textExtraStyles, " ").concat(disabled && "color: #6e727e; background-color: #f7f7f7;", " ") : "margin-left: 1rem ".concat(disabled && "color: #6e727e; background-color: #f7f7f7;")
   }, title)));
 };
@@ -45766,9 +45771,7 @@ var Modal$1 = function Modal(_ref) {
       buttonExtraStyles = _ref.buttonExtraStyles,
       children = _ref.children,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
-      _ref$initialFocusSele = _ref.initialFocusSelector,
-      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
@@ -45795,11 +45798,7 @@ var Modal$1 = function Modal(_ref) {
       width: customWidth || "615px",
       overflow: "auto"
     },
-    underlayClickExits: underlayClickExits,
-    "aria-modal": true,
-    initialFocus: initialFocusSelector,
-    focusDialog: !initialFocusSelector // Focus the dialogue box itself if no selector for initial focus was provided
-
+    underlayClickExits: underlayClickExits
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     borderRadius: "2px",
@@ -45846,9 +45845,7 @@ var Modal$1 = function Modal(_ref) {
     text: cancelButtonText,
     dataQa: cancelButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-cancel-button",
-    role: "button",
-    name: cancelButtonText
+    className: "modal-cancel-button"
   })), /*#__PURE__*/React__default.createElement(Box, {
     width: "100%",
     padding: "0"
@@ -45860,9 +45857,7 @@ var Modal$1 = function Modal(_ref) {
     isLoading: isLoading,
     disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
-    className: "modal-continue-button",
-    role: "button",
-    name: continueButtonText
+    className: "modal-continue-button"
   }))) : /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "1rem",
     direction: "row",
@@ -45873,9 +45868,7 @@ var Modal$1 = function Modal(_ref) {
     text: cancelButtonText,
     dataQa: cancelButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-cancel-button",
-    role: "button",
-    name: cancelButtonText
+    className: "modal-cancel-button"
   }), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     variant: useDangerButton ? "danger" : "primary",
     action: continueAction,
@@ -45884,9 +45877,7 @@ var Modal$1 = function Modal(_ref) {
     isLoading: isLoading,
     disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
-    className: "modal-continue-button",
-    role: "button",
-    name: continueButtonText
+    className: "modal-continue-button"
   }))) : /*#__PURE__*/React__default.createElement(Box, {
     padding: "0.5rem"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
@@ -45895,9 +45886,7 @@ var Modal$1 = function Modal(_ref) {
     text: closeButtonText,
     dataQa: closeButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-close-button",
-    role: "button",
-    name: closeButtonText
+    className: "modal-close-button"
   }))))))))), children);
 };
 
@@ -47729,8 +47718,7 @@ 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() {
@@ -47743,9 +47731,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "cursor: pointer;",
-    role: "button",
-    className: "modal-trigger"
+    extraStyles: "cursor: pointer;"
   }, link));
 };
 
@@ -47790,6 +47776,8 @@ var fallbackValues$P = {
   modalLinkHoverFocus: modalLinkHoverFocus$2
 };
 
+var TermsAndConditionsModalLinkId = "terms-and-conditions-link";
+
 var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
   var link = _ref.link,
       _ref$title = _ref.title,
@@ -47802,9 +47790,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
       variant = _ref.variant,
       _ref$linkVariant = _ref.linkVariant,
       linkVariant = _ref$linkVariant === void 0 ? "p" : _ref$linkVariant,
-      themeValues = _ref.themeValues,
-      _ref$initialFocusSele = _ref.initialFocusSelector,
-      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
+      themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement(Modal$1, {
     modalOpen: isOpen,
     hideModal: function hideModal() {
@@ -47830,9 +47816,9 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     continueAction: function continueAction() {
       toggleAccepted(true);
       toggleOpen(false);
-    },
-    initialFocusSelector: initialFocusSelector
+    }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
+    id: TermsAndConditionsModalLinkId,
     variant: linkVariant,
     onClick: function onClick() {
       return toggleOpen(true);
@@ -47844,10 +47830,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
-    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"
+    extraStyles: "display: inline-block; width: fit-content; cursor: pointer"
   }, link));
 };
 
@@ -47860,11 +47843,7 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
       terms = _ref.terms,
       _ref$error = _ref.error,
       error = _ref$error === void 0 ? false : _ref$error,
-      linkVariant = _ref.linkVariant,
-      _ref$initialFocusSele = _ref.initialFocusSelector,
-      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
-      _ref$id = _ref.id,
-      id = _ref$id === void 0 ? "terms-and-conditions" : _ref$id;
+      linkVariant = _ref.linkVariant;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47876,20 +47855,17 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
     title: "Terms and Conditions",
     error: error,
     checked: isChecked,
-    onChange: onCheck,
-    "aria-labelledby": "".concat(id, "_label")
+    onChange: onCheck
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 0 58px"
   }, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    id: "".concat(id, "_label")
+    padding: "0"
   }, html), terms && /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
     link: "Learn More",
     terms: terms,
     isOpen: showTerms,
     toggleOpen: toggleShowTerms,
-    linkVariant: linkVariant,
-    initialFocusSelector: initialFocusSelector
+    linkVariant: linkVariant
   })))));
 };
 
@@ -47918,9 +47894,7 @@ 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,
-      _ref$initialFocusSele = _ref.initialFocusSelector,
-      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
+      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47946,8 +47920,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
   }, html && /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    id: "".concat(id, "_label")
+    padding: "0"
   }, html), /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center",
@@ -47959,7 +47932,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     onChange: onCheck,
     checkboxMargin: checkboxMargin,
     extraStyles: "align-self: flex-start;",
-    "aria-labelledby": "".concat(id, "_label")
+    labelledById: TermsAndConditionsModalLinkId
   }), /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0.25rem",
     fullHeight: true
@@ -47976,8 +47949,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     isOpen: showTerms,
     toggleOpen: toggleTerms,
     linkVariant: modalVariant,
-    title: modalTitle,
-    initialFocusSelector: initialFocusSelector
+    title: modalTitle
   })), /*#__PURE__*/React__default.createElement("div", {
     "aria-live": "polite",
     "aria-atomic": true
@@ -48178,8 +48150,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent,
-    initialFocusSelector: ".modal-close-button"
+    terms: termsContent
   })))));
 };
 
@@ -48375,8 +48346,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent,
-    initialFocusSelector: ".modal-close-button"
+    terms: termsContent
   })))));
 };