@thecb/components 11.1.15-beta.2 → 11.1.15-beta.4

package/package.json

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

package/src/components/atoms/form-layouts/FormInput.js

@@ -98,6 +98,7 @@ const FormattedInputField = styled(({ showErrors, themeValues, ...props }) => (
 `;
 
 const FormInput = ({
+  ariaLabelledBy = undefined,
   type = "text",
   labelDisplayOverride = null,
   labelTextWhenNoError = "",
@@ -217,7 +218,11 @@ const FormInput = ({
       <Box padding="0">
         {formatter ? (
           <FormattedInputField
-            aria-labelledby={createIdFromString(labelTextWhenNoError)}
+            aria-labelledby={
+              ariaLabelledBy === undefined
+                ? createIdFromString(labelTextWhenNoError)
+                : ariaLabelledBy
+            }
             aria-describedby={createIdFromString(
               labelTextWhenNoError,
               "error message"
@@ -254,7 +259,11 @@ const FormInput = ({
           />
         ) : (
           <InputField
-            aria-labelledby={createIdFromString(labelTextWhenNoError)}
+            aria-labelledby={
+              ariaLabelledBy === undefined
+                ? createIdFromString(labelTextWhenNoError)
+                : ariaLabelledBy
+            }
             aria-describedby={createIdFromString(
               labelTextWhenNoError,
               "error message"

package/src/components/molecules/partial-amount-form/PartialAmountField.js

@@ -13,49 +13,59 @@ const PartialAmountField = ({
   moneyFormat,
   fieldActions,
   themeValues
-}) => (
-  <FormInput
-    labelTextWhenNoError={createIdFromString(
-      `${lineItem.description}-${lineItem.subDescription}`
-    )}
-    labelDisplayOverride={
-      <Stack childGap="0px">
-        <Detail
-          as="label"
-          for={createIdFromString(
-            `${lineItem.description}-${lineItem.subDescription}`
-          )}
-          variant={themeValues.detailVariant}
-          weight={themeValues.weightTitle}
-        >
-          <Detail as="span" variant={themeValues.detailVariant} weight="400">
-            {lineItem.subDescription}
-          </Detail>
-          <Box padding="0">{lineItem.description}</Box>
-        </Detail>
-      </Stack>
-    }
-    key={lineItem.id}
-    field={field}
-    fieldActions={fieldActions}
-    showErrors={showErrors}
-    errorMessages={errorMessages}
-    style={{ textAlign: "right" }}
-    placeholder="$0.00"
-    formatter={moneyFormat}
-    isNum
-    decorator={
-      <Text variant="p">
-        Amount owed:{"  "}
-        {
-          <Text variant="p" weight="600">
-            {displayCurrency(lineItem.amount)}
-          </Text>
-        }
-      </Text>
-    }
-  />
-);
+}) => {
+  const id = createIdFromString(
+    `${lineItem.description}-${lineItem.subDescription}`
+  );
+  return (
+    <FormInput
+      ariaLabelledBy={null}
+      id={id}
+      labelTextWhenNoError={id}
+      labelDisplayOverride={
+        <Stack childGap="0px">
+          <Box as="label" for={id} padding="0">
+            <Detail
+              as="span"
+              extraStyles="display: block;"
+              variant={themeValues.detailVariant}
+              weight={themeValues.weightTitle}
+            >
+              {lineItem.description}
+            </Detail>
+            <Detail
+              as="span"
+              extraStyles="display: block;"
+              variant={themeValues.detailVariant}
+              weight="400"
+            >
+              {lineItem.subDescription}
+            </Detail>
+          </Box>
+        </Stack>
+      }
+      key={lineItem.id}
+      field={field}
+      fieldActions={fieldActions}
+      showErrors={showErrors}
+      errorMessages={errorMessages}
+      style={{ textAlign: "right" }}
+      placeholder="$0.00"
+      formatter={moneyFormat}
+      isNum
+      decorator={
+        <Text variant="p">
+          Amount owed:{"  "}
+          {
+            <Text variant="p" weight="600">
+              {displayCurrency(lineItem.amount)}
+            </Text>
+          }
+        </Text>
+      }
+    />
+  );
+};
 
 function arePropsEqual(prevProps, nextProps) {
   return (