@thecb/components 9.2.10-beta.1 → 9.2.10-beta.10

package/package.json

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

@@ -33,7 +33,7 @@ const CheckboxIcon = styled.svg`
 const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
   border: 0;
   clip: rect(0 0 0 0);
-  clippath: inset(50%);
+  clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -116,13 +116,12 @@ const Checkbox = ({
       background={themeValues.backgroundColor}
       extraStyles={`outline: none; ${extraStyles}; margin: ${checkboxMargin};`}
     >
-      <CheckboxLabelContainer data-qa={dataQa}>
+      <CheckboxLabelContainer data-qa={dataQa} id={`${name}_label_container`}>
         <CheckboxContainer data-qa="Checkbox">
           <HiddenCheckbox
             id={`checkbox-${name}`}
             disabled={disabled}
             name={name}
-            aria-label={name}
             checked={checked}
             onChange={onChange}
             tabIndex="-1"
@@ -142,6 +141,9 @@ const Checkbox = ({
             disabledStyles={themeValues.disabledStyles}
             disabledCheckedStyles={themeValues.disabledCheckedStyles}
             focusedStyles={themeValues.focusedStyles}
+            aria-labelledby={
+              title ? `${name}_title_id` : `${name}_label_container`
+            }
           >
             <CheckboxIcon
               viewBox="0 0 24 24"
@@ -158,6 +160,7 @@ const Checkbox = ({
             variant="p"
             weight={themeValues.textFontWeight}
             color={themeValues.textColor}
+            id={`${name}_title_id`}
             extraStyles={
               textExtraStyles
                 ? `${textExtraStyles} ${disabled &&

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.js

@@ -50,6 +50,7 @@ const AccountAndRoutingModal = ({
       toggleAccepted(true);
       toggleOpen(false);
     }}
+    initialFocusSelector={"[name='Close']"}
   >
     <Text
       variant="pS"

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

@@ -46,8 +46,7 @@ const Modal = ({
   buttonExtraStyles,
   children,
   dataQa = null,
-  initialFocusSelector = "",
-  modalName = ""
+  initialFocusSelector = ""
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const modalContainerRef = useRef(null);
@@ -75,8 +74,8 @@ const Modal = ({
           }}
           underlayClickExits={underlayClickExits}
           aria-modal={true}
-          aria-name={!!modalName.length ? modalName : modalHeaderText}
           initialFocus={initialFocusSelector}
+          focusDialog={!initialFocusSelector} // Focus the dialogue box itself if no selector for initial focus was provided
         >
           <Box
             padding="0"

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

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

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

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

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

@@ -8,12 +8,7 @@ const TermsAndConditions = ({ version = "v1", ...rest }) => {
       ? TermsAndConditionsControlV1
       : TermsAndConditionsControlV2;
 
-  return (
-    <TermsAndConditionsControl
-      initialFocusSelector="[role='button']:not(.modal-trigger)"
-      {...rest}
-    />
-  );
+  return <TermsAndConditionsControl {...rest} />;
 };
 
 export default TermsAndConditions;

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

@@ -9,19 +9,29 @@ const groupId = "props";
 
 const Terms = () => (
   <p>
-    Terms and <a href="#">conditions</a> modal content.
+    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
     onCheck={noop}
+    title="Agree to the terms and conditions"
     isChecked={boolean("isChecked", false, groupId)}
-    html={text("html", "Terms and Conditions html", groupId)}
-    modalName="Terms and Conditions Modal"
     terms={<Terms />}
     error={boolean("error", false, groupId)}
-    initialFocusSelector="[role='button']:not(.modal-trigger)"
+    initialFocusSelector={text("initialFocusSelector", "#focus-me", groupId)}
   />
 );
 

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

@@ -11,7 +11,10 @@ const TermsAndConditionsControlV1 = ({
   terms,
   error = false,
   linkVariant,
-  initialFocusSelector = ""
+  initialFocusSelector = "",
+  id = "terms-and-conditions",
+  screenReaderCheckboxLabel = "",
+  ariaLabelledBy = ""
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   return (
@@ -23,10 +26,23 @@ 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">{html}</Box>
+            <Box padding="0" id={`${id}_html_label`}>
+              {html}
+            </Box>
             {terms && (
               <TermsAndConditionsModal
                 link="Learn More"

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { Fragment, useState } from "react";
 import Checkbox from "../../atoms/checkbox";
 import { Box, Stack, Cluster } from "../../atoms/layouts";
 import Text from "../../atoms/text";
@@ -27,7 +27,9 @@ const TermsAndConditionsControlV2 = ({
   containerBackground = ATHENS_GREY,
   checkboxMargin = "4px 8px 4px 4px",
   modalTitle = "Terms and Conditions",
-  initialFocusSelector = ""
+  initialFocusSelector = "",
+  screenReaderCheckboxLabel = "",
+  ariaLabelledBy = ""
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   const standardBoxShadow = generateShadows().standard.base;
@@ -48,17 +50,34 @@ const TermsAndConditionsControlV2 = ({
       borderRadius={displayInline ? "0" : "4px"}
     >
       <Stack childGap="0">
-        {html && <Box padding="0">{html}</Box>}
+        {html && (
+          <Box padding="0" id={`${id}_html_label`}>
+            {html}
+          </Box>
+        )}
         <Cluster justify="flex-start" align="center" nowrap>
           {showCheckbox && (
-            <Checkbox
-              name={id}
-              error={hasError}
-              checked={isChecked}
-              onChange={onCheck}
-              checkboxMargin={checkboxMargin}
-              extraStyles={`align-self: flex-start;`}
-            />
+            <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>
           )}
           <Stack childGap="0.25rem" fullHeight>
             <Cluster