@thecb/components 9.3.2-beta.1 → 9.3.2

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

@@ -1,13 +1,21 @@
-import React, { Fragment, useState } from "react";
+import React, { createRef, Fragment, useRef, useState } from "react";
 import styled from "styled-components";
 import { themeComponent } from "../../../util/themeUtils";
 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 { createIdFromString, noop } from "../../../util/general";
+import { createIdFromString, noop, wrapIndex } from "../../../util/general";
 import Text from "../../atoms/text";
 import { CHARADE_GREY } from "../../../constants/colors";
+import {
+  ARROW_DOWN,
+  ARROW_LEFT,
+  ARROW_RIGHT,
+  ARROW_UP,
+  ENTER,
+  SPACEBAR
+} from "../../../constants/keyboard";
 /*
   Takes an array of section objects, each object should look like:
     {
@@ -47,12 +55,42 @@ const RadioSection = ({
   initiallyOpen = true,
   openHeight = "auto",
   containerStyles = "",
-  ariaDescribedBy
+  ariaDescribedBy,
+  isSectionRequired = false,
+  ...rest
 }) => {
-  const handleKeyDown = (id, e) => {
-    if (e?.keyCode === 13 || e?.keyCode === 32) {
+  const [focused, setFocused] = useState(null);
+  const sectionRefs = useRef(
+    [...Array(sections.length)].map(() => createRef())
+  );
+
+  const handleKeyDown = (id, e, i) => {
+    if (e.currentTarget !== e.target) {
+      return;
+    }
+
+    // Allow Enter and Space to select a section
+    if (e.keyCode === ENTER || e.keyCode === SPACEBAR) {
+      e.preventDefault();
       toggleOpenSection(id);
     }
+
+    // Allow Up and Down arrow navigation between sections
+    if (
+      e.keyCode == ARROW_UP ||
+      e.keyCode == ARROW_DOWN ||
+      e.keyCode == ARROW_LEFT ||
+      e.keyCode == ARROW_RIGHT
+    ) {
+      e.preventDefault();
+      const indexIncrement =
+        e.keyCode == ARROW_RIGHT || e.keyCode == ARROW_DOWN ? 1 : -1;
+      const nextIndex = wrapIndex(i + indexIncrement, sections.length);
+
+      sectionRefs?.current[nextIndex]?.current?.focus();
+      setFocused(sections[nextIndex]?.id);
+      toggleOpenSection(sections[nextIndex]?.id);
+    }
   };
 
   const wrapper = {
@@ -96,8 +134,6 @@ const RadioSection = ({
     transition: opacity 0.3s ease;
   `;
 
-  const [focused, setFocused] = useState(null);
-
   return (
     <Box
       padding="1px"
@@ -105,17 +141,25 @@ const RadioSection = ({
       borderRadius="4px"
       extraStyles={containerStyles}
     >
-      <Stack childGap="0" role="radiogroup">
+      <Stack
+        childGap="0"
+        role="radiogroup"
+        aria-required={isSectionRequired}
+        {...rest}
+      >
         {sections
           .filter(section => !section.hidden)
-          .map(section => (
+          .map((section, i) => (
             <Motion
               tabIndex={
                 section.hideRadioButton || section.disabled ? "-1" : "0"
               }
-              onKeyDown={e => !section.disabled && handleKeyDown(section.id, e)}
-              onFocus={() => !section.disabled && setFocused(section.id)}
+              ref={sectionRefs.current[i]}
               onBlur={() => !section.disabled && setFocused(null)}
+              onFocus={() => !section.disabled && setFocused(section.id)}
+              onKeyDown={e =>
+                !section.disabled && handleKeyDown(section.id, e, i)
+              }
               hoverStyles={themeValues.focusStyles}
               animate={openSection === section.id ? "open" : "closed"}
               initial={initiallyOpen ? "open" : "closed"}
@@ -124,6 +168,9 @@ const RadioSection = ({
               role="radio"
               aria-checked={openSection === section.id}
               aria-disabled={section.disabled}
+              aria-required={section.required}
+              aria-labelledby={section.id}
+              aria-describedby={`right-icons-${idString(section)}`}
             >
               <Stack childGap="0">
                 <Box
@@ -177,6 +224,7 @@ const RadioSection = ({
                                 : () => toggleOpenSection(section.id)
                             }
                             tabIndex="-1"
+                            isRequired={section.required}
                           />
                         </Box>
                       )}
@@ -195,9 +243,10 @@ const RadioSection = ({
                     </Cluster>
                     {section.rightIcons && (
                       <Cluster
+                        id={`right-icons-${idString(section)}`}
                         childGap="0.5rem"
-                        aria-label={section?.rightIconsLabel || null}
-                        role={section?.rightIconsRole || null}
+                        aria-label={section.rightIconsLabel || null}
+                        role={section.rightIconsRole || null}
                       >
                         {section.rightIcons.map(icon => (
                           <RightIcon

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

@@ -49,9 +49,10 @@ const sections = [
     title: "New Card",
     content: <p>The form to add a credit card would go here.</p>,
     rightIconsLabel: cardIconsLabel,
-    rightIcons: cardIcons
+    rightIcons: cardIcons,
+    required: true
   },
-  { id: "bar", title: "Bar", content: <div>Content 1</div> },
+  { id: "bar", title: "Bar", content: <div>Content 1</div>, required: true },
   { id: "baz", title: "Baz", content: <div>Content 2</div> }
 ];
 
@@ -65,6 +66,7 @@ export const radioSection = () => {
       openSection={openSection}
       staggeredAnimation={boolean("staggeredAnimation", false, "props")}
       sections={sections}
+      isSectionRequired={true}
     />
   );
 };

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

@@ -16,10 +16,11 @@ const RadioButton = ({
   toggleRadio,
   name,
   disabled = false,
-  ariaDescribedBy = "",
+  ariaDescribedBy,
   themeValues,
   ariaLabelledBy = "",
-  ariaLabel = null
+  ariaLabel = null,
+  isRequired = false
 }) => {
   const buttonBorder = {
     onFocused: {
@@ -93,6 +94,7 @@ const RadioButton = ({
         onClick={toggleRadio}
         aria-describedby={ariaDescribedBy}
         tabIndex="-1"
+        required={isRequired}
         {...extraProps}
       />
       <Motion

package/src/components/molecules/terms-and-conditions/TermsAndConditions.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { text, boolean } from "@storybook/addon-knobs";
+import { text, boolean, select } from "@storybook/addon-knobs";
 
 import TermsAndConditions from "./TermsAndConditions";
 import page from "../../../../.storybook/page";
@@ -9,11 +9,13 @@ const groupId = "props";
 
 export const termsAndConditions = () => (
   <TermsAndConditions
+    version={select("version", ["v1", "v2"], "v1", groupId)}
     onCheck={noop}
     isChecked={boolean("isChecked", false, groupId)}
     html={text("html", "terms and conditions summary", groupId)}
     terms={text("terms", "terms and conditions modal text", groupId)}
     error={boolean("error", false, groupId)}
+    description={text("description", "I definitely agree to the", groupId)}
   />
 );
 

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV2.js

@@ -11,6 +11,8 @@ import {
 import { generateShadows } from "../../../util/generateShadows";
 import { useScrollTo } from "../../../hooks";
 
+const TermsAndConditionsTitleDivId = "terms-and-conditions-title";
+
 const TermsAndConditionsControlV2 = ({
   showCheckbox = true,
   onCheck,
@@ -57,6 +59,7 @@ const TermsAndConditionsControlV2 = ({
               onChange={onCheck}
               checkboxMargin={checkboxMargin}
               extraStyles={`align-self: flex-start;`}
+              labelledById={TermsAndConditionsTitleDivId}
             />
           )}
           <Stack childGap="0.25rem" fullHeight>
@@ -65,6 +68,7 @@ const TermsAndConditionsControlV2 = ({
               align="center"
               nowrap
               extraStyles={`padding-right: 2px; > div > * { margin: 4px 2px; };`}
+              id={TermsAndConditionsTitleDivId}
             >
               {description && <Text color={CHARADE_GREY}>{description}</Text>}
               {terms && (

package/src/constants/keyboard.js

@@ -0,0 +1,7 @@
+export const ARROW_LEFT = 37;
+export const ARROW_UP = 38;
+export const ARROW_RIGHT = 39;
+export const ARROW_DOWN = 40;
+export const ENTER = 13;
+export const ESCAPE = 27;
+export const SPACEBAR = 32;

package/src/util/general.js

@@ -163,3 +163,13 @@ export const titleCaseString = string => {
 export const kebabCaseString = string => {
   return string?.replaceAll(" ", "-").toLowerCase();
 };
+
+export const wrapIndex = (index, length) => {
+  if (index <= -1) {
+    return length - 1;
+  } else if (index >= length) {
+    return 0;
+  } else {
+    return index;
+  }
+};