@thecb/components 9.0.3-beta.11 → 9.0.3-beta.12

package/package.json

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

@@ -31,7 +31,7 @@ import { CHARADE_GREY } from "../../../constants/colors";
 
 */
 
-const computeSectionId = section =>
+const idString = section =>
   typeof section.title === "string"
     ? createIdFromString(section.title)
     : section.id;
@@ -47,8 +47,7 @@ const RadioSection = ({
   initiallyOpen = true,
   openHeight = "auto",
   containerStyles = "",
-  ariaDescribedBy,
-  rightIconsLabel = null
+  ariaDescribedBy
 }) => {
   const handleKeyDown = (id, e) => {
     if (e?.keyCode === 13 || e?.keyCode === 32) {
@@ -124,6 +123,7 @@ const RadioSection = ({
               extraStyles={borderStyles}
               role="radio"
               aria-checked={openSection === section.id}
+              aria-disabled={section.disabled}
             >
               <Stack childGap="0">
                 <Box
@@ -166,12 +166,9 @@ const RadioSection = ({
                       {!section.hideRadioButton && (
                         <Box padding="0">
                           <RadioButton
-                            id={computeSectionId(section)}
-                            name={computeSectionId(section)}
+                            id={`radio-input-${idString(section)}`}
+                            name={idString(section)}
                             ariaDescribedBy={ariaDescribedBy}
-                            ariaLabelledBy={`radio-input-${computeSectionId(
-                              section
-                            )}`}
                             radioOn={openSection === section.id}
                             radioFocused={focused === section.id}
                             toggleRadio={
@@ -189,8 +186,8 @@ const RadioSection = ({
                       <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
                         <Text
                           as="label"
+                          htmlFor={`radio-input-${idString(section)}`}
                           color={CHARADE_GREY}
-                          htmlFor={`radio-input-${computeSectionId(section)}`}
                         >
                           {section.title}
                         </Text>
@@ -199,9 +196,8 @@ const RadioSection = ({
                     {section.rightIcons && (
                       <Cluster
                         childGap="0.5rem"
-                        {...(rightIconsLabel !== null
-                          ? { "aria-label": rightIconsLabel }
-                          : {})}
+                        aria-label={section?.rightIconsLabel || null}
+                        role={section?.rightIconsRole || null}
                       >
                         {section.rightIcons.map(icon => (
                           <RightIcon
@@ -210,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> }
 ];