@thecb/components 9.2.11 → 9.2.13-beta.0

package/package.json

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

package/src/components/atoms/checkbox/Checkbox.js

@@ -95,7 +95,6 @@ const Checkbox = ({
   checkboxMargin = "0 16px 0 0",
   extraStyles,
   textExtraStyles,
-  labelledById,
   dataQa = null
 }) => {
   const [focused, setFocused] = useState(false);
@@ -106,10 +105,6 @@ const Checkbox = ({
     }
   };
 
-  const titleId = title ? `checkboxlabel-${name}` : undefined;
-  const ariaLabelledById = labelledById ?? titleId;
-  const ariaLabel = ariaLabelledById ? undefined : name;
-
   return (
     <Box
       padding="0"
@@ -127,8 +122,7 @@ const Checkbox = ({
             id={`checkbox-${name}`}
             disabled={disabled}
             name={name}
-            aria-label={ariaLabel}
-            aria-labelledby={ariaLabelledById}
+            aria-label={name}
             checked={checked}
             onChange={onChange}
             tabIndex="-1"
@@ -161,7 +155,6 @@ const Checkbox = ({
         </CheckboxContainer>
         {title && (
           <Text
-            id={titleId}
             variant="p"
             weight={themeValues.textFontWeight}
             color={themeValues.textColor}

package/src/components/atoms/checkbox/Checkbox.stories.js

@@ -19,7 +19,6 @@ export const checkbox = () => (
     error={boolean("error", false, "props")}
     disabled={boolean("disabled", false, "props")}
     focused={boolean("focused", false, "props")}
-    labelledById={text("labelledById", undefined, "props")}
   />
 );
 

package/src/components/atoms/dropdown/Dropdown.js

@@ -318,10 +318,9 @@ const Dropdown = ({
     >
       <Box
         as="input"
-        aria-multiline="false"
         autoComplete={autocompleteValue}
         aria-controls={`${ariaLabelledby}_listbox`}
-        aria-activedescendant="focused_option"
+        aria-activedescendant={isOpen ? "focused_option" : undefined}
         aria-owns={`${ariaLabelledby}_listbox`}
         aria-haspopup="listbox"
         aria-labelledby={ariaLabelledby}

package/src/components/atoms/layouts/Motion.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from "react";
+import React, { Fragment, forwardRef } from "react";
 import { MotionWrapper } from "./Motion.styled";
 import { safeChildren } from "../../../util/general";
 
@@ -37,15 +37,12 @@ import { safeChildren } from "../../../util/general";
   This should be sufficient for most scenarios, but if you need to, you have the ability to make Motion act like all of the other primitives using the props provided.
 */
 
-export const Motion = ({
-  position = "relative",
-  padding = "0",
-  children,
-  ...rest
-}) => (
-  <MotionWrapper position={position} padding={padding} {...rest}>
-    {safeChildren(children, <Fragment />)}
-  </MotionWrapper>
+export const Motion = forwardRef(
+  ({ position = "relative", padding = "0", children, ...rest }, ref) => (
+    <MotionWrapper position={position} padding={padding} ref={ref} {...rest}>
+      {safeChildren(children, <Fragment />)}
+    </MotionWrapper>
+  )
 );
 
 export default Motion;

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

@@ -1,4 +1,4 @@
-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";
@@ -48,12 +48,36 @@ const RadioSection = ({
   openHeight = "auto",
   containerStyles = "",
   ariaDescribedBy,
-  isSectionRequired = false
+  isSectionRequired = false,
+  ...rest
 }) => {
-  const handleKeyDown = (id, e) => {
+  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 === 13 || e?.keyCode === 32) {
+      e.preventDefault();
       toggleOpenSection(id);
     }
+
+    // Allow Up and Down arrow navigation between sections
+    if (e?.keyCode >= 37 && e?.keyCode <= 40) {
+      e.preventDefault();
+      const next = i + (e?.keyCode > 38 ? 1 : -1);
+      const target =
+        next == -1 ? sections.length - 1 : next == sections.length ? 0 : next;
+
+      sectionRefs.current[target].current.focus();
+      setFocused(sections[target]?.id);
+      toggleOpenSection(sections[target]?.id);
+    }
   };
 
   const wrapper = {
@@ -97,8 +121,6 @@ const RadioSection = ({
     transition: opacity 0.3s ease;
   `;
 
-  const [focused, setFocused] = useState(null);
-
   return (
     <Box
       padding="1px"
@@ -108,19 +130,23 @@ const RadioSection = ({
     >
       <Stack
         childGap="0"
-        aria-role="radiogroup"
+        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"}
@@ -129,7 +155,9 @@ const RadioSection = ({
               role="radio"
               aria-checked={openSection === section.id}
               aria-disabled={section.disabled}
-              aria-required={section?.required}
+              aria-required={section.required}
+              aria-labelledby={section.id}
+              aria-describedby={`right-icons-${idString(section)}`}
             >
               <Stack childGap="0">
                 <Box
@@ -183,7 +211,7 @@ const RadioSection = ({
                                 : () => toggleOpenSection(section.id)
                             }
                             tabIndex="-1"
-                            isRequired={section?.required}
+                            isRequired={section.required}
                           />
                         </Box>
                       )}
@@ -202,9 +230,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/radio-button/RadioButton.js

@@ -16,7 +16,7 @@ const RadioButton = ({
   toggleRadio,
   name,
   disabled = false,
-  ariaDescribedBy = "",
+  ariaDescribedBy,
   themeValues,
   ariaLabelledBy = "",
   ariaLabel = null,

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { text, boolean, select } from "@storybook/addon-knobs";
+import { text, boolean } from "@storybook/addon-knobs";
 
 import TermsAndConditions from "./TermsAndConditions";
 import page from "../../../../.storybook/page";
@@ -9,13 +9,11 @@ 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,8 +11,6 @@ import {
 import { generateShadows } from "../../../util/generateShadows";
 import { useScrollTo } from "../../../hooks";
 
-const TermsAndConditionsTitleDivId = "terms-and-conditions-title";
-
 const TermsAndConditionsControlV2 = ({
   showCheckbox = true,
   onCheck,
@@ -59,7 +57,6 @@ const TermsAndConditionsControlV2 = ({
               onChange={onCheck}
               checkboxMargin={checkboxMargin}
               extraStyles={`align-self: flex-start;`}
-              labelledById={TermsAndConditionsTitleDivId}
             />
           )}
           <Stack childGap="0.25rem" fullHeight>
@@ -68,7 +65,6 @@ const TermsAndConditionsControlV2 = ({
               align="center"
               nowrap
               extraStyles={`padding-right: 2px; > div > * { margin: 4px 2px; };`}
-              id={TermsAndConditionsTitleDivId}
             >
               {description && <Text color={CHARADE_GREY}>{description}</Text>}
               {terms && (