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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.1.0-beta.2",
+  "version": "9.1.0-beta.4",
   "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 idString = section =>
+  typeof section.title === "string"
+    ? createIdFromString(section.title)
+    : section.id;
+
 const RadioSection = ({
   themeValues,
   isMobile,
@@ -46,7 +50,7 @@ const RadioSection = ({
   ariaDescribedBy
 }) => {
   const handleKeyDown = (id, e) => {
-    if (e?.keyCode === 13) {
+    if (e?.keyCode === 13 || e?.keyCode === 32) {
       toggleOpenSection(id);
     }
   };
@@ -101,7 +105,7 @@ const RadioSection = ({
       borderRadius="4px"
       extraStyles={containerStyles}
     >
-      <Stack childGap="0">
+      <Stack childGap="0" role="radiogroup">
         {sections
           .filter(section => !section.hidden)
           .map(section => (
@@ -117,6 +121,9 @@ const RadioSection = ({
               initial={initiallyOpen ? "open" : "closed"}
               key={`item-${section.id}`}
               extraStyles={borderStyles}
+              role="radio"
+              aria-checked={openSection === section.id}
+              aria-disabled={section.disabled}
             >
               <Stack childGap="0">
                 <Box
@@ -159,11 +166,8 @@ const RadioSection = ({
                       {!section.hideRadioButton && (
                         <Box padding="0">
                           <RadioButton
-                            name={
-                              typeof section.title === "string"
-                                ? createIdFromString(section.title)
-                                : section.id
-                            }
+                            id={`radio-input-${idString(section)}`}
+                            name={idString(section)}
                             ariaDescribedBy={ariaDescribedBy}
                             radioOn={openSection === section.id}
                             radioFocused={focused === section.id}
@@ -180,13 +184,21 @@ 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"
+                          htmlFor={`radio-input-${idString(section)}`}
+                          color={CHARADE_GREY}
+                        >
                           {section.title}
                         </Text>
                       </Box>
                     </Cluster>
                     {section.rightIcons && (
-                      <Cluster childGap="0.5rem">
+                      <Cluster
+                        childGap="0.5rem"
+                        aria-label={section?.rightIconsLabel || null}
+                        role={section?.rightIconsRole || null}
+                      >
                         {section.rightIcons.map(icon => (
                           <RightIcon
                             src={icon.img}
@@ -194,6 +206,7 @@ const RadioSection = ({
                             fade={!icon.enabled}
                             isMobile={isMobile}
                             alt={icon.altText}
+                            aria-disabled={!icon.enabled}
                           />
                         ))}
                       </Cluster>

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

@@ -10,8 +10,47 @@ const story = page({
 });
 export default story;
 
+const cardIcons = [
+  {
+    img: "https://cityville-demos.uat.cityba.se/Visa.svg",
+    enabled: true,
+    altText: "visa",
+    name: "VISA"
+  },
+  {
+    img: "https://cityville-demos.uat.cityba.se/MasterCardDark.svg",
+    enabled: false,
+    altText: "master card",
+    name: "MASTERCARD"
+  },
+  {
+    img: "https://cityville-demos.uat.cityba.se/DiscoverDark.svg",
+    enabled: true,
+    altText: "discover",
+    name: "DISCOVER"
+  },
+  {
+    img: "https://cityville-demos.uat.cityba.se/AmEx.svg",
+    enabled: true,
+    altText: "american express",
+    name: "AMEX"
+  }
+];
+const cardIconsLabel = `Accepting ${cardIcons
+  .filter(ci => ci.enabled)
+  ?.map((cardIcon, index) =>
+    index === cardIcons.length - 1
+      ? ` and ${cardIcon.altText}.`
+      : ` ` + cardIcon.altText
+  )}`;
 const sections = [
-  { id: "foo", title: "Foo", content: <div>Content 0</div> },
+  {
+    id: "new-card-section",
+    title: "New Card",
+    content: <p>The form to add a credit card would go here.</p>,
+    rightIconsLabel: cardIconsLabel,
+    rightIcons: cardIcons
+  },
   { id: "bar", title: "Bar", content: <div>Content 1</div> },
   { id: "baz", title: "Baz", content: <div>Content 2</div> }
 ];

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"