@thecb/components 7.10.1-beta.5 → 7.10.1-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.10.1-beta.5",
+  "version": "7.10.1-beta.7",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/radio-section/RadioSection.js

@@ -8,6 +8,7 @@ import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
 import { noop } from "../../../util/general";
 import Text from "../../atoms/text";
 import { CHARADE_GREY } from "../../../constants/colors";
+import { createIdFromString } from "../../../util/general";
 /*
   Takes an array of section objects, each object should look like:
     {
@@ -40,7 +41,8 @@ const RadioSection = ({
   toggleOpenSection,
   staggeredAnimation = false,
   initiallyOpen = true,
-  openHeight = "auto"
+  openHeight = "auto",
+  ariaDescribedBy
 }) => {
   const handleKeyDown = (id, e) => {
     if (e?.keyCode === 13) {
@@ -157,7 +159,10 @@ const RadioSection = ({
                       {!section.hideRadioButton && (
                         <Box padding="0">
                           <RadioButton
-                            name={section.id}
+                            name={
+                              createIdFromString(section.title) || section.id
+                            }
+                            ariaDescribedBy={ariaDescribedBy}
                             radioOn={openSection === section.id}
                             radioFocused={focused === section.id}
                             toggleRadio={

package/src/components/molecules/radio-section/radio-button/RadioButton.js

@@ -16,6 +16,7 @@ const RadioButton = ({
   toggleRadio,
   name,
   disabled = false,
+  ariaDescribedBy = "",
   themeValues
 }) => {
   const buttonBorder = {
@@ -80,6 +81,7 @@ const RadioButton = ({
         aria-label={name}
         disabled={disabled}
         onClick={toggleRadio}
+        aria-describedby={ariaDescribedBy}
         tabIndex="-1"
       />
       <Motion