@thecb/components 9.2.10-beta.14 → 9.2.10-beta.16

package/dist/index.cjs.js

@@ -22107,7 +22107,7 @@ var HiddenCheckbox = styled__default.input.attrs({
 }).withConfig({
   displayName: "Checkbox__HiddenCheckbox",
   componentId: "sc-36kqbv-3"
-})(["border:0;clip:rect(0 0 0 0);clippath:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;"]);
+})(["border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;"]);
 var StyledCheckbox = styled__default.div.withConfig({
   displayName: "Checkbox__StyledCheckbox",
   componentId: "sc-36kqbv-4"
@@ -22184,14 +22184,16 @@ var Checkbox = function Checkbox(_ref4) {
     id: "checkbox-".concat(name),
     disabled: disabled,
     name: name,
-    "aria-label": checkboxAriaLabel || "".concat(title, " checkbox"),
     checked: checked,
     onChange: onChange,
     tabIndex: "-1",
     "aria-invalid": error,
-    "aria-describedby": error ? "".concat(name, "-error-message") : ""
+    "aria-describedby": error ? "".concat(name, "-error-message") : "",
+    "aria-hidden": true
   }), /*#__PURE__*/React__default.createElement(StyledCheckbox, {
     role: "checkbox",
+    "aria-invalid": error,
+    "aria-describedby": error ? "".concat(name, "-error-message") : "",
     error: error,
     disabled: disabled,
     checked: checked,
@@ -22203,7 +22205,7 @@ var Checkbox = function Checkbox(_ref4) {
     disabledStyles: themeValues.disabledStyles,
     disabledCheckedStyles: themeValues.disabledCheckedStyles,
     focusedStyles: themeValues.focusedStyles,
-    "aria-label": checkboxAriaLabel || "".concat(title, " checkbox")
+    "aria-label": checkboxAriaLabel
   }, /*#__PURE__*/React__default.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
@@ -47879,7 +47881,7 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
     error: error,
     checked: isChecked,
     onChange: onCheck,
-    "aria-label": checkboxAriaLabel
+    checkboxAriaLabel: checkboxAriaLabel
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 0 58px"
   }, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Box, {
@@ -47961,7 +47963,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     onChange: onCheck,
     checkboxMargin: checkboxMargin,
     extraStyles: "align-self: flex-start;",
-    "aria-label": checkboxAriaLabel
+    checkboxAriaLabel: checkboxAriaLabel
   }), /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0.25rem",
     fullHeight: true
@@ -48370,7 +48372,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     dataQa: "Save credit card to wallet",
     title: "Save credit card to wallet.",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet
+    onChange: saveToWallet,
+    checkboxAriaLabel: "Save credit card to wallet."
   }), showTerms && /*#__PURE__*/React__default.createElement(Cover, {
     singleChild: true
   }, /*#__PURE__*/React__default.createElement(TermsAndConditions, {
@@ -48378,7 +48381,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     showCheckbox: false,
     description: "View",
     terms: termsContent,
-    initialFocusSelector: ".modal-close-button"
+    initialFocusSelector: ".modal-close-button",
+    checkboxAriaLabel: "I agree to the Terms and Conditions"
   })))));
 };