@thecb/components 9.2.10-beta.9 → 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",
@@ -22167,14 +22171,15 @@ var Checkbox = function Checkbox(_ref4) {
     background: themeValues.backgroundColor,
     extraStyles: "outline: none; ".concat(extraStyles, "; margin: ").concat(checkboxMargin, ";")
   }, /*#__PURE__*/React.createElement(CheckboxLabelContainer, {
-    "data-qa": dataQa,
-    id: "".concat(id, "_label_container")
+    "data-qa": dataQa
   }, /*#__PURE__*/React.createElement(CheckboxContainer, {
     "data-qa": "Checkbox"
   }, /*#__PURE__*/React.createElement(HiddenCheckbox, {
     id: "checkbox-".concat(name),
     disabled: disabled,
     name: name,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledById,
     checked: checked,
     onChange: onChange,
     tabIndex: "-1",
@@ -22192,8 +22197,7 @@ var Checkbox = function Checkbox(_ref4) {
     errorStyles: themeValues.errorStyles,
     disabledStyles: themeValues.disabledStyles,
     disabledCheckedStyles: themeValues.disabledCheckedStyles,
-    focusedStyles: themeValues.focusedStyles,
-    "aria-labelledby": title ? "".concat(name, "_title_id") : "".concat(id, "_label_container")
+    focusedStyles: themeValues.focusedStyles
   }, /*#__PURE__*/React.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
@@ -22202,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)));
 };
@@ -22709,12 +22713,12 @@ var hasOwnProperty_1 = Object.hasOwn || function hasOwn(it, key) {
   return hasOwnProperty(toObject(it), key);
 };
 
-var id$1 = 0;
+var id = 0;
 var postfix = Math.random();
 var toString$3 = functionUncurryThis(1.0.toString);
 
 var uid = function (key) {
-  return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$3(++id$1 + postfix, 36);
+  return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$3(++id + postfix, 36);
 };
 
 var WellKnownSymbolsStore = shared('wks');
@@ -45759,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;
@@ -45788,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",
@@ -45839,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"
@@ -45853,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",
@@ -45866,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,
@@ -45877,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, {
@@ -45888,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);
 };
 
@@ -47722,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() {
@@ -47736,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));
 };
 
@@ -47795,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() {
@@ -47823,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() {
@@ -47837,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));
 };
 
@@ -47853,15 +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,
-      _ref$screenReaderChec = _ref.screenReaderCheckboxLabel,
-      screenReaderCheckboxLabel = _ref$screenReaderChec === void 0 ? "" : _ref$screenReaderChec,
-      _ref$ariaLabelledBy = _ref.ariaLabelledBy,
-      ariaLabelledBy = _ref$ariaLabelledBy === void 0 ? "" : _ref$ariaLabelledBy;
+      linkVariant = _ref.linkVariant;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47873,26 +47844,22 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
     title: "Terms and Conditions",
     error: error,
     checked: isChecked,
-    onChange: onCheck,
-    "aria-labelledby": ariaLabelledBy || (screenReaderCheckboxLabel ? "".concat(id, "_sr_only_label") : "".concat(id, "_html_label"))
+    onChange: onCheck
   }), /*#__PURE__*/React.createElement(Box, {
     padding: "0 0 0 58px"
-  }, screenReaderCheckboxLabel && /*#__PURE__*/React.createElement("span", {
-    className: "sr-only-text",
-    id: "".concat(id, "_sr_only_label")
-  }, screenReaderCheckboxLabel), /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Box, {
-    padding: "0",
-    id: "".concat(id, "_html_label")
+  }, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Box, {
+    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,
@@ -47918,13 +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,
-      _ref$screenReaderChec = _ref.screenReaderCheckboxLabel,
-      screenReaderCheckboxLabel = _ref$screenReaderChec === void 0 ? "" : _ref$screenReaderChec,
-      _ref$ariaLabelledBy = _ref.ariaLabelledBy,
-      ariaLabelledBy = _ref$ariaLabelledBy === void 0 ? "" : _ref$ariaLabelledBy;
+      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47950,31 +47911,28 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "0"
   }, html && /*#__PURE__*/React.createElement(Box, {
-    padding: "0",
-    id: "".concat(id, "_html_label")
+    padding: "0"
   }, html), /*#__PURE__*/React.createElement(Cluster, {
     justify: "flex-start",
     align: "center",
     nowrap: true
-  }, showCheckbox && /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Checkbox$1, {
+  }, showCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
     name: id,
     error: hasError,
     checked: isChecked,
     onChange: onCheck,
     checkboxMargin: checkboxMargin,
     extraStyles: "align-self: flex-start;",
-    "aria-labelledby": ariaLabelledBy || (screenReaderCheckboxLabel ? "".concat(id, "_sr_only_label") : "".concat(id, "_html_label"))
-  }), screenReaderCheckboxLabel && /*#__PURE__*/React.createElement("span", {
-    className: "sr-only-text",
-    id: "".concat(id, "_sr_only_label")
-  }, screenReaderCheckboxLabel)), /*#__PURE__*/React.createElement(Stack, {
+    labelledById: TermsAndConditionsTitleDivId
+  }), /*#__PURE__*/React.createElement(Stack, {
     childGap: "0.25rem",
     fullHeight: true
   }, /*#__PURE__*/React.createElement(Cluster, {
     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, {
@@ -47983,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
@@ -48185,8 +48142,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent,
-    initialFocusSelector: ".modal-close-button"
+    terms: termsContent
   })))));
 };
 
@@ -48382,8 +48338,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent,
-    initialFocusSelector: ".modal-close-button"
+    terms: termsContent
   })))));
 };