@thecb/components 9.0.3-beta.11 → 9.0.3-beta.12

package/dist/index.esm.js

@@ -48478,7 +48478,7 @@ var fallbackValues$Q = {
 
 */
 
-var computeSectionId = function computeSectionId(section) {
+var idString = function idString(section) {
   return typeof section.title === "string" ? createIdFromString(section.title) : section.id;
 };
 
@@ -48499,9 +48499,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$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) {
@@ -48578,7 +48576,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.createElement(Stack, {
       childGap: "0"
     }, /*#__PURE__*/React.createElement(Box, {
@@ -48608,10 +48607,9 @@ var RadioSection = function RadioSection(_ref) {
     }, !section.hideRadioButton && /*#__PURE__*/React.createElement(Box, {
       padding: "0"
     }, /*#__PURE__*/React.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 () {
@@ -48624,19 +48622,20 @@ var RadioSection = function RadioSection(_ref) {
       padding: section.titleIcon ? "0 0 0 8px" : "0"
     }, /*#__PURE__*/React.createElement(Text$1, {
       as: "label",
-      color: CHARADE_GREY,
-      htmlFor: "radio-input-".concat(computeSectionId(section))
-    }, section.title))), section.rightIcons && /*#__PURE__*/React.createElement(Cluster, _extends({
-      childGap: "0.5rem"
-    }, rightIconsLabel !== null ? {
-      "aria-label": rightIconsLabel
-    } : {}), section.rightIcons.map(function (icon) {
+      htmlFor: "radio-input-".concat(idString(section)),
+      color: CHARADE_GREY
+    }, section.title))), section.rightIcons && /*#__PURE__*/React.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.createElement(RightIcon, {
         src: icon.img,
         key: icon.img,
         fade: !icon.enabled,
         isMobile: isMobile,
-        alt: icon.altText
+        alt: icon.altText,
+        "aria-disabled": !icon.enabled
       });
     })), section.rightTitleContent && /*#__PURE__*/React.createElement(Fragment$1, null, section.rightTitleContent))), /*#__PURE__*/React.createElement(AnimatePresence, {
       initial: false