@thecb/components 9.2.10-beta.8 → 9.2.10

package/dist/index.esm.js

@@ -22137,6 +22137,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;
 
@@ -22151,6 +22152,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.createElement(Box, {
     padding: "0",
     tabIndex: "0",
@@ -22174,6 +22178,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",
@@ -22191,8 +22197,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.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
@@ -22201,10 +22206,10 @@ var Checkbox = function Checkbox(_ref4) {
   }, /*#__PURE__*/React.createElement("polyline", {
     points: "20 6 9 17 4 12"
   })))), title && /*#__PURE__*/React.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)));
 };
@@ -45758,9 +45763,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 = useContext(ThemeContext),
       isMobile = _useContext.isMobile;
@@ -45787,11 +45790,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.createElement(Box, {
     padding: "0",
     borderRadius: "2px",
@@ -45838,9 +45837,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.createElement(Box, {
     width: "100%",
     padding: "0"
@@ -45852,9 +45849,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.createElement(Stack, {
     childGap: "1rem",
     direction: "row",
@@ -45865,9 +45860,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.createElement(ButtonWithAction, {
     variant: useDangerButton ? "danger" : "primary",
     action: continueAction,
@@ -45876,9 +45869,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.createElement(Box, {
     padding: "0.5rem"
   }, /*#__PURE__*/React.createElement(ButtonWithAction, {
@@ -45887,9 +45878,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);
 };
 
@@ -47721,8 +47710,7 @@ 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() {
@@ -47735,9 +47723,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));
 };
 
@@ -47794,9 +47780,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.createElement(Modal$1, {
     modalOpen: isOpen,
     hideModal: function hideModal() {
@@ -47822,8 +47806,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     continueAction: function continueAction() {
       toggleAccepted(true);
       toggleOpen(false);
-    },
-    initialFocusSelector: initialFocusSelector
+    }
   }, /*#__PURE__*/React.createElement(Text$1, {
     variant: linkVariant,
     onClick: function onClick() {
@@ -47836,10 +47819,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));
 };
 
@@ -47852,11 +47832,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 = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47868,23 +47844,22 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
     title: "Terms and Conditions",
     error: error,
     checked: isChecked,
-    onChange: onCheck,
-    "aria-labelledby": "".concat(id, "_label")
+    onChange: onCheck
   }), /*#__PURE__*/React.createElement(Box, {
     padding: "0 0 0 58px"
   }, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Box, {
-    padding: "0",
-    id: "".concat(id, "_label")
+    padding: "0"
   }, html), terms && /*#__PURE__*/React.createElement(TermsAndConditionsModal$1, {
     link: "Learn More",
     terms: terms,
     isOpen: showTerms,
     toggleOpen: toggleShowTerms,
-    linkVariant: linkVariant,
-    initialFocusSelector: initialFocusSelector
+    linkVariant: linkVariant
   })))));
 };
 
+var TermsAndConditionsTitleDivId = "terms-and-conditions-title";
+
 var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   var _ref$showCheckbox = _ref.showCheckbox,
       showCheckbox = _ref$showCheckbox === void 0 ? true : _ref$showCheckbox,
@@ -47910,9 +47885,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 = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47938,8 +47911,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "0"
   }, html && /*#__PURE__*/React.createElement(Box, {
-    padding: "0",
-    id: "".concat(id, "_label")
+    padding: "0"
   }, html), /*#__PURE__*/React.createElement(Cluster, {
     justify: "flex-start",
     align: "center",
@@ -47951,7 +47923,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     onChange: onCheck,
     checkboxMargin: checkboxMargin,
     extraStyles: "align-self: flex-start;",
-    "aria-labelledby": "".concat(id, "_label")
+    labelledById: TermsAndConditionsTitleDivId
   }), /*#__PURE__*/React.createElement(Stack, {
     childGap: "0.25rem",
     fullHeight: true
@@ -47959,7 +47931,8 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     justify: "flex-start",
     align: "center",
     nowrap: true,
-    extraStyles: "padding-right: 2px; > div > * { margin: 4px 2px; };"
+    extraStyles: "padding-right: 2px; > div > * { margin: 4px 2px; };",
+    id: TermsAndConditionsTitleDivId
   }, description && /*#__PURE__*/React.createElement(Text$1, {
     color: CHARADE_GREY
   }, description), terms && /*#__PURE__*/React.createElement(TermsAndConditionsModal$1, {
@@ -47968,8 +47941,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     isOpen: showTerms,
     toggleOpen: toggleTerms,
     linkVariant: modalVariant,
-    title: modalTitle,
-    initialFocusSelector: initialFocusSelector
+    title: modalTitle
   })), /*#__PURE__*/React.createElement("div", {
     "aria-live": "polite",
     "aria-atomic": true
@@ -48170,8 +48142,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent,
-    initialFocusSelector: ".modal-close-button"
+    terms: termsContent
   })))));
 };
 
@@ -48367,8 +48338,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent,
-    initialFocusSelector: ".modal-close-button"
+    terms: termsContent
   })))));
 };