@thecb/components 9.2.10-beta.7 → 9.2.10-beta.9

package/dist/index.cjs.js

@@ -22175,7 +22175,8 @@ var Checkbox = function Checkbox(_ref4) {
     background: themeValues.backgroundColor,
     extraStyles: "outline: none; ".concat(extraStyles, "; margin: ").concat(checkboxMargin, ";")
   }, /*#__PURE__*/React__default.createElement(CheckboxLabelContainer, {
-    "data-qa": dataQa
+    "data-qa": dataQa,
+    id: "".concat(id, "_label_container")
   }, /*#__PURE__*/React__default.createElement(CheckboxContainer, {
     "data-qa": "Checkbox"
   }, /*#__PURE__*/React__default.createElement(HiddenCheckbox, {
@@ -22200,7 +22201,7 @@ var Checkbox = function Checkbox(_ref4) {
     disabledStyles: themeValues.disabledStyles,
     disabledCheckedStyles: themeValues.disabledCheckedStyles,
     focusedStyles: themeValues.focusedStyles,
-    "aria-labelledby": "".concat(name, "_title_id")
+    "aria-labelledby": title ? "".concat(name, "_title_id") : "".concat(id, "_label_container")
   }, /*#__PURE__*/React__default.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
@@ -47862,7 +47863,13 @@ 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$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;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47875,12 +47882,15 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
     error: error,
     checked: isChecked,
     onChange: onCheck,
-    "aria-labelledby": "".concat(id, "_label")
+    "aria-labelledby": ariaLabelledBy || (screenReaderCheckboxLabel ? "".concat(id, "_sr_only_label") : "".concat(id, "_html_label"))
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 0 58px"
-  }, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Box, {
+  }, screenReaderCheckboxLabel && /*#__PURE__*/React__default.createElement("span", {
+    className: "sr-only-text",
+    id: "".concat(id, "_sr_only_label")
+  }, screenReaderCheckboxLabel), /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    id: "".concat(id, "_label")
+    id: "".concat(id, "_html_label")
   }, html), terms && /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
     link: "Learn More",
     terms: terms,
@@ -47918,7 +47928,11 @@ 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$screenReaderChec = _ref.screenReaderCheckboxLabel,
+      screenReaderCheckboxLabel = _ref$screenReaderChec === void 0 ? "" : _ref$screenReaderChec,
+      _ref$ariaLabelledBy = _ref.ariaLabelledBy,
+      ariaLabelledBy = _ref$ariaLabelledBy === void 0 ? "" : _ref$ariaLabelledBy;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47945,20 +47959,23 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     childGap: "0"
   }, html && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    id: "".concat(id, "_label")
+    id: "".concat(id, "_html_label")
   }, html), /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center",
     nowrap: true
-  }, showCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  }, showCheckbox && /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: id,
     error: hasError,
     checked: isChecked,
     onChange: onCheck,
     checkboxMargin: checkboxMargin,
     extraStyles: "align-self: flex-start;",
-    "aria-labelledby": "".concat(id, "_label")
-  }), /*#__PURE__*/React__default.createElement(Stack, {
+    "aria-labelledby": ariaLabelledBy || (screenReaderCheckboxLabel ? "".concat(id, "_sr_only_label") : "".concat(id, "_html_label"))
+  }), screenReaderCheckboxLabel && /*#__PURE__*/React__default.createElement("span", {
+    className: "sr-only-text",
+    id: "".concat(id, "_sr_only_label")
+  }, screenReaderCheckboxLabel)), /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0.25rem",
     fullHeight: true
   }, /*#__PURE__*/React__default.createElement(Cluster, {