@thecb/components 9.2.10-beta.1 → 9.2.10-beta.11

package/dist/index.esm.js

@@ -22099,7 +22099,7 @@ var HiddenCheckbox = styled.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.div.withConfig({
   displayName: "Checkbox__StyledCheckbox",
   componentId: "sc-36kqbv-4"
@@ -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",
@@ -22174,16 +22180,19 @@ 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",
     "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,
@@ -22193,7 +22202,7 @@ var Checkbox = function Checkbox(_ref4) {
     disabledStyles: themeValues.disabledStyles,
     disabledCheckedStyles: themeValues.disabledCheckedStyles,
     focusedStyles: themeValues.focusedStyles
-  }, /*#__PURE__*/React.createElement(CheckboxIcon, {
+  }, checkboxProps), /*#__PURE__*/React.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
     disabledCheckColor: themeValues.disabledCheckColor,
@@ -45759,9 +45768,7 @@ var Modal$1 = function Modal(_ref) {
       _ref$dataQa = _ref.dataQa,
       dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
       _ref$initialFocusSele = _ref.initialFocusSelector,
-      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
-      _ref$modalName = _ref.modalName,
-      modalName = _ref$modalName === void 0 ? "" : _ref$modalName;
+      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
 
   var _useContext = useContext(ThemeContext),
       isMobile = _useContext.isMobile;
@@ -45790,8 +45797,9 @@ var Modal$1 = function Modal(_ref) {
     },
     underlayClickExits: underlayClickExits,
     "aria-modal": true,
-    "aria-name": !!modalName.length ? modalName : modalHeaderText,
-    initialFocus: initialFocusSelector
+    initialFocus: initialFocusSelector,
+    focusDialog: !initialFocusSelector // Focus the dialogue box itself if no selector for initial focus was provided
+
   }, /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     borderRadius: "2px",
@@ -47721,7 +47729,8 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     continueAction: function continueAction() {
       toggleAccepted(true);
       toggleOpen(false);
-    }
+    },
+    initialFocusSelector: "[name='Close']"
   }, /*#__PURE__*/React.createElement(Text$1, {
     variant: "pS",
     onClick: function onClick() {
@@ -47853,7 +47862,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 = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47865,7 +47876,8 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
     title: "Terms and Conditions",
     error: error,
     checked: isChecked,
-    onChange: onCheck
+    onChange: onCheck,
+    "aria-label": checkboxAriaLabel
   }), /*#__PURE__*/React.createElement(Box, {
     padding: "0 0 0 58px"
   }, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Box, {
@@ -47907,7 +47919,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 = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47944,7 +47958,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.createElement(Stack, {
     childGap: "0.25rem",
     fullHeight: true
@@ -47981,9 +47996,7 @@ var TermsAndConditions = function TermsAndConditions(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded$y);
 
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
-  return /*#__PURE__*/React.createElement(TermsAndConditionsControl, _extends({
-    initialFocusSelector: "[role='button']:not(.modal-trigger)"
-  }, rest));
+  return /*#__PURE__*/React.createElement(TermsAndConditionsControl, rest);
 };
 
 var PaymentFormACH = function PaymentFormACH(_ref) {
@@ -48165,7 +48178,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent
+    terms: termsContent,
+    initialFocusSelector: ".modal-close-button"
   })))));
 };
 
@@ -48361,7 +48375,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent
+    terms: termsContent,
+    initialFocusSelector: ".modal-close-button"
   })))));
 };