@thecb/components 12.1.0-beta.6 → 12.1.0-beta.8

package/dist/index.esm.js

@@ -22234,8 +22234,9 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
   var normalizedName = name ? name.replace(/\s+/g, "-") : name;
   var checkboxId = "checkbox-".concat(normalizedName);
   var titleId = title ? "checkboxlabel-".concat(normalizedName) : undefined;
-  // aria-label fallback when no visible title or external labelledById is provided
-  var ariaLabel = !labelledById && !title ? name : undefined;
+  // aria-label: customAriaLabel wins, but only when no external labelledById is provided
+  // (aria-labelledby takes precedence per spec, so aria-label would be silently ignored)
+  var resolvedAriaLabel = labelledById ? undefined : customAriaLabel || (!title ? name : undefined);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     ref: ref,
     padding: "0",
@@ -22256,7 +22257,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
     tabIndex: "0",
     required: isRequired,
     "aria-invalid": error,
-    "aria-label": customAriaLabel || ariaLabel,
+    "aria-label": resolvedAriaLabel,
     "aria-labelledby": labelledById,
     "aria-describedby": error ? "".concat(name, "-error-message") : undefined,
     onKeyDown: function onKeyDown(e) {
@@ -44849,7 +44850,10 @@ var Modal$1 = function Modal(_ref) {
     _ref$initialFocusSele = _ref.initialFocusSelector,
     initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
     _ref$blurUnderlay = _ref.blurUnderlay,
-    blurUnderlay = _ref$blurUnderlay === void 0 ? true : _ref$blurUnderlay;
+    blurUnderlay = _ref$blurUnderlay === void 0 ? true : _ref$blurUnderlay,
+    _ref$controlLabel = _ref.controlLabel,
+    controlLabel = _ref$controlLabel === void 0 ? "" : _ref$controlLabel,
+    _ref$controlExtraStyl = _ref.controlExtraStyles;
   var _useContext = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
 
@@ -44869,7 +44873,11 @@ var Modal$1 = function Modal(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     ref: modalContainerRef,
     tabIndex: "-1",
-    "data-qa": dataQa
+    "data-qa": dataQa,
+    style: {
+      display: "inline"
+    },
+    "aria-label": controlLabel
   }, modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal, {
     focusTrapOptions: {
       // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
@@ -48102,7 +48110,12 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     linkVariant = _ref$linkVariant === void 0 ? "p" : _ref$linkVariant,
     themeValues = _ref.themeValues,
     _ref$initialFocusSele = _ref.initialFocusSelector,
-    initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
+    initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
+    _ref$linkExtraStyles = _ref.linkExtraStyles,
+    linkExtraStyles = _ref$linkExtraStyles === void 0 ? "" : _ref$linkExtraStyles,
+    modalControlLabel = _ref.modalControlLabel,
+    _ref$modalControlExtr = _ref.modalControlExtraStyles,
+    modalControlExtraStyles = _ref$modalControlExtr === void 0 ? "" : _ref$modalControlExtr;
   return /*#__PURE__*/React__default.createElement(Modal$3, {
     modalOpen: isOpen,
     hideModal: function hideModal() {
@@ -48129,7 +48142,9 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
       toggleAccepted(true);
       toggleOpen(false);
     },
-    initialFocusSelector: initialFocusSelector
+    initialFocusSelector: initialFocusSelector,
+    controlLabel: modalControlLabel,
+    controlExtraStyles: modalControlExtraStyles
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: linkVariant,
     onClick: function onClick() {
@@ -48143,7 +48158,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
     textDecoration: themeValues.modalLinkTextDecoration,
-    extraStyles: "display: inline-block; width: fit-content; cursor: pointer; min-height: 24px; line-height: 24px;",
+    extraStyles: "display: inline-block; width: fit-content; cursor: pointer; min-height: 24px; line-height: 24px; ".concat(linkExtraStyles),
     role: "button" // This should always be a "button" since it opens a modal
     ,
     className: "modal-trigger"
@@ -48455,16 +48470,22 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     name: "bank checkbox",
     dataQa: "Save checking account to wallet",
     customAriaLabel: "Save checking account to wallet (optional).",
-    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Save checking account to wallet (optional).", " ", showTerms && /*#__PURE__*/React__default.createElement("span", {
+    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", null, "Save checking account to wallet (optional). "), showTerms && /*#__PURE__*/React__default.createElement("span", {
       onClick: function onClick(e) {
         return e.stopPropagation();
+      },
+      style: {
+        display: "inline"
       }
     }, "View", " ", /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
       link: "Terms and Conditions",
       terms: termsContent,
       isOpen: showTermsModal,
       toggleOpen: toggleTermsModal,
-      initialFocusSelector: ".modal-close-button"
+      initialFocusSelector: ".modal-close-button",
+      linkExtraStyles: "display: inline;",
+      modalControlLabel: "View Terms and Conditions",
+      modalControlExtraStyles: "display: inline;"
     }))),
     checked: walletCheckboxMarked,
     onChange: saveToWallet
@@ -48660,16 +48681,22 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     name: "credit card checkbox",
     dataQa: "Save credit card to wallet",
     customAriaLabel: "Save credit card to wallet (optional).",
-    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Save credit card to wallet (optional).", " ", showTerms && /*#__PURE__*/React__default.createElement("span", {
+    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", null, "Save credit card to wallet (optional). "), showTerms && /*#__PURE__*/React__default.createElement("span", {
       onClick: function onClick(e) {
         return e.stopPropagation();
+      },
+      style: {
+        display: "inline-block"
       }
     }, "View", " ", /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
       link: "Terms and Conditions",
       terms: termsContent,
       isOpen: showTermsModal,
       toggleOpen: toggleTermsModal,
-      initialFocusSelector: ".modal-close-button"
+      initialFocusSelector: ".modal-close-button",
+      linkExtraStyles: "display: inline;",
+      modalControlLabel: "View Terms and Conditions",
+      modalControlExtraStyles: "display: inline;"
     }))),
     checked: walletCheckboxMarked,
     onChange: saveToWallet