fix: connected labels to inputs, improving accessibility and testability

2025-02-28 14:59:17 -05:00
parent 593c08f3e0
commit fa85e83817
8 changed files with 34 additions and 21 deletions
@@ -98,24 +98,27 @@ export function DynamicForm<T extends FieldValues>({
            <Subtle>{fieldGroup.description}</Subtle>
          </div>

-          {fieldGroup.fields.map((field) => (
-            <FieldWrapper
-              key={field.label}
-              label={field.label}
-              description={field.description}
-              valid={
-                field.validationText === undefined ||
-                field.validationText === ""
-              }
-              validationText={field.validationText}
-            >
-              <DynamicFormField
-                field={field}
-                control={control}
-                disabled={isDisabled(field.disabledBy, field.disabled)}
-              />
-            </FieldWrapper>
-          ))}
+          {fieldGroup.fields.map((field) => {
+            return (
+              <FieldWrapper
+                key={field.label}
+                label={field.label}
+                fieldName={field.name}
+                description={field.description}
+                valid={
+                  field.validationText === undefined ||
+                  field.validationText === ""
+                }
+                validationText={field.validationText}
+              >
+                <DynamicFormField
+                  field={field}
+                  control={control}
+                  disabled={isDisabled(field.disabledBy, field.disabled)}
+                />
+              </FieldWrapper>
+            );
+          })}
        </div>
      ))}
      {hasSubmitButton && <Button type="submit">Submit</Button>}