@thecb/components 9.0.3-beta.4 → 9.0.3-beta.5

package/dist/index.esm.js

@@ -27211,7 +27211,11 @@ var RadioButton$1 = function RadioButton(_ref2) {
       disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
       _ref2$ariaDescribedBy = _ref2.ariaDescribedBy,
       ariaDescribedBy = _ref2$ariaDescribedBy === void 0 ? "" : _ref2$ariaDescribedBy,
-      themeValues = _ref2.themeValues;
+      themeValues = _ref2.themeValues,
+      _ref2$ariaLabelledBy = _ref2.ariaLabelledBy,
+      ariaLabelledBy = _ref2$ariaLabelledBy === void 0 ? "" : _ref2$ariaLabelledBy,
+      _ref2$ariaLabel = _ref2.ariaLabel,
+      ariaLabel = _ref2$ariaLabel === void 0 ? null : _ref2$ariaLabel;
   var buttonBorder = {
     onFocused: {
       borderColor: themeValues.activeColor,
@@ -27252,20 +27256,27 @@ var RadioButton$1 = function RadioButton(_ref2) {
       width: "0px"
     }
   };
+  var extraProps = {};
+
+  if (ariaLabelledBy && ariaLabelledBy.length) {
+    extraProps["aria-labelledby"] = ariaLabelledBy;
+  } else if (ariaLabel && ariaLabel !== null) {
+    extraProps["aria-label"] = ariaLabel;
+  }
+
   return /*#__PURE__*/React.createElement(Motion, {
     position: "relative",
     padding: "0",
     initial: "off",
     animate: radioOn ? radioFocused ? "onFocused" : "on" : radioFocused ? "offFocused" : "off"
-  }, /*#__PURE__*/React.createElement(HiddenRadioButton, {
-    id: "radio-".concat(name),
+  }, /*#__PURE__*/React.createElement(HiddenRadioButton, _extends({
     type: "radio",
-    "aria-disabled": disabled,
+    id: "radio-".concat(name),
     disabled: disabled,
     onClick: toggleRadio,
     "aria-describedby": ariaDescribedBy,
     tabIndex: "-1"
-  }), /*#__PURE__*/React.createElement(Motion, {
+  }, extraProps)), /*#__PURE__*/React.createElement(Motion, {
     borderWidth: "1px",
     borderStyle: "solid",
     borderRadius: "12px",
@@ -45776,8 +45787,6 @@ var Module = function Module(_ref) {
       spacingBottom = _ref$spacingBottom === void 0 ? "2.5rem" : _ref$spacingBottom,
       fontSize = _ref.fontSize,
       themeValues = _ref.themeValues,
-      _ref$ariaRole = _ref.ariaRole,
-      ariaRole = _ref$ariaRole === void 0 ? null : _ref$ariaRole,
       children = _ref.children;
   var themedFontSize = variant === "small" ? "1.25rem" : variant === "default" ? "1.375rem" : "2rem";
   var computedFontSize = fontSize || themedFontSize;
@@ -45793,13 +45802,12 @@ var Module = function Module(_ref) {
     extraStyles: "font-size: ".concat(computedFontSize, ";"),
     id: titleID
   }, heading);
-  return /*#__PURE__*/React.createElement(Box, _extends({
+  return /*#__PURE__*/React.createElement(Box, {
     "aria-disabled": disabled,
     extraStyles: disabled && disabledStyles,
-    padding: "0"
-  }, ariaRole ? {
-    role: ariaRole
-  } : {}), heading && !rightTitleContent && headingText, heading && rightTitleContent && /*#__PURE__*/React.createElement(Cluster, {
+    padding: "0",
+    role: "group"
+  }, heading && !rightTitleContent && headingText, heading && rightTitleContent && /*#__PURE__*/React.createElement(Cluster, {
     justify: "space-between",
     align: "center",
     nowrap: true
@@ -48470,6 +48478,10 @@ var fallbackValues$Q = {
 
 */
 
+var computeSectionId = function computeSectionId(section) {
+  return typeof section.title === "string" ? createIdFromString(section.title) : section.id;
+};
+
 var RadioSection = function RadioSection(_ref) {
   var themeValues = _ref.themeValues,
       isMobile = _ref.isMobile,
@@ -48487,12 +48499,9 @@ 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$groupLabel = _ref.groupLabel;
+      ariaDescribedBy = _ref.ariaDescribedBy;
 
   var handleKeyDown = function handleKeyDown(id, e) {
-    // The expected keyboard shortcut for activating a radio is the Space key
-    // Below covers both Enter or Space key presses
     if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13 || (e === null || e === void 0 ? void 0 : e.keyCode) === 32) {
       toggleOpenSection(id);
     }
@@ -48539,18 +48548,14 @@ var RadioSection = function RadioSection(_ref) {
       focused = _useState2[0],
       setFocused = _useState2[1];
 
-  var computeId = function computeId(string) {
-    var fallbackString = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
-    return typeof string === "string" ? createIdFromString(string) : fallbackString;
-  };
-
   return /*#__PURE__*/React.createElement(Box, {
     padding: "1px",
     border: "1px solid ".concat(themeValues.borderColor),
     borderRadius: "4px",
     extraStyles: containerStyles
   }, /*#__PURE__*/React.createElement(Stack, {
-    childGap: "0"
+    childGap: "0",
+    role: "radiogroup"
   }, sections.filter(function (section) {
     return !section.hidden;
   }).map(function (section) {
@@ -48570,12 +48575,8 @@ var RadioSection = function RadioSection(_ref) {
       initial: initiallyOpen ? "open" : "closed",
       key: "item-".concat(section.id),
       extraStyles: borderStyles,
-      disabled: section.disabled,
-      "aria-disabled": section.disabled,
       role: "radio",
-      "aria-checked": !section.disabled && openSection === section.id,
-      "aria-labelledby": computeId(section.title, section.id),
-      id: createIdFromString(typeof section.title === "string" ? section.title : section.id)
+      "aria-checked": openSection === section.id
     }, /*#__PURE__*/React.createElement(Stack, {
       childGap: "0"
     }, /*#__PURE__*/React.createElement(Box, {
@@ -48605,22 +48606,24 @@ var RadioSection = function RadioSection(_ref) {
     }, !section.hideRadioButton && /*#__PURE__*/React.createElement(Box, {
       padding: "0"
     }, /*#__PURE__*/React.createElement(RadioButton$2, {
-      id: computeId(section.title, section.id),
-      name: computeId(section.title, section.id),
+      id: computeSectionId(section),
+      name: computeSectionId(section),
       ariaDescribedBy: ariaDescribedBy,
+      ariaLabelledBy: "radio-input-".concat(computeSectionId(section)),
       radioOn: openSection === section.id,
       radioFocused: focused === section.id,
       toggleRadio: section.disabled ? noop : function () {
         return toggleOpenSection(section.id);
-      }
+      },
+      tabIndex: "-1"
     })), section.titleIcon && /*#__PURE__*/React.createElement(Cluster, {
       align: "center"
     }, section.titleIcon), /*#__PURE__*/React.createElement(Box, {
       padding: section.titleIcon ? "0 0 0 8px" : "0"
     }, /*#__PURE__*/React.createElement(Text$1, {
       as: "label",
-      htmlFor: computeId(section.title, section.id),
-      color: CHARADE_GREY
+      color: CHARADE_GREY,
+      htmlFor: "radio-input-".concat(computeSectionId(section))
     }, section.title))), section.rightIcons && /*#__PURE__*/React.createElement(Cluster, {
       childGap: "0.5rem"
     }, section.rightIcons.map(function (icon) {