@thecb/components 9.2.10-beta.9 → 9.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.2.10-beta.9",
+  "version": "9.2.10",
   "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,6 +95,7 @@ const Checkbox = ({
   checkboxMargin = "0 16px 0 0",
   extraStyles,
   textExtraStyles,
+  labelledById,
   dataQa = null
 }) => {
   const [focused, setFocused] = useState(false);
@@ -105,6 +106,10 @@ const Checkbox = ({
     }
   };
 
+  const titleId = title ? `checkboxlabel-${name}` : undefined;
+  const ariaLabelledById = labelledById ?? titleId;
+  const ariaLabel = ariaLabelledById ? undefined : name;
+
   return (
     <Box
       padding="0"
@@ -116,12 +121,14 @@ const Checkbox = ({
       background={themeValues.backgroundColor}
       extraStyles={`outline: none; ${extraStyles}; margin: ${checkboxMargin};`}
     >
-      <CheckboxLabelContainer data-qa={dataQa} id={`${id}_label_container`}>
+      <CheckboxLabelContainer data-qa={dataQa}>
         <CheckboxContainer data-qa="Checkbox">
           <HiddenCheckbox
             id={`checkbox-${name}`}
             disabled={disabled}
             name={name}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledById}
             checked={checked}
             onChange={onChange}
             tabIndex="-1"
@@ -141,9 +148,6 @@ const Checkbox = ({
             disabledStyles={themeValues.disabledStyles}
             disabledCheckedStyles={themeValues.disabledCheckedStyles}
             focusedStyles={themeValues.focusedStyles}
-            aria-labelledby={
-              title ? `${name}_title_id` : `${id}_label_container`
-            }
           >
             <CheckboxIcon
               viewBox="0 0 24 24"
@@ -157,10 +161,10 @@ const Checkbox = ({
         </CheckboxContainer>
         {title && (
           <Text
+            id={titleId}
             variant="p"
             weight={themeValues.textFontWeight}
             color={themeValues.textColor}
-            id={`${name}_title_id`}
             extraStyles={
               textExtraStyles
                 ? `${textExtraStyles} ${disabled &&

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

@@ -19,6 +19,7 @@ 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/molecules/account-and-routing-modal/AccountAndRoutingModal.js

@@ -50,7 +50,6 @@ const AccountAndRoutingModal = ({
       toggleAccepted(true);
       toggleOpen(false);
     }}
-    initialFocusSelector={"[name='Close']"}
   >
     <Text
       variant="pS"
@@ -61,8 +60,6 @@ const AccountAndRoutingModal = ({
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
       extraStyles={`cursor: pointer;`}
-      role="button"
-      className="modal-trigger"
     >
       {link}
     </Text>

package/src/components/molecules/modal/Modal.js

@@ -45,12 +45,10 @@ const Modal = ({
   isLoading,
   buttonExtraStyles,
   children,
-  dataQa = null,
-  initialFocusSelector = ""
+  dataQa = null
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const modalContainerRef = useRef(null);
-
   return (
     <div ref={modalContainerRef} data-qa={dataQa}>
       {modalOpen && (
@@ -73,9 +71,6 @@ const Modal = ({
             overflow: "auto"
           }}
           underlayClickExits={underlayClickExits}
-          aria-modal={true}
-          initialFocus={initialFocusSelector}
-          focusDialog={!initialFocusSelector} // Focus the dialogue box itself if no selector for initial focus was provided
         >
           <Box
             padding="0"
@@ -130,8 +125,6 @@ const Modal = ({
                                     dataQa={cancelButtonText}
                                     extraStyles={buttonExtraStyles}
                                     className="modal-cancel-button"
-                                    role="button"
-                                    name={cancelButtonText}
                                   />
                                 </Box>
                                 <Box width="100%" padding="0">
@@ -146,8 +139,6 @@ const Modal = ({
                                     disabled={isContinueActionDisabled}
                                     extraStyles={buttonExtraStyles}
                                     className="modal-continue-button"
-                                    role="button"
-                                    name={continueButtonText}
                                   />
                                 </Box>
                               </Stack>
@@ -166,8 +157,6 @@ const Modal = ({
                                   dataQa={cancelButtonText}
                                   extraStyles={buttonExtraStyles}
                                   className="modal-cancel-button"
-                                  role="button"
-                                  name={cancelButtonText}
                                 />
                                 <ButtonWithAction
                                   variant={
@@ -180,8 +169,6 @@ const Modal = ({
                                   disabled={isContinueActionDisabled}
                                   extraStyles={buttonExtraStyles}
                                   className="modal-continue-button"
-                                  role="button"
-                                  name={continueButtonText}
                                 />
                               </Stack>
                             )}
@@ -195,8 +182,6 @@ const Modal = ({
                               dataQa={closeButtonText}
                               extraStyles={buttonExtraStyles}
                               className="modal-close-button"
-                              role="button"
-                              name={closeButtonText}
                             />
                           </Box>
                         )}

package/src/components/molecules/payment-form-ach/PaymentFormACH.js

@@ -188,7 +188,6 @@ const PaymentFormACH = ({
                   showCheckbox={false}
                   description="View"
                   terms={termsContent}
-                  initialFocusSelector={".modal-close-button"}
                 />
               </Cover>
             )}

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -210,7 +210,6 @@ const PaymentFormCard = ({
                   showCheckbox={false}
                   description="View"
                   terms={termsContent}
-                  initialFocusSelector={".modal-close-button"}
                 />
               </Cover>
             )}

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";
@@ -7,31 +7,15 @@ import { noop } from "../../../util/general";
 
 const groupId = "props";
 
-const Terms = () => (
-  <p>
-    Modal Content: Elit voluptate cupidatat in pariatur anim in excepteur non.{" "}
-    <a href="#modal-bottom" id="focus-me">
-      Laboris elit laboris labore pariatur incididunt
-    </a>{" "}
-    proident occaecat laboris sit elit. Dolor irure enim adipisicing irure
-    consectetur dolor enim eiusmod elit eiusmod ut. Pariatur ut quis et pariatur
-    nulla nostrud sit esse. Veniam est occaecat cupidatat est nulla dolor minim
-    nostrud anim ea voluptate. modal content. Elit voluptate cupidatat in
-    pariatur anim in excepteur non. Laboris elit laboris labore pariatur
-    incididunt proident occaecat laboris sit elit. Dolor irure enim adipisicing
-    irure consectetur dolor enim eiusmod elit eiusmod ut. Pariatur ut quis et
-    pariatur nulla nostrud sit esse.
-  </p>
-);
-
 export const termsAndConditions = () => (
   <TermsAndConditions
+    version={select("version", ["v1", "v2"], "v1", groupId)}
     onCheck={noop}
-    title="Agree to the terms and conditions"
     isChecked={boolean("isChecked", false, groupId)}
-    terms={<Terms />}
+    html={text("html", "terms and conditions summary", groupId)}
+    terms={text("terms", "terms and conditions modal text", groupId)}
     error={boolean("error", false, groupId)}
-    initialFocusSelector={text("initialFocusSelector", "#focus-me", groupId)}
+    description={text("description", "I definitely agree to the", groupId)}
   />
 );
 

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

@@ -10,11 +10,7 @@ const TermsAndConditionsControlV1 = ({
   html,
   terms,
   error = false,
-  linkVariant,
-  initialFocusSelector = "",
-  id = "terms-and-conditions",
-  screenReaderCheckboxLabel = "",
-  ariaLabelledBy = ""
+  linkVariant
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   return (
@@ -26,23 +22,10 @@ const TermsAndConditionsControlV1 = ({
           error={error}
           checked={isChecked}
           onChange={onCheck}
-          aria-labelledby={
-            ariaLabelledBy ||
-            (screenReaderCheckboxLabel
-              ? `${id}_sr_only_label`
-              : `${id}_html_label`)
-          }
         />
         <Box padding="0 0 0 58px">
-          {screenReaderCheckboxLabel && (
-            <span className="sr-only-text" id={`${id}_sr_only_label`}>
-              {screenReaderCheckboxLabel}
-            </span>
-          )}
           <Stack>
-            <Box padding="0" id={`${id}_html_label`}>
-              {html}
-            </Box>
+            <Box padding="0">{html}</Box>
             {terms && (
               <TermsAndConditionsModal
                 link="Learn More"
@@ -50,7 +33,6 @@ const TermsAndConditionsControlV1 = ({
                 isOpen={showTerms}
                 toggleOpen={toggleShowTerms}
                 linkVariant={linkVariant}
-                initialFocusSelector={initialFocusSelector}
               />
             )}
           </Stack>

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

@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from "react";
+import React, { useState } from "react";
 import Checkbox from "../../atoms/checkbox";
 import { Box, Stack, Cluster } from "../../atoms/layouts";
 import Text from "../../atoms/text";
@@ -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,
@@ -26,10 +28,7 @@ const TermsAndConditionsControlV2 = ({
   modalVariant = "default",
   containerBackground = ATHENS_GREY,
   checkboxMargin = "4px 8px 4px 4px",
-  modalTitle = "Terms and Conditions",
-  initialFocusSelector = "",
-  screenReaderCheckboxLabel = "",
-  ariaLabelledBy = ""
+  modalTitle = "Terms and Conditions"
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   const standardBoxShadow = generateShadows().standard.base;
@@ -50,34 +49,18 @@ const TermsAndConditionsControlV2 = ({
       borderRadius={displayInline ? "0" : "4px"}
     >
       <Stack childGap="0">
-        {html && (
-          <Box padding="0" id={`${id}_html_label`}>
-            {html}
-          </Box>
-        )}
+        {html && <Box padding="0">{html}</Box>}
         <Cluster justify="flex-start" align="center" nowrap>
           {showCheckbox && (
-            <Fragment>
-              <Checkbox
-                name={id}
-                error={hasError}
-                checked={isChecked}
-                onChange={onCheck}
-                checkboxMargin={checkboxMargin}
-                extraStyles={`align-self: flex-start;`}
-                aria-labelledby={
-                  ariaLabelledBy ||
-                  (screenReaderCheckboxLabel
-                    ? `${id}_sr_only_label`
-                    : `${id}_html_label`)
-                }
-              />
-              {screenReaderCheckboxLabel && (
-                <span className="sr-only-text" id={`${id}_sr_only_label`}>
-                  {screenReaderCheckboxLabel}
-                </span>
-              )}
-            </Fragment>
+            <Checkbox
+              name={id}
+              error={hasError}
+              checked={isChecked}
+              onChange={onCheck}
+              checkboxMargin={checkboxMargin}
+              extraStyles={`align-self: flex-start;`}
+              labelledById={TermsAndConditionsTitleDivId}
+            />
           )}
           <Stack childGap="0.25rem" fullHeight>
             <Cluster
@@ -85,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 && (
@@ -95,7 +79,6 @@ const TermsAndConditionsControlV2 = ({
                   toggleOpen={toggleTerms}
                   linkVariant={modalVariant}
                   title={modalTitle}
-                  initialFocusSelector={initialFocusSelector}
                 />
               )}
             </Cluster>

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -15,8 +15,7 @@ const TermsAndConditionsModal = ({
   terms,
   variant,
   linkVariant = "p",
-  themeValues,
-  initialFocusSelector = ""
+  themeValues
 }) => (
   <Modal
     modalOpen={isOpen}
@@ -43,7 +42,6 @@ const TermsAndConditionsModal = ({
       toggleAccepted(true);
       toggleOpen(false);
     }}
-    initialFocusSelector={initialFocusSelector}
   >
     <Text
       variant={linkVariant}
@@ -54,8 +52,6 @@ const TermsAndConditionsModal = ({
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
       extraStyles={`display: inline-block; width: fit-content; cursor: pointer`}
-      role="button" // This should always be a "button" since it opens a modal
-      className="modal-trigger"
     >
       {link}
     </Text>

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

@@ -20,22 +20,17 @@ const linkVariants = {
   pXL: "PXL"
 };
 
-const Terms = () => (
-  <p>
-    Terms content with a <a href="#">link</a> that should NOT get initial focus.
-    Instead, the <code>Cancel</code> button below should.
-  </p>
-);
 export const termsAndConditionsModal = () => (
   <TermsAndConditionsModal
     link={text("text", "Show modal", groupId)}
     title={text("title", "Title", groupId)}
     isOpen={boolean("isOpen", false, groupId)}
+    // toggleOpen={setShowTerms}
+    // toggleAccepted={toggleTermsAccepted}
     acceptText={text("acceptText", "Accept", groupId)}
-    terms={<Terms />}
+    terms={text("terms", "terms and conditions", groupId)}
     variant={select("variants", variants, "default", groupId)}
     linkVariant={select("linkVariants", linkVariants, groupId)}
-    initialFocusSelector="[name='Cancel']"
   />
 );