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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.cjs.js +28 -11
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +28 -11
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/atoms/checkbox/Checkbox.js +4 -2
  7. package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV1.js +16 -3
  8. package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV2.js +26 -12
package/dist/index.esm.js CHANGED
@@ -22167,7 +22167,8 @@ var Checkbox = function Checkbox(_ref4) {
22167
22167
  background: themeValues.backgroundColor,
22168
22168
  extraStyles: "outline: none; ".concat(extraStyles, "; margin: ").concat(checkboxMargin, ";")
22169
22169
  }, /*#__PURE__*/React.createElement(CheckboxLabelContainer, {
22170
- "data-qa": dataQa
22170
+ "data-qa": dataQa,
22171
+ id: "".concat(id, "_label_container")
22171
22172
  }, /*#__PURE__*/React.createElement(CheckboxContainer, {
22172
22173
  "data-qa": "Checkbox"
22173
22174
  }, /*#__PURE__*/React.createElement(HiddenCheckbox, {
@@ -22192,7 +22193,7 @@ var Checkbox = function Checkbox(_ref4) {
22192
22193
  disabledStyles: themeValues.disabledStyles,
22193
22194
  disabledCheckedStyles: themeValues.disabledCheckedStyles,
22194
22195
  focusedStyles: themeValues.focusedStyles,
22195
- "aria-labelledby": "".concat(name, "_title_id")
22196
+ "aria-labelledby": title ? "".concat(name, "_title_id") : "".concat(id, "_label_container")
22196
22197
  }, /*#__PURE__*/React.createElement(CheckboxIcon, {
22197
22198
  viewBox: "0 0 24 24",
22198
22199
  disabled: disabled,
@@ -47854,7 +47855,13 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
47854
47855
  error = _ref$error === void 0 ? false : _ref$error,
47855
47856
  linkVariant = _ref.linkVariant,
47856
47857
  _ref$initialFocusSele = _ref.initialFocusSelector,
47857
- initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
47858
+ initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
47859
+ _ref$id = _ref.id,
47860
+ id = _ref$id === void 0 ? "terms-and-conditions" : _ref$id,
47861
+ _ref$screenReaderChec = _ref.screenReaderCheckboxLabel,
47862
+ screenReaderCheckboxLabel = _ref$screenReaderChec === void 0 ? "" : _ref$screenReaderChec,
47863
+ _ref$ariaLabelledBy = _ref.ariaLabelledBy,
47864
+ ariaLabelledBy = _ref$ariaLabelledBy === void 0 ? "" : _ref$ariaLabelledBy;
47858
47865
 
47859
47866
  var _useState = useState(false),
47860
47867
  _useState2 = _slicedToArray(_useState, 2),
@@ -47867,12 +47874,15 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
47867
47874
  error: error,
47868
47875
  checked: isChecked,
47869
47876
  onChange: onCheck,
47870
- "aria-labelledby": "".concat(id, "_label")
47877
+ "aria-labelledby": ariaLabelledBy || (screenReaderCheckboxLabel ? "".concat(id, "_sr_only_label") : "".concat(id, "_html_label"))
47871
47878
  }), /*#__PURE__*/React.createElement(Box, {
47872
47879
  padding: "0 0 0 58px"
47873
- }, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Box, {
47880
+ }, screenReaderCheckboxLabel && /*#__PURE__*/React.createElement("span", {
47881
+ className: "sr-only-text",
47882
+ id: "".concat(id, "_sr_only_label")
47883
+ }, screenReaderCheckboxLabel), /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Box, {
47874
47884
  padding: "0",
47875
- id: "".concat(id, "_label")
47885
+ id: "".concat(id, "_html_label")
47876
47886
  }, html), terms && /*#__PURE__*/React.createElement(TermsAndConditionsModal$1, {
47877
47887
  link: "Learn More",
47878
47888
  terms: terms,
@@ -47910,7 +47920,11 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
47910
47920
  _ref$modalTitle = _ref.modalTitle,
47911
47921
  modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle,
47912
47922
  _ref$initialFocusSele = _ref.initialFocusSelector,
47913
- initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
47923
+ initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
47924
+ _ref$screenReaderChec = _ref.screenReaderCheckboxLabel,
47925
+ screenReaderCheckboxLabel = _ref$screenReaderChec === void 0 ? "" : _ref$screenReaderChec,
47926
+ _ref$ariaLabelledBy = _ref.ariaLabelledBy,
47927
+ ariaLabelledBy = _ref$ariaLabelledBy === void 0 ? "" : _ref$ariaLabelledBy;
47914
47928
 
47915
47929
  var _useState = useState(false),
47916
47930
  _useState2 = _slicedToArray(_useState, 2),
@@ -47937,20 +47951,23 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
47937
47951
  childGap: "0"
47938
47952
  }, html && /*#__PURE__*/React.createElement(Box, {
47939
47953
  padding: "0",
47940
- id: "".concat(id, "_label")
47954
+ id: "".concat(id, "_html_label")
47941
47955
  }, html), /*#__PURE__*/React.createElement(Cluster, {
47942
47956
  justify: "flex-start",
47943
47957
  align: "center",
47944
47958
  nowrap: true
47945
- }, showCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
47959
+ }, showCheckbox && /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Checkbox$1, {
47946
47960
  name: id,
47947
47961
  error: hasError,
47948
47962
  checked: isChecked,
47949
47963
  onChange: onCheck,
47950
47964
  checkboxMargin: checkboxMargin,
47951
47965
  extraStyles: "align-self: flex-start;",
47952
- "aria-labelledby": "".concat(id, "_label")
47953
- }), /*#__PURE__*/React.createElement(Stack, {
47966
+ "aria-labelledby": ariaLabelledBy || (screenReaderCheckboxLabel ? "".concat(id, "_sr_only_label") : "".concat(id, "_html_label"))
47967
+ }), screenReaderCheckboxLabel && /*#__PURE__*/React.createElement("span", {
47968
+ className: "sr-only-text",
47969
+ id: "".concat(id, "_sr_only_label")
47970
+ }, screenReaderCheckboxLabel)), /*#__PURE__*/React.createElement(Stack, {
47954
47971
  childGap: "0.25rem",
47955
47972
  fullHeight: true
47956
47973
  }, /*#__PURE__*/React.createElement(Cluster, {