@thecb/components 9.0.3 → 9.0.4-beta.1

package/dist/index.cjs.js

@@ -47859,6 +47859,13 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
 
   var accountTypeErrors = _defineProperty({}, required.error, "Account type is required");
 
+  React.useEffect(function () {
+    var firstFocusableField = document.getElementById("first-focusable-ach-input");
+
+    if (firstFocusableField) {
+      firstFocusableField.focus();
+    }
+  }, []);
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
@@ -47873,7 +47880,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "name"
+    autocompleteValue: "name",
+    id: "first-focusable-ach-input"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Routing number",
     dataQa: "Routing number",
@@ -48058,13 +48066,20 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
 
   var nameOnCardErrors = _defineProperty({}, required.error, "Name is required");
 
-  var creditCardNumberErrors = (_creditCardNumberErro = {}, _defineProperty(_creditCardNumberErro, required.error, "Credit card number is required"), _defineProperty(_creditCardNumberErro, hasLength.error, "Credit card number is invalid"), _defineProperty(_creditCardNumberErro, matchesRegex.error, "".concat(displayCardBrand(fields.creditCardNumber.rawValue), " is not accepted")), _creditCardNumberErro);
+  var creditCardNumberErrors = (_creditCardNumberErro = {}, _defineProperty(_creditCardNumberErro, required.error, "Credit card number is required"), _defineProperty(_creditCardNumberErro, hasLength.error, "Credit card number is invalid"), _defineProperty(_creditCardNumberErro, matchesRegex.error, "".concat(displayCardBrand(fields.creditCardNumber.rawValue), " is not accepted.")), _creditCardNumberErro);
   var expirationDateErrors = (_expirationDateErrors = {}, _defineProperty(_expirationDateErrors, required.error, "Expiration date is required"), _defineProperty(_expirationDateErrors, hasLength.error, "Expiration date is invalid"), _defineProperty(_expirationDateErrors, isValidMonth.error, "Expiration month is invalid"), _defineProperty(_expirationDateErrors, dateAfterToday.error, "Expiration date is invalid"), _expirationDateErrors);
   var cvvErrors = (_cvvErrors = {}, _defineProperty(_cvvErrors, required.error, "CVV is required"), _defineProperty(_cvvErrors, hasLength.error, "CVV is invalid"), _cvvErrors);
   var zipCodeErrors = (_zipCodeErrors = {}, _defineProperty(_zipCodeErrors, required.error, "Zip code is required"), _defineProperty(_zipCodeErrors, hasLength.error, "Zip code is invalid"), _zipCodeErrors);
 
   var countryErrorMessages = _defineProperty({}, required.error, "Country is required");
 
+  React.useEffect(function () {
+    var firstFocusableField = document.getElementById("first-focusable-card-input");
+
+    if (firstFocusableField) {
+      firstFocusableField.focus();
+    }
+  }, []);
   var isUS = fields.country.rawValue === "US";
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
@@ -48094,7 +48109,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "cc-name"
+    autocompleteValue: "cc-name",
+    id: "first-focusable-card-input"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Credit card number",
     dataQa: "Credit card number",
@@ -48554,7 +48570,19 @@ var RadioSection = function RadioSection(_ref) {
   var _useState = React.useState(null),
       _useState2 = _slicedToArray(_useState, 2),
       focused = _useState2[0],
-      setFocused = _useState2[1];
+      setFocused = _useState2[1]; // useEffect(() => {
+  //   if (toggledContentRef && toggledContentRef?.current) {
+  //     const inputEl = toggledContentRef.current?.querySelector(
+  //       `[tabindex="0"]`
+  //     );
+  //     if (inputEl) {
+  //       inputEl?.focus();
+  //     } else {
+  //       toggledContentRef.current.focus();
+  //     }
+  //   }
+  // }, [toggledContentRef.current]);
+
 
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "1px",
@@ -48628,11 +48656,13 @@ var RadioSection = function RadioSection(_ref) {
       align: "center"
     }, section.titleIcon), /*#__PURE__*/React__default.createElement(Box, {
       padding: section.titleIcon ? "0 0 0 8px" : "0"
-    }, /*#__PURE__*/React__default.createElement(Text$1, {
+    }, /*#__PURE__*/React__default.createElement(Text$1, _extends({
       as: "label",
       htmlFor: "radio-input-".concat(idString(section)),
       color: CHARADE_GREY
-    }, section.title))), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
+    }, _objectSpread2({}, section !== null && section !== void 0 && section.titleLabel ? {
+      "aria-label": section.titleLabel
+    } : {})), section.title))), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
       childGap: "0.5rem",
       "aria-label": (section === null || section === void 0 ? void 0 : section.rightIconsLabel) || null,
       role: (section === null || section === void 0 ? void 0 : section.rightIconsRole) || null