@thecb/components 9.2.10-beta.3 → 9.2.10-beta.5

package/dist/index.cjs.js

@@ -22146,7 +22146,9 @@ var Checkbox = function Checkbox(_ref4) {
       extraStyles = _ref4.extraStyles,
       textExtraStyles = _ref4.textExtraStyles,
       _ref4$dataQa = _ref4.dataQa,
-      dataQa = _ref4$dataQa === void 0 ? null : _ref4$dataQa;
+      dataQa = _ref4$dataQa === void 0 ? null : _ref4$dataQa,
+      _ref4$checkboxAriaLab = _ref4.checkboxAriaLabel,
+      checkboxAriaLabel = _ref4$checkboxAriaLab === void 0 ? "" : _ref4$checkboxAriaLab;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -22182,7 +22184,7 @@ var Checkbox = function Checkbox(_ref4) {
     id: "checkbox-".concat(name),
     disabled: disabled,
     name: name,
-    "aria-label": name,
+    "aria-label": checkboxAriaLabel || "".concat(title, " checkbox"),
     checked: checked,
     onChange: onChange,
     tabIndex: "-1",
@@ -22200,7 +22202,8 @@ var Checkbox = function Checkbox(_ref4) {
     errorStyles: themeValues.errorStyles,
     disabledStyles: themeValues.disabledStyles,
     disabledCheckedStyles: themeValues.disabledCheckedStyles,
-    focusedStyles: themeValues.focusedStyles
+    focusedStyles: themeValues.focusedStyles,
+    "aria-labelledby": "".concat(name, "_title_id")
   }, /*#__PURE__*/React__default.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
@@ -22212,6 +22215,7 @@ var Checkbox = function Checkbox(_ref4) {
     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)));
 };
@@ -47861,7 +47865,9 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
       error = _ref$error === void 0 ? false : _ref$error,
       linkVariant = _ref.linkVariant,
       _ref$initialFocusSele = _ref.initialFocusSelector,
-      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
+      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
+      _ref$checkboxAriaLabe = _ref.checkboxAriaLabel,
+      checkboxAriaLabel = _ref$checkboxAriaLabe === void 0 ? "" : _ref$checkboxAriaLabe;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47873,7 +47879,8 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
     title: "Terms and Conditions",
     error: error,
     checked: isChecked,
-    onChange: onCheck
+    onChange: onCheck,
+    "aria-label": checkboxAriaLabel
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 0 58px"
   }, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Box, {
@@ -47915,7 +47922,9 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
       _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;
+      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
+      _ref$checkboxAriaLabe = _ref.checkboxAriaLabel,
+      checkboxAriaLabel = _ref$checkboxAriaLabe === void 0 ? "" : _ref$checkboxAriaLabe;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47952,7 +47961,8 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     checked: isChecked,
     onChange: onCheck,
     checkboxMargin: checkboxMargin,
-    extraStyles: "align-self: flex-start;"
+    extraStyles: "align-self: flex-start;",
+    "aria-label": checkboxAriaLabel
   }), /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0.25rem",
     fullHeight: true