@thecb/components 9.1.0-beta.2 → 9.1.0-beta.3

package/dist/index.esm.js

@@ -27238,7 +27238,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,
@@ -27279,19 +27283,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",
@@ -49591,6 +49603,10 @@ var fallbackValues$Q = {
 
 */
 
+var idString = function idString(section) {
+  return typeof section.title === "string" ? createIdFromString(section.title) : section.id;
+};
+
 var RadioSection = function RadioSection(_ref) {
   var themeValues = _ref.themeValues,
       isMobile = _ref.isMobile,
@@ -49611,7 +49627,7 @@ var RadioSection = function RadioSection(_ref) {
       ariaDescribedBy = _ref.ariaDescribedBy;
 
   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);
     }
   };
@@ -49663,7 +49679,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) {
@@ -49682,7 +49699,10 @@ 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,
+      "aria-disabled": section.disabled
     }, /*#__PURE__*/React.createElement(Stack, {
       childGap: "0"
     }, /*#__PURE__*/React.createElement(Box, {
@@ -49712,7 +49732,8 @@ 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: "radio-input-".concat(idString(section)),
+      name: idString(section),
       ariaDescribedBy: ariaDescribedBy,
       radioOn: openSection === section.id,
       radioFocused: focused === section.id,
@@ -49725,17 +49746,21 @@ 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",
+      as: "label",
+      htmlFor: "radio-input-".concat(idString(section)),
       color: CHARADE_GREY
     }, section.title))), section.rightIcons && /*#__PURE__*/React.createElement(Cluster, {
-      childGap: "0.5rem"
+      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