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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.2.10-beta.1",
+  "version": "9.2.10-beta.11",
   "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;
@@ -95,7 +95,8 @@ const Checkbox = ({
   checkboxMargin = "0 16px 0 0",
   extraStyles,
   textExtraStyles,
-  dataQa = null
+  dataQa = null,
+  checkboxAriaLabel = ""
 }) => {
   const [focused, setFocused] = useState(false);
 
@@ -105,6 +106,10 @@ const Checkbox = ({
     }
   };
 
+  const checkboxProps = {
+    ...(checkboxAriaLabel ? { "aria-label": checkboxAriaLabel } : {})
+  };
+
   return (
     <Box
       padding="0"
@@ -122,7 +127,7 @@ const Checkbox = ({
             id={`checkbox-${name}`}
             disabled={disabled}
             name={name}
-            aria-label={name}
+            aria-label={checkboxAriaLabel || `${title} checkbox`}
             checked={checked}
             onChange={onChange}
             tabIndex="-1"
@@ -131,8 +136,11 @@ const Checkbox = ({
           />
           <StyledCheckbox
             role="checkbox"
+            name={name}
             error={error}
+            aria-invalid={error}
             disabled={disabled}
+            aria-disabled={disabled}
             checked={checked}
             aria-checked={checked}
             focused={focused}
@@ -142,6 +150,7 @@ const Checkbox = ({
             disabledStyles={themeValues.disabledStyles}
             disabledCheckedStyles={themeValues.disabledCheckedStyles}
             focusedStyles={themeValues.focusedStyles}
+            {...checkboxProps}
           >
             <CheckboxIcon
               viewBox="0 0 24 24"

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

@@ -19,6 +19,11 @@ export const checkbox = () => (
     error={boolean("error", false, "props")}
     disabled={boolean("disabled", false, "props")}
     focused={boolean("focused", false, "props")}
+    checkboxAriaLabel={text(
+      "checkboxAriaLabel",
+      "Checkbox Label Prop",
+      groupId
+    )}
   />
 );
 

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,7 +9,18 @@ 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>
 );
 
@@ -17,11 +28,10 @@ export const termsAndConditions = () => (
   <TermsAndConditions
     onCheck={noop}
     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)}
+    checkboxAriaLabel="I agree to the Terms and Conditions"
   />
 );
 

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

@@ -11,7 +11,8 @@ const TermsAndConditionsControlV1 = ({
   terms,
   error = false,
   linkVariant,
-  initialFocusSelector = ""
+  initialFocusSelector = "",
+  checkboxAriaLabel = ""
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   return (
@@ -23,6 +24,7 @@ const TermsAndConditionsControlV1 = ({
           error={error}
           checked={isChecked}
           onChange={onCheck}
+          aria-label={checkboxAriaLabel}
         />
         <Box padding="0 0 0 58px">
           <Stack>

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

@@ -27,7 +27,8 @@ const TermsAndConditionsControlV2 = ({
   containerBackground = ATHENS_GREY,
   checkboxMargin = "4px 8px 4px 4px",
   modalTitle = "Terms and Conditions",
-  initialFocusSelector = ""
+  initialFocusSelector = "",
+  checkboxAriaLabel = ""
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   const standardBoxShadow = generateShadows().standard.base;
@@ -58,6 +59,7 @@ const TermsAndConditionsControlV2 = ({
               onChange={onCheck}
               checkboxMargin={checkboxMargin}
               extraStyles={`align-self: flex-start;`}
+              aria-label={checkboxAriaLabel}
             />
           )}
           <Stack childGap="0.25rem" fullHeight>