@thecb/components 12.1.0-beta.7 → 12.1.0-beta.8

package/package.json

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

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

@@ -126,8 +126,11 @@ const Checkbox = forwardRef(
     const normalizedName = name ? name.replace(/\s+/g, "-") : name;
     const checkboxId = `checkbox-${normalizedName}`;
     const titleId = title ? `checkboxlabel-${normalizedName}` : undefined;
-    // aria-label fallback when no visible title or external labelledById is provided
-    const ariaLabel = !labelledById && !title ? name : undefined;
+    // aria-label: customAriaLabel wins, but only when no external labelledById is provided
+    // (aria-labelledby takes precedence per spec, so aria-label would be silently ignored)
+    const resolvedAriaLabel = labelledById
+      ? undefined
+      : customAriaLabel || (!title ? name : undefined);
 
     return (
       <Box
@@ -152,7 +155,7 @@ const Checkbox = forwardRef(
               tabIndex="0"
               required={isRequired}
               aria-invalid={error}
-              aria-label={customAriaLabel || ariaLabel}
+              aria-label={resolvedAriaLabel}
               aria-labelledby={labelledById}
               aria-describedby={error ? `${name}-error-message` : undefined}
               onKeyDown={e => handleClick(e, onChange)}

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

@@ -56,7 +56,7 @@ const meta = {
     customAriaLabel: {
       table: {
         description:
-          "Overrides the default aria-label. Useful when the checkbox needs a  descriptive accessible name other than the `name` prop provides.",
+          "Overrides the default aria-label. Useful when the checkbox needs a descriptive accessible name other than the `name` prop provides.",
         type: { summary: "string" }
       }
     },

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

@@ -48,7 +48,9 @@ const Modal = ({
   children,
   dataQa = null,
   initialFocusSelector = "",
-  blurUnderlay = true
+  blurUnderlay = true,
+  controlLabel = "",
+  controlExtraStyles = ""
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -67,7 +69,13 @@ const Modal = ({
   const modalContainerRef = useRef("#react-aria-modal-dialog");
 
   return (
-    <div ref={modalContainerRef} tabIndex="-1" data-qa={dataQa}>
+    <div
+      ref={modalContainerRef}
+      tabIndex="-1"
+      data-qa={dataQa}
+      style={{ display: "inline" }}
+      aria-label={controlLabel}
+    >
       {modalOpen && (
         <AriaModal
           focusTrapOptions={{

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

@@ -14,7 +14,6 @@ import {
 } from "../../atoms/form-layouts";
 import AccountAndRoutingModal from "../account-and-routing-modal";
 import { noop } from "../../../util/general";
-import { Cluster } from "../../atoms/layouts";
 import TermsAndConditions from "../terms-and-conditions";
 import TermsAndConditionsModal from "../terms-and-conditions-modal";
 import { useScrollTo } from "../../../hooks";
@@ -189,9 +188,12 @@ const PaymentFormACH = ({
             customAriaLabel="Save checking account to wallet (optional)."
             title={
               <>
-                Save checking account to wallet (optional).{" "}
+                <span>Save checking account to wallet (optional). </span>
                 {showTerms && (
-                  <span onClick={e => e.stopPropagation()}>
+                  <span
+                    onClick={e => e.stopPropagation()}
+                    style={{ display: "inline" }}
+                  >
                     View{" "}
                     <TermsAndConditionsModal
                       link="Terms and Conditions"
@@ -199,7 +201,9 @@ const PaymentFormACH = ({
                       isOpen={showTermsModal}
                       toggleOpen={toggleTermsModal}
                       initialFocusSelector=".modal-close-button"
-                      linkExtraStyles="display: inline-block;"
+                      linkExtraStyles="display: inline;"
+                      modalControlLabel="View Terms and Conditions"
+                      modalControlExtraStyles="display: inline;"
                     />
                   </span>
                 )}

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

@@ -27,7 +27,7 @@ import {
   FormContainer,
   FormInputRow
 } from "../../atoms/form-layouts";
-import { Box, Cluster } from "../../atoms/layouts";
+import { Box } from "../../atoms/layouts";
 import withWindowSize from "../../withWindowSize";
 import TermsAndConditions from "../terms-and-conditions";
 import TermsAndConditionsModal from "../terms-and-conditions-modal";
@@ -213,9 +213,12 @@ const PaymentFormCard = ({
             customAriaLabel="Save credit card to wallet (optional)."
             title={
               <>
-                Save credit card to wallet (optional).{" "}
+                <span>Save credit card to wallet (optional). </span>
                 {showTerms && (
-                  <span onClick={e => e.stopPropagation()}>
+                  <span
+                    onClick={e => e.stopPropagation()}
+                    style={{ display: "inline-block" }}
+                  >
                     View{" "}
                     <TermsAndConditionsModal
                       link="Terms and Conditions"
@@ -223,7 +226,9 @@ const PaymentFormCard = ({
                       isOpen={showTermsModal}
                       toggleOpen={toggleTermsModal}
                       initialFocusSelector=".modal-close-button"
-                      linkExtraStyles="display: inline-block;"
+                      linkExtraStyles="display: inline;"
+                      modalControlLabel="View Terms and Conditions"
+                      modalControlExtraStyles="display: inline;"
                     />
                   </span>
                 )}

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

@@ -17,7 +17,9 @@ const TermsAndConditionsModal = ({
   linkVariant = "p",
   themeValues,
   initialFocusSelector = "",
-  linkExtraStyles = ""
+  linkExtraStyles = "",
+  modalControlLabel,
+  modalControlExtraStyles = ""
 }) => (
   <Modal
     modalOpen={isOpen}
@@ -45,6 +47,8 @@ const TermsAndConditionsModal = ({
       toggleOpen(false);
     }}
     initialFocusSelector={initialFocusSelector}
+    controlLabel={modalControlLabel}
+    controlExtraStyles={modalControlExtraStyles}
   >
     <Text
       variant={linkVariant}