@thecb/components 9.0.2 → 9.0.3-beta.11

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,19 +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),
-    "aria-label": name,
+  }, /*#__PURE__*/React.createElement(HiddenRadioButton, _extends({
+    type: "radio",
+    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",
@@ -48466,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,
@@ -48483,10 +48499,12 @@ 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;
+      ariaDescribedBy = _ref.ariaDescribedBy,
+      _ref$rightIconsLabel = _ref.rightIconsLabel,
+      rightIconsLabel = _ref$rightIconsLabel === void 0 ? null : _ref$rightIconsLabel;
 
   var handleKeyDown = function handleKeyDown(id, e) {
-    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
+    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13 || (e === null || e === void 0 ? void 0 : e.keyCode) === 32) {
       toggleOpenSection(id);
     }
   };
@@ -48538,7 +48556,8 @@ var RadioSection = function RadioSection(_ref) {
     borderRadius: "4px",
     extraStyles: containerStyles
   }, /*#__PURE__*/React.createElement(Stack, {
-    childGap: "0"
+    childGap: "0",
+    role: "radiogroup"
   }, sections.filter(function (section) {
     return !section.hidden;
   }).map(function (section) {
@@ -48557,7 +48576,9 @@ var RadioSection = function RadioSection(_ref) {
       animate: openSection === section.id ? "open" : "closed",
       initial: initiallyOpen ? "open" : "closed",
       key: "item-".concat(section.id),
-      extraStyles: borderStyles
+      extraStyles: borderStyles,
+      role: "radio",
+      "aria-checked": openSection === section.id
     }, /*#__PURE__*/React.createElement(Stack, {
       childGap: "0"
     }, /*#__PURE__*/React.createElement(Box, {
@@ -48587,8 +48608,10 @@ var RadioSection = function RadioSection(_ref) {
     }, !section.hideRadioButton && /*#__PURE__*/React.createElement(Box, {
       padding: "0"
     }, /*#__PURE__*/React.createElement(RadioButton$2, {
-      name: typeof section.title === "string" ? createIdFromString(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 () {
@@ -48600,11 +48623,14 @@ var RadioSection = function RadioSection(_ref) {
     }, section.titleIcon), /*#__PURE__*/React.createElement(Box, {
       padding: section.titleIcon ? "0 0 0 8px" : "0"
     }, /*#__PURE__*/React.createElement(Text$1, {
-      variant: "p",
-      color: CHARADE_GREY
-    }, section.title))), section.rightIcons && /*#__PURE__*/React.createElement(Cluster, {
+      as: "label",
+      color: CHARADE_GREY,
+      htmlFor: "radio-input-".concat(computeSectionId(section))
+    }, section.title))), section.rightIcons && /*#__PURE__*/React.createElement(Cluster, _extends({
       childGap: "0.5rem"
-    }, section.rightIcons.map(function (icon) {
+    }, rightIconsLabel !== null ? {
+      "aria-label": rightIconsLabel
+    } : {}), section.rightIcons.map(function (icon) {
       return /*#__PURE__*/React.createElement(RightIcon, {
         src: icon.img,
         key: icon.img,