Is there a way to use FieldError outside of a XYZFieldContext?

[Kegulf]

Before you read

I know this is a bit of a XY Problem but I want to make a component that doesn't force me to wrap evrything in a Provider that provides ALL Field context, because I know I'm going to forget to add some context at some point and go down a debugging rabbithole 😂

What I really want is something like this discussion is describing:

• Generic Context Provider for different form field types #5694
  But I see that it has not been discussed any further, so I tried to make it work without it.

The Problem

I have a case where I want to create a composable API for form fields in a component library.
Mainly I want to be able to have one or more fields share one description and error message.
Ignore the naming of stuff here, it's WIP 😅

.

The API I'm trying to achieve:

  <FormControl hint="This is a hint" validationErrors={["This is an error"]}>
    <TextField label="Postal Code" />
    <Select
      label="Country"
      options={[
        { label: "USA", value: "usa" },
        { label: "Canada", value: "canada" },
        { label: "Mexico", value: "mexico" },
      ]}
    />
  </FormControl>

Current State

I've basically got it working by making the following component, with a util function enhanceChildren that adds aria-describedBy, aria-errormessage and aria-invalid to the field-component children of the FormControl.

export function FormControl({
  children,
  hint,
  validationErrors,
}: FormControlProps) {
  const hintId = useId();
  const errorId = useId();

  return (
    <div>
      {enhanceChildren(children, hintId, errorId, hint, validationErrors)}
      {hint && <Hint id={hintId}>{hint}</Hint>}
      {validationErrors?.length ? (
        <RACValidationErrors id={errorId} messages={validationErrors} />
      ) : null}
    </div>
  );
}

Only problem I'm having atm to match the regular implementation of the Field-pattern is that the RACValidationErrors won't render. The component looks like this:

export function RACValidationError(props: ValidationErrorProps) {
  return (
    <FieldError>  // <-- React-aria-components FieldError
      <ValidationError {...props} /> // <--- Essentially just styling but extracted for use outside of React Aria.
    </FieldError>
  );
}

The FieldError here ☝️ returns null because the FormFieldContexts validation object has isInvalid equal to false.

I'm assuming this is because It's not child of a XYZFieldProvider.

Anyone got any tips?

[snowystinger]

You can use the FieldErrorContext and make your own Provider using it, you'd need to make use of useField for ids and other props https://react-spectrum.adobe.com/react-spectrum/InlineAlert.html#inlinealert? would both fields become aria-describedby the error?
Or would the group get the describedby?