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

package/package.json

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

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

@@ -109,6 +109,7 @@ const Checkbox = forwardRef(
       dataQa = null,
       checkboxExtraStyles,
       hasIconOverride = false,
+      customAriaLabel,
       icon: Icon,
       ...rest
     },
@@ -151,7 +152,7 @@ const Checkbox = forwardRef(
               tabIndex="0"
               required={isRequired}
               aria-invalid={error}
-              aria-label={ariaLabel}
+              aria-label={customAriaLabel || ariaLabel}
               aria-labelledby={labelledById}
               aria-describedby={error ? `${name}-error-message` : undefined}
               onKeyDown={e => handleClick(e, onChange)}

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

@@ -21,6 +21,7 @@ const meta = {
     extraStyles: undefined,
     textExtraStyles: undefined,
     labelledById: undefined,
+    customAriaLabel: undefined,
     dataQa: null
   },
   argTypes: {
@@ -52,6 +53,13 @@ const meta = {
         type: { summary: "string" }
       }
     },
+    customAriaLabel: {
+      table: {
+        description:
+          "Overrides the default aria-label. Useful when the checkbox needs a  descriptive accessible name other than the `name` prop provides.",
+        type: { summary: "string" }
+      }
+    },
     extraStyles: {
       table: {
         type: { summary: "string" }
@@ -153,3 +161,11 @@ export const Hidden = {
   },
   render: args => <CheckboxWithHooks {...args} />
 };
+
+export const WithCustomAriaLabel = {
+  args: {
+    customAriaLabel: "Custom aria label",
+    title: "A different label"
+  },
+  render: args => <CheckboxWithHooks {...args} />
+};

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

@@ -186,6 +186,7 @@ const PaymentFormACH = ({
           <Checkbox
             name="bank checkbox"
             dataQa="Save checking account to wallet"
+            customAriaLabel="Save checking account to wallet (optional)."
             title={
               <>
                 Save checking account to wallet (optional).{" "}
@@ -198,6 +199,7 @@ const PaymentFormACH = ({
                       isOpen={showTermsModal}
                       toggleOpen={toggleTermsModal}
                       initialFocusSelector=".modal-close-button"
+                      linkExtraStyles="display: inline-block;"
                     />
                   </span>
                 )}

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

@@ -210,6 +210,7 @@ const PaymentFormCard = ({
           <Checkbox
             name="credit card checkbox"
             dataQa="Save credit card to wallet"
+            customAriaLabel="Save credit card to wallet (optional)."
             title={
               <>
                 Save credit card to wallet (optional).{" "}
@@ -222,6 +223,7 @@ const PaymentFormCard = ({
                       isOpen={showTermsModal}
                       toggleOpen={toggleTermsModal}
                       initialFocusSelector=".modal-close-button"
+                      linkExtraStyles="display: inline-block;"
                     />
                   </span>
                 )}

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

@@ -16,7 +16,8 @@ const TermsAndConditionsModal = ({
   variant,
   linkVariant = "p",
   themeValues,
-  initialFocusSelector = ""
+  initialFocusSelector = "",
+  linkExtraStyles = ""
 }) => (
   <Modal
     modalOpen={isOpen}
@@ -54,7 +55,7 @@ const TermsAndConditionsModal = ({
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
       textDecoration={themeValues.modalLinkTextDecoration}
-      extraStyles={`display: inline-block; width: fit-content; cursor: pointer; min-height: 24px; line-height: 24px;`}
+      extraStyles={`display: inline-block; width: fit-content; cursor: pointer; min-height: 24px; line-height: 24px; ${linkExtraStyles}`}
       role="button" // This should always be a "button" since it opens a modal
       className="modal-trigger"
     >