@thecb/components 9.2.10-beta.10 → 9.2.10-beta.12

package/dist/index.esm.js

@@ -22138,7 +22138,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 = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -22151,6 +22153,10 @@ var Checkbox = function Checkbox(_ref4) {
     }
   };
 
+  var checkboxProps = _objectSpread2({}, checkboxAriaLabel ? {
+    "aria-label": checkboxAriaLabel
+  } : {});
+
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     tabIndex: "0",
@@ -22167,23 +22173,26 @@ 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(name, "_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": checkboxAriaLabel || "".concat(title, " checkbox"),
     checked: checked,
     onChange: onChange,
     tabIndex: "-1",
     "aria-invalid": error,
     "aria-describedby": error ? "".concat(name, "-error-message") : ""
-  }), /*#__PURE__*/React.createElement(StyledCheckbox, {
+  }), /*#__PURE__*/React.createElement(StyledCheckbox, _extends({
     role: "checkbox",
+    name: name,
     error: error,
+    "aria-invalid": error,
     disabled: disabled,
+    "aria-disabled": disabled,
     checked: checked,
     "aria-checked": checked,
     focused: focused,
@@ -22192,9 +22201,8 @@ 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(name, "_label_container")
-  }, /*#__PURE__*/React.createElement(CheckboxIcon, {
+    focusedStyles: themeValues.focusedStyles
+  }, checkboxProps), /*#__PURE__*/React.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
     disabledCheckColor: themeValues.disabledCheckColor,
@@ -22205,7 +22213,6 @@ 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)));
 };
@@ -47856,12 +47863,8 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
       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;
+      _ref$checkboxAriaLabe = _ref.checkboxAriaLabel,
+      checkboxAriaLabel = _ref$checkboxAriaLabe === void 0 ? "" : _ref$checkboxAriaLabe;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47874,15 +47877,11 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
     error: error,
     checked: isChecked,
     onChange: onCheck,
-    "aria-labelledby": ariaLabelledBy || (screenReaderCheckboxLabel ? "".concat(id, "_sr_only_label") : "".concat(id, "_html_label"))
+    "aria-label": checkboxAriaLabel
   }), /*#__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,
@@ -47921,10 +47920,8 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
       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;
+      _ref$checkboxAriaLabe = _ref.checkboxAriaLabel,
+      checkboxAriaLabel = _ref$checkboxAriaLabe === void 0 ? "" : _ref$checkboxAriaLabe;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47950,24 +47947,20 @@ 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, {
+    checkboxAriaLabel: checkboxAriaLabel
+  }), /*#__PURE__*/React.createElement(Stack, {
     childGap: "0.25rem",
     fullHeight: true
   }, /*#__PURE__*/React.createElement(Cluster, {