@thecb/components 9.0.2 → 9.0.3-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.0.2",
+  "version": "9.0.3-beta.11",
   "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

@@ -5,10 +5,9 @@ import { fallbackValues } from "./RadioSection.theme";
 import { AnimatePresence } from "framer-motion";
 import RadioButton from "./radio-button/RadioButton";
 import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
-import { noop } from "../../../util/general";
+import { createIdFromString, 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:
     {
@@ -32,6 +31,11 @@ import { createIdFromString } from "../../../util/general";
 
 */
 
+const computeSectionId = section =>
+  typeof section.title === "string"
+    ? createIdFromString(section.title)
+    : section.id;
+
 const RadioSection = ({
   themeValues,
   isMobile,
@@ -43,10 +47,11 @@ const RadioSection = ({
   initiallyOpen = true,
   openHeight = "auto",
   containerStyles = "",
-  ariaDescribedBy
+  ariaDescribedBy,
+  rightIconsLabel = null
 }) => {
   const handleKeyDown = (id, e) => {
-    if (e?.keyCode === 13) {
+    if (e?.keyCode === 13 || e?.keyCode === 32) {
       toggleOpenSection(id);
     }
   };
@@ -101,7 +106,7 @@ const RadioSection = ({
       borderRadius="4px"
       extraStyles={containerStyles}
     >
-      <Stack childGap="0">
+      <Stack childGap="0" role="radiogroup">
         {sections
           .filter(section => !section.hidden)
           .map(section => (
@@ -117,6 +122,8 @@ const RadioSection = ({
               initial={initiallyOpen ? "open" : "closed"}
               key={`item-${section.id}`}
               extraStyles={borderStyles}
+              role="radio"
+              aria-checked={openSection === section.id}
             >
               <Stack childGap="0">
                 <Box
@@ -159,12 +166,12 @@ const RadioSection = ({
                       {!section.hideRadioButton && (
                         <Box padding="0">
                           <RadioButton
-                            name={
-                              typeof section.title === "string"
-                                ? createIdFromString(section.title)
-                                : section.id
-                            }
+                            id={computeSectionId(section)}
+                            name={computeSectionId(section)}
                             ariaDescribedBy={ariaDescribedBy}
+                            ariaLabelledBy={`radio-input-${computeSectionId(
+                              section
+                            )}`}
                             radioOn={openSection === section.id}
                             radioFocused={focused === section.id}
                             toggleRadio={
@@ -180,13 +187,22 @@ const RadioSection = ({
                         <Cluster align="center">{section.titleIcon}</Cluster>
                       )}
                       <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
-                        <Text variant="p" color={CHARADE_GREY}>
+                        <Text
+                          as="label"
+                          color={CHARADE_GREY}
+                          htmlFor={`radio-input-${computeSectionId(section)}`}
+                        >
                           {section.title}
                         </Text>
                       </Box>
                     </Cluster>
                     {section.rightIcons && (
-                      <Cluster childGap="0.5rem">
+                      <Cluster
+                        childGap="0.5rem"
+                        {...(rightIconsLabel !== null
+                          ? { "aria-label": rightIconsLabel }
+                          : {})}
+                      >
                         {section.rightIcons.map(icon => (
                           <RightIcon
                             src={icon.img}

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

@@ -17,7 +17,9 @@ const RadioButton = ({
   name,
   disabled = false,
   ariaDescribedBy = "",
-  themeValues
+  themeValues,
+  ariaLabelledBy = "",
+  ariaLabel = null
 }) => {
   const buttonBorder = {
     onFocused: {
@@ -60,6 +62,12 @@ const RadioButton = ({
       width: "0px"
     }
   };
+  const extraProps = {};
+  if (ariaLabelledBy && ariaLabelledBy.length) {
+    extraProps["aria-labelledby"] = ariaLabelledBy;
+  } else if (ariaLabel && ariaLabel !== null) {
+    extraProps["aria-label"] = ariaLabel;
+  }
 
   return (
     <Motion
@@ -77,12 +85,13 @@ const RadioButton = ({
       }
     >
       <HiddenRadioButton
-        id={`#radio-${name}`}
-        aria-label={name}
+        type="radio"
+        id={`radio-${name}`}
         disabled={disabled}
         onClick={toggleRadio}
         aria-describedby={ariaDescribedBy}
         tabIndex="-1"
+        {...extraProps}
       />
       <Motion
         borderWidth="1px"