@thecb/components 9.2.4-beta.10 → 9.2.4-beta.2

package/dist/index.cjs.js

@@ -22134,7 +22134,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$isRequired = _ref4.isRequired,
+      isRequired = _ref4$isRequired === void 0 ? false : _ref4$isRequired;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -22188,7 +22190,8 @@ var Checkbox = function Checkbox(_ref4) {
     errorStyles: themeValues.errorStyles,
     disabledStyles: themeValues.disabledStyles,
     disabledCheckedStyles: themeValues.disabledCheckedStyles,
-    focusedStyles: themeValues.focusedStyles
+    focusedStyles: themeValues.focusedStyles,
+    "aria-required": isRequired
   }, /*#__PURE__*/React__default.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
@@ -23799,7 +23802,11 @@ var Dropdown = function Dropdown(_ref13) {
       _ref13$smoothScroll = _ref13.smoothScroll,
       smoothScroll = _ref13$smoothScroll === void 0 ? true : _ref13$smoothScroll,
       _ref13$ariaInvalid = _ref13.ariaInvalid,
-      ariaInvalid = _ref13$ariaInvalid === void 0 ? false : _ref13$ariaInvalid;
+      ariaInvalid = _ref13$ariaInvalid === void 0 ? false : _ref13$ariaInvalid,
+      _ref13$isRequired = _ref13.isRequired,
+      isRequired = _ref13$isRequired === void 0 ? false : _ref13$isRequired;
+
+  var required = options.required || isRequired;
 
   var _useState = React.useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24048,7 +24055,7 @@ var Dropdown = function Dropdown(_ref13) {
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby,
     "aria-expanded": isOpen,
-    "aria-required": options.required,
+    "aria-required": required,
     "aria-invalid": ariaInvalid,
     background: isOpen ? themeValues.hoverColor : WHITE,
     borderRadius: "2px",
@@ -24070,7 +24077,6 @@ var Dropdown = function Dropdown(_ref13) {
     },
     padding: "12px",
     placeholder: getSelection(),
-    required: options.required,
     role: "combobox",
     themeValues: themeValues,
     title: hasTitles ? getSelection() : null,
@@ -24078,6 +24084,9 @@ var Dropdown = function Dropdown(_ref13) {
     tabIndex: 0,
     value: inputValue,
     width: "100%"
+    /* Non-semantic elements need the aria-* version of the attribute */
+    ,
+    "aria-disabled": disabledValues.includes(inputValue)
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
     open: isOpen,
     onClick: _onClick
@@ -24088,7 +24097,8 @@ var Dropdown = function Dropdown(_ref13) {
     widthFitOptions: widthFitOptions,
     tabIndex: 0,
     role: "listbox",
-    id: "".concat(ariaLabelledby, "_listbox")
+    id: "".concat(ariaLabelledby, "_listbox"),
+    required: required
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0",
     as: "ul"
@@ -24238,7 +24248,9 @@ var FormSelect = function FormSelect(_ref) {
       _ref$dataQa = _ref.dataQa,
       dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
       _ref$widthFitOptions = _ref.widthFitOptions,
-      widthFitOptions = _ref$widthFitOptions === void 0 ? false : _ref$widthFitOptions;
+      widthFitOptions = _ref$widthFitOptions === void 0 ? false : _ref$widthFitOptions,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24246,6 +24258,17 @@ var FormSelect = function FormSelect(_ref) {
       setOpen = _useState2[1];
 
   var dropdownRef = React.useRef(null);
+  var required = (options === null || options === void 0 ? void 0 : options.required) || isRequired;
+  var labelId = React.useMemo(function () {
+    return function (labelTextWhenNoError) {
+      return createIdFromString(labelTextWhenNoError);
+    };
+  }, [labelTextWhenNoError]);
+  var descriptionId = React.useMemo(function () {
+    return function (field, labelTextWhenNoError) {
+      return field.hasErrors && field.dirty ? labelId(labelTextWhenNoError) + "error-message" : "";
+    };
+  }, [field, labelTextWhenNoError]);
 
   var handleClickAway = function handleClickAway(event) {
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -24261,8 +24284,8 @@ var FormSelect = function FormSelect(_ref) {
   });
   return /*#__PURE__*/React__default.createElement(SelectContainer, {
     ref: dropdownRef,
+    "aria-role": "group",
     disabled: disabled,
-    "aria-disabled": disabled,
     "data-qa": dataQa
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -24276,10 +24299,10 @@ var FormSelect = function FormSelect(_ref) {
     color: themeValues.labelColor,
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
-    id: createIdFromString(labelTextWhenNoError)
+    id: labelId(labelTextWhenNoError)
   }, labelTextWhenNoError))), /*#__PURE__*/React__default.createElement(Dropdown$1, {
-    ariaLabelledby: createIdFromString(labelTextWhenNoError),
-    ariaDescribedby: createIdFromString(labelTextWhenNoError, "error message"),
+    ariaLabelledby: labelId(labelTextWhenNoError),
+    ariaDescribedby: descriptionId(field, labelTextWhenNoError),
     maxHeight: dropdownMaxHeight,
     widthFitOptions: widthFitOptions,
     hasTitles: hasTitles,
@@ -24300,7 +24323,8 @@ var FormSelect = function FormSelect(_ref) {
     },
     disabled: disabled,
     autocompleteValue: autocompleteValue,
-    smoothScroll: smoothScroll
+    smoothScroll: smoothScroll,
+    isRequired: required
   }), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between"
@@ -25072,7 +25096,9 @@ var CountryDropdown = function CountryDropdown(_ref) {
       showErrors = _ref.showErrors,
       onChange = _ref.onChange,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
   return /*#__PURE__*/React__default.createElement(FormSelect$1, {
     options: options,
     field: field,
@@ -25082,7 +25108,8 @@ var CountryDropdown = function CountryDropdown(_ref) {
     errorMessages: errorMessages,
     showErrors: showErrors,
     onChange: onChange,
-    autocompleteValue: "country-name"
+    autocompleteValue: "country-name",
+    isRequired: isRequired
   });
 };
 
@@ -25929,7 +25956,7 @@ var fallbackValues$k = {
 };
 
 var _excluded$p = ["showErrors", "themeValues"],
-    _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa"];
+    _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired"];
 var InputField = styled__default.input.withConfig({
   displayName: "FormInput__InputField",
   componentId: "sc-l094r1-0"
@@ -26016,6 +26043,8 @@ var FormInput = function FormInput(_ref15) {
       removeFromValue = _ref15.removeFromValue,
       _ref15$dataQa = _ref15.dataQa,
       dataQa = _ref15$dataQa === void 0 ? null : _ref15$dataQa,
+      _ref15$isRequired = _ref15.isRequired,
+      isRequired = _ref15$isRequired === void 0 ? false : _ref15$isRequired,
       props = _objectWithoutProperties(_ref15, _excluded2);
 
   var _useState = React.useState(false),
@@ -26102,7 +26131,8 @@ var FormInput = function FormInput(_ref15) {
     $customHeight: customHeight,
     $extraStyles: extraStyles,
     "data-qa": dataQa || labelTextWhenNoError,
-    autoComplete: autocompleteValue
+    autoComplete: autocompleteValue,
+    required: isRequired
   }, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
     "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
@@ -26121,7 +26151,8 @@ var FormInput = function FormInput(_ref15) {
     $customHeight: customHeight,
     $extraStyles: extraStyles,
     "data-qa": dataQa || labelTextWhenNoError,
-    autoComplete: autocompleteValue
+    autoComplete: autocompleteValue,
+    required: isRequired
   }, props))), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between",
@@ -27254,7 +27285,7 @@ var HiddenRadioInput = styled__default.input.withConfig({
 var Circle = styled__default.div.withConfig({
   displayName: "RadioButtonWithLabel__Circle",
   componentId: "sc-1m9whwg-1"
-})(["flex-shrink:0;margin-right:8px;width:1.5rem;height 1.5rem;border:", ";border-radius:50%;box-sizing:border-box;padding:2px;:after{content:\"\";width:100%;height:100%;display:block;background:", ";border-radius:50%;transform:scale(0);}"], function (_ref) {
+})(["flex-shrink:0;margin-right:8px;width:1.5rem;height:1.5rem;border:", ";border-radius:50%;box-sizing:border-box;padding:2px;:after{content:\"\";width:100%;height:100%;display:block;background:", ";border-radius:50%;transform:scale(0);}"], function (_ref) {
   var inactiveBorderColor = _ref.inactiveBorderColor;
   return "1px solid ".concat(inactiveBorderColor);
 }, function (_ref2) {
@@ -27264,12 +27295,12 @@ var Circle = styled__default.div.withConfig({
 var InputAndLabelContainer = styled__default(Cluster).withConfig({
   displayName: "RadioButtonWithLabel__InputAndLabelContainer",
   componentId: "sc-1m9whwg-2"
-})(["overflow:visible;", ":checked + label ", ":after{transform:scale(0.85);transition:transform 0.15s;}", ":checked + label ", "{border:", "}", ":focus + label ", "{{box-shadow:", "}"], HiddenRadioInput, Circle, HiddenRadioInput, Circle, function (_ref3) {
+})(["overflow:visible;", ":checked + label ", ":after{transform:scale(0.85);transition:transform 0.15s;}", ":checked + label ", "{border:", ";}", ":focus + label ", "{box-shadow:", ";}"], HiddenRadioInput, Circle, HiddenRadioInput, Circle, function (_ref3) {
   var activeColor = _ref3.activeColor;
-  return "1px solid ".concat(activeColor, ";");
+  return "1px solid " + activeColor;
 }, HiddenRadioInput, Circle, function (_ref4) {
   var activeColor = _ref4.activeColor;
-  return "0px 0px 2px 1px ".concat(activeColor, ";");
+  return "0px 0px 2px 1px " + activeColor;
 });
 
 var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
@@ -27287,7 +27318,9 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
       _ref5$handleChange = _ref5.handleChange,
       handleChange = _ref5$handleChange === void 0 ? noop : _ref5$handleChange,
       field = _ref5.field,
-      config = _ref5.config;
+      config = _ref5.config,
+      _ref5$isRequired = _ref5.isRequired,
+      isRequired = _ref5$isRequired === void 0 ? false : _ref5$isRequired;
 
   var getDefaultChecked = function getDefaultChecked(value, idx) {
     var selectionExistsInConfig = config === null || config === void 0 ? void 0 : config.map(function (c) {
@@ -27320,7 +27353,8 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
       setValue(e.target.value);
       handleChange(e);
     },
-    defaultChecked: getDefaultChecked(value, index)
+    defaultChecked: getDefaultChecked(value, index),
+    required: isRequired
   }), /*#__PURE__*/React__default.createElement(Text$1, {
     as: "label",
     htmlFor: id,
@@ -27364,8 +27398,8 @@ var RadioButton$1 = function RadioButton(_ref2) {
       ariaLabelledBy = _ref2$ariaLabelledBy === void 0 ? "" : _ref2$ariaLabelledBy,
       _ref2$ariaLabel = _ref2.ariaLabel,
       ariaLabel = _ref2$ariaLabel === void 0 ? null : _ref2$ariaLabel,
-      _ref2$isRequired = _ref2.isRequired,
-      isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired;
+      _ref2$required = _ref2.required,
+      required = _ref2$required === void 0 ? false : _ref2$required;
   var buttonBorder = {
     onFocused: {
       borderColor: themeValues.activeColor,
@@ -27425,10 +27459,11 @@ var RadioButton$1 = function RadioButton(_ref2) {
     type: "radio",
     id: "radio-".concat(name),
     disabled: disabled,
+    required: required,
+    "aria-required": required,
     onClick: toggleRadio,
     "aria-describedby": ariaDescribedBy,
-    tabIndex: "-1",
-    required: isRequired
+    tabIndex: "-1"
   }, extraProps)), /*#__PURE__*/React__default.createElement(Motion, {
     borderWidth: "1px",
     borderStyle: "solid",
@@ -38118,7 +38153,9 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
       field = _ref.field,
       fieldActions = _ref.fieldActions,
       showErrors = _ref.showErrors,
-      countryCode = _ref.countryCode;
+      countryCode = _ref.countryCode,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
   var placeholder = countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
   var options = [placeholder].concat(_toConsumableArray(getOptions(countryCode)));
   return /*#__PURE__*/React__default.createElement(FormSelect$1, {
@@ -38128,7 +38165,8 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
     labelTextWhenNoError: labelTextWhenNoError,
     errorMessages: errorMessages,
     showErrors: showErrors,
-    autocompleteValue: "address-level1"
+    autocompleteValue: "address-level1",
+    isRequired: isRequired
   });
 };
 
@@ -39454,6 +39492,7 @@ var AddressForm = function AddressForm(_ref) {
     labelTextWhenNoError: "Country",
     errorMessages: countryErrorMessages,
     field: fields.country,
+    isRequired: true,
     onChange: function onChange(value) {
       actions.fields.country.set(value); // temporary measure to not dirty fields until
       // we can write a reset function for fields
@@ -39478,7 +39517,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-line1",
-    dataQa: "Address"
+    dataQa: "Address",
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Apt, Suite, Unit, Floor, etc. (Optional)",
     field: fields.street2,
@@ -39488,7 +39528,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-line2",
-    dataQa: "Address Line 2"
+    dataQa: "Address Line 2",
+    isRequired: false
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "City",
     errorMessages: cityErrorMessages,
@@ -39499,7 +39540,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-level2",
-    dataQa: "City"
+    dataQa: "City",
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormStateDropdown, {
     labelTextWhenNoError: isUS ? "State" : "State or Province",
     errorMessages: stateProvinceErrorMessages,
@@ -39510,7 +39552,8 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    dataQa: "State or Province"
+    dataQa: "State or Province",
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     isNum: isUS,
     formatter: isUS ? zipFormat : null,
@@ -39523,7 +39566,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "postal-code",
-    dataQa: "Zip code"
+    dataQa: "Zip code",
+    isRequired: true
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "address checkbox",
     title: "Save address to wallet",
@@ -47990,7 +48034,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "name"
+    autocompleteValue: "name",
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Routing number",
     dataQa: "Routing number",
@@ -48012,7 +48057,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     },
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm routing number",
     dataQa: "Confirm routing number",
@@ -48023,6 +48069,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
+    isRequired: true,
     isNum: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Account number",
@@ -48031,6 +48078,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     field: fields.accountNumber,
     fieldActions: actions.fields.accountNumber,
     showErrors: showErrors,
+    isRequired: true,
     isNum: true,
     helperModal: function helperModal() {
       return /*#__PURE__*/React__default.createElement(AccountAndRoutingModal$1, {
@@ -48049,6 +48097,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm account number",
     dataQa: "Confirm account number",
+    isRequired: true,
     errorMessages: confirmAccountNumberErrors,
     field: fields.confirmAccountNumber,
     fieldActions: actions.fields.confirmAccountNumber,
@@ -48059,6 +48108,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     isNum: true
   }), allowBankAccountType && /*#__PURE__*/React__default.createElement(FormSelect$1, {
     labelTextWhenNoError: "Account type",
+    isRequired: true,
     dataQa: "Account type",
     options: [{
       text: "Select account type",
@@ -48189,6 +48239,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     "aria-label": "Card payment"
   }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, !hideZipCode && /*#__PURE__*/React__default.createElement(CountryDropdown, {
     labelTextWhenNoError: "Country",
+    isRequired: true,
     errorMessages: countryErrorMessages,
     field: fields.country,
     onChange: function onChange(value) {
@@ -48211,8 +48262,10 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "cc-name"
+    autocompleteValue: "cc-name",
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
+    isRequired: true,
     labelTextWhenNoError: "Credit card number",
     dataQa: "Credit card number",
     errorMessages: creditCardNumberErrors,
@@ -48242,7 +48295,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     isNum: true,
     removeFromValue: /\// // removes "/" from browser autofill
     ,
-    autocompleteValue: "cc-exp"
+    autocompleteValue: "cc-exp",
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "CVV",
     dataQa: "CVV",
@@ -48255,7 +48309,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "cc-csc"
+    autocompleteValue: "cc-csc",
+    isRequired: true
   })), !hideZipCode && /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "0" : "0 0.5rem 0 0",
     width: isMobile ? "100%" : "50%"
@@ -48271,7 +48326,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "billing postal-code"
+    autocompleteValue: "billing postal-code",
+    isRequired: true
   })), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
     childGap: "4px",
     align: "center"
@@ -48519,7 +48575,7 @@ PhoneForm.mapDispatchToProps = mapDispatchToProps$8;
 var DefaultHeading = styled__default.div.withConfig({
   displayName: "RadioGroup__DefaultHeading",
   componentId: "sc-7lqrl8-0"
-})(["font-size:0.875rem;color:", " margin:0;padding:8px 0px;"], CHARADE_GREY);
+})(["font-size:0.875rem;color:", ";margin:0;padding:8px 0px;"], CHARADE_GREY);
 var StyledFieldset = styled__default.fieldset.withConfig({
   displayName: "RadioGroup__StyledFieldset",
   componentId: "sc-7lqrl8-1"
@@ -48540,7 +48596,9 @@ var RadioGroup = function RadioGroup(_ref) {
       _ref$handleChange = _ref.handleChange,
       handleChange = _ref$handleChange === void 0 ? noop : _ref$handleChange,
       field = _ref.field,
-      fieldActions = _ref.fieldActions;
+      fieldActions = _ref.fieldActions,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
 
   var setValue = function setValue(value) {
     return fieldActions.set(value);
@@ -48549,7 +48607,8 @@ var RadioGroup = function RadioGroup(_ref) {
   return /*#__PURE__*/React__default.createElement(StyledFieldset, {
     role: "radiogroup",
     "aria-labelledby": "radio-group-".concat(groupName, "-heading"),
-    $extraStyles: extraStyles
+    $extraStyles: extraStyles,
+    required: isRequired
   }, Heading !== null && Heading, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "4px"
   }, config.map(function (c, idx) {
@@ -48562,7 +48621,8 @@ var RadioGroup = function RadioGroup(_ref) {
       handleChange: handleChange,
       field: field,
       config: config,
-      "aria-invalid": field.dirty && field.hasErrors
+      "aria-invalid": field.dirty && field.hasErrors,
+      isRequired: isRequired
     }));
   })));
 };
@@ -48624,9 +48684,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$isSectionRequire = _ref.isSectionRequired,
-      isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire;
+      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) {
@@ -48682,8 +48740,7 @@ var RadioSection = function RadioSection(_ref) {
     extraStyles: containerStyles
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0",
-    role: "radiogroup",
-    "aria-required": isSectionRequired
+    role: "radiogroup"
   }, sections.filter(function (section) {
     return !section.hidden;
   }).map(function (section) {
@@ -48705,8 +48762,7 @@ var RadioSection = function RadioSection(_ref) {
       extraStyles: borderStyles,
       role: "radio",
       "aria-checked": openSection === section.id,
-      "aria-disabled": section.disabled,
-      "aria-required": !!(section !== null && section !== void 0 && section.required)
+      "aria-disabled": section.disabled
     }, /*#__PURE__*/React__default.createElement(Stack, {
       childGap: "0"
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -48745,7 +48801,7 @@ var RadioSection = function RadioSection(_ref) {
         return toggleOpenSection(section.id);
       },
       tabIndex: "-1",
-      isRequired: !!(section !== null && section !== void 0 && section.required)
+      required: section === null || section === void 0 ? void 0 : section.required
     })), section.titleIcon && /*#__PURE__*/React__default.createElement(Cluster, {
       align: "center"
     }, section.titleIcon), /*#__PURE__*/React__default.createElement(Box, {