ariaDescribedBy is missing in field

[mnlfischer]

I am using valibot and the future api and try to follow the shadcn ui example.

Do I miss something here?

Error accessing ariaDescribedBy:

Property 'ariaDescribedBy' does not exist on type 'Readonly<Readonly<ValidationAttributes & { id: string; descriptionId: string; errorId: string; formId: string; defaultValue: string | undefined; defaultOptions: string[] | undefined; ... 5 more ...; fieldErrors: Record<...>; }> & { ...; }>'.ts(2339)

const onboardingSchema = coerceFormValue(
  v.object({
    firstName: v.pipe(
      v.string("Please enter your first name."),
      v.nonEmpty("Please enter your first name."),
      v.minLength(2, "The first name must be at least 2 characters long."),
      v.maxLength(100, "The first name must be at most 100 characters long.")
    ),
   ...
  })
);

export async function action({ request }: Route.ActionArgs) {
  const formData = await request.formData();
  const submission = parseSubmission(formData);
  const result = v.safeParse(onboardingSchema, submission.payload);

  if (result.success) {
    return report(submission, {
      error: {
        issues: result.issues,
      },
    });
  }
  return redirect("/");
}

export default function OnboardingRoute({ loaderData }: Route.ComponentProps) {
  const lastResult = useActionData<typeof action>();

  const { form, fields } = useForm({
    lastResult,
    onValidate({ formData }) {
      const result = v.safeParse(onboardingSchema, formData);
      return formatResult(result);
    },
    defaultValue: {
      country: "germany",
    },
    shouldValidate: "onBlur",
    shouldRevalidate: "onInput",
  });

  return (
    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
      <div className="w-full max-w-sm">
        <Card>
          <CardContent>
            <Form method="POST" {...form.props}>
              <FieldGroup>
                <FieldSet>
                  <FieldLegend>Persönliche Angaben</FieldLegend>
                  <FieldDescription>
                    Bitte gib deinen vollständigen Vor- und Nachnamen an, damit
                    wir dich korrekt identifizieren können.
                  </FieldDescription>
                  <FieldGroup>
                    <Field>
                      <FieldLabel htmlFor={fields.firstName.id}>
                        Vorname
                      </FieldLabel>
                      <Input
                        id={fields.firstName.id}
                        type="text"
                        name={fields.firstName.name}
                        defaultValue={fields.firstName.defaultValue}
                        aria-describedby={fields.firstName.ariaDescribedBy}
                      />
                      {fields.firstName.errors?.filter(Boolean).map((error) => (
                        <FieldError key={error}>{error}</FieldError>
                      ))}
                    </Field>
                    ...
                  </FieldGroup>
                </FieldSet>
                <Field>
                  <Button type="submit">Bestätigen</Button>
                </Field>
              </FieldGroup>
            </Form>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

[mnlfischer]

sorry, I found the answer :)

https://github.com/edmundhung/conform/blob/main/examples/shadcn-ui/README.md

[edmundhung]

Sorry for the confusion 🙏🏼 Both the ariaInvalid and ariaDescribedBy metadata is added in #1047 just yesterday and I am planning to do a release later today.