@thecb/components 9.0.3-beta.9 → 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",
@@ -48486,7 +48502,7 @@ var fallbackValues$Q = {
 
 */
 
-var computeSectionId = function computeSectionId(section) {
+var idString = function idString(section) {
   return typeof section.title === "string" ? createIdFromString(section.title) : section.id;
 };
 
@@ -48507,12 +48523,7 @@ var RadioSection = function RadioSection(_ref) {
       openHeight = _ref$openHeight === void 0 ? "auto" : _ref$openHeight,
       _ref$containerStyles = _ref.containerStyles,
       containerStyles = _ref$containerStyles === void 0 ? "" : _ref$containerStyles,
-      ariaDescribedBy = _ref.ariaDescribedBy,
-      _ref$rightContentRole = _ref.rightContentRole,
-      rightContentRole = _ref$rightContentRole === void 0 ? null : _ref$rightContentRole,
-      _ref$ariaLabel = _ref.ariaLabel,
-      _ref$rightIconsLabel = _ref.rightIconsLabel,
-      rightIconsLabel = _ref$rightIconsLabel === void 0 ? null : _ref$rightIconsLabel;
+      ariaDescribedBy = _ref.ariaDescribedBy;
 
   var handleKeyDown = function handleKeyDown(id, e) {
     if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13 || (e === null || e === void 0 ? void 0 : e.keyCode) === 32) {
@@ -48559,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",
@@ -48589,7 +48612,8 @@ var RadioSection = function RadioSection(_ref) {
       key: "item-".concat(section.id),
       extraStyles: borderStyles,
       role: "radio",
-      "aria-checked": openSection === section.id
+      "aria-checked": openSection === section.id,
+      "aria-disabled": section.disabled
     }, /*#__PURE__*/React__default.createElement(Stack, {
       childGap: "0"
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -48619,10 +48643,9 @@ var RadioSection = function RadioSection(_ref) {
     }, !section.hideRadioButton && /*#__PURE__*/React__default.createElement(Box, {
       padding: "0"
     }, /*#__PURE__*/React__default.createElement(RadioButton$2, {
-      id: computeSectionId(section),
-      name: computeSectionId(section),
+      id: "radio-input-".concat(idString(section)),
+      name: idString(section),
       ariaDescribedBy: ariaDescribedBy,
-      ariaLabelledBy: "radio-input-".concat(computeSectionId(section)),
       radioOn: openSection === section.id,
       radioFocused: focused === section.id,
       toggleRadio: section.disabled ? noop : function () {
@@ -48633,25 +48656,26 @@ 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",
-      color: CHARADE_GREY,
-      htmlFor: "radio-input-".concat(computeSectionId(section))
-    }, section.title))), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
-      childGap: "0.5rem"
-    }, /*#__PURE__*/React__default.createElement("div", rightIconsLabel !== null ? {
-      "aria-label": rightIconsLabel
-    } : {}, section.rightIcons.map(function (icon) {
-      return /*#__PURE__*/React__default.createElement(RightIcon, _extends({
+      htmlFor: "radio-input-".concat(idString(section)),
+      color: CHARADE_GREY
+    }, _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
+    }, section.rightIcons.map(function (icon) {
+      return /*#__PURE__*/React__default.createElement(RightIcon, {
         src: icon.img,
         key: icon.img,
         fade: !icon.enabled,
         isMobile: isMobile,
-        alt: icon.altText
-      }, rightContentRole !== null ? {
-        role: rightContentRole || "presentation"
-      } : {}));
-    }))), section.rightTitleContent && /*#__PURE__*/React__default.createElement(React.Fragment, null, section.rightTitleContent))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
+        alt: icon.altText,
+        "aria-disabled": !icon.enabled
+      });
+    })), section.rightTitleContent && /*#__PURE__*/React__default.createElement(React.Fragment, null, section.rightTitleContent))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
       initial: false
     }, openSection === section.id && /*#__PURE__*/React__default.createElement(Motion, {
       key: "content-".concat(section.id),