feat(FieldError): expose elementType prop to control host element (adobe#9759)

* feat(FieldError): expose elementType prop to control host element

Fixes adobe#9757 — Option C: expose elementType on FieldErrorProps so users
can set elementType="div" when wrapping block-level children (e.g. <ul>)
without triggering the DOMElement render mismatch warning.

* test(FieldError): replace html-validation test with warn suppression tests

Author: fellipeutaka

packages/react-aria-components/src/FieldError.tsx

@@ -24,7 +24,13 @@ export interface FieldErrorProps extends RenderProps<FieldErrorRenderProps>, DOM
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
    * @default 'react-aria-FieldError'
    */
-  className?: ClassNameOrFunction<FieldErrorRenderProps>
+  className?: ClassNameOrFunction<FieldErrorRenderProps>,
+  /**
+   * The HTML element type to render. Defaults to `'span'`.
+   * Set to `'div'` when using block-level children (e.g. `<ul>`) to avoid invalid HTML.
+   * @default 'span'
+   */
+  elementType?: string
 }
 
 /**
@@ -41,9 +47,10 @@ export const FieldError = forwardRef(function FieldError(props: FieldErrorProps,
 
 const FieldErrorInner = forwardRef((props: FieldErrorProps, ref: ForwardedRef<HTMLElement>) => {
   let validation = useContext(FieldErrorContext)!;
-  let domProps = filterDOMProps(props, {global: true})!;
+  let {elementType, ...restProps} = props;
+  let domProps = filterDOMProps(restProps, {global: true})!;
   let renderProps = useRenderProps({
-    ...props,
+    ...restProps,
     defaultClassName: 'react-aria-FieldError',
     defaultChildren: validation.validationErrors.length === 0 ? undefined : validation.validationErrors.join(' '),
     values: validation
@@ -53,5 +60,5 @@ const FieldErrorInner = forwardRef((props: FieldErrorProps, ref: ForwardedRef<HT
     return null;
   }
 
-  return <Text slot="errorMessage" {...domProps} {...renderProps} ref={ref} />;
+  return <Text slot="errorMessage" elementType={elementType} {...domProps} {...renderProps} ref={ref} />;
 });

packages/react-aria-components/test/FieldError.test.js

@@ -20,4 +20,64 @@ describe('FieldError', function () {
     const element = getByTestId(TEST_ID);
     expect(element).toHaveTextContent('An error');
   });
+
+  it('renders as span by default', async () => {
+    const {getByText} = render(
+      <TextField isInvalid>
+        <Label>Email</Label>
+        <Input />
+        <FieldError>An error</FieldError>
+      </TextField>
+    );
+
+    const element = getByText('An error');
+    expect(element.tagName).toBe('SPAN');
+  });
+
+  it('supports elementType prop', async () => {
+    const {getByText} = render(
+      <TextField isInvalid>
+        <Label>Email</Label>
+        <Input />
+        <FieldError elementType="div">An error</FieldError>
+      </TextField>
+    );
+
+    const element = getByText('An error');
+    expect(element.tagName).toBe('DIV');
+  });
+
+  it('does not warn when render prop returns element matching elementType', async () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+    render(
+      <TextField isInvalid>
+        <Label>Email</Label>
+        <Input />
+        <FieldError elementType="div" render={(props) => <div {...props}><ul><li>Error</li></ul></div>}>
+          Error
+        </FieldError>
+      </TextField>
+    );
+
+    expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining('Unexpected DOM element'));
+    warnSpy.mockRestore();
+  });
+
+  it('warns when render prop returns element that does not match elementType', async () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+    render(
+      <TextField isInvalid>
+        <Label>Email</Label>
+        <Input />
+        <FieldError render={(props) => <div {...props} />}>
+          Error
+        </FieldError>
+      </TextField>
+    );
+
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('Unexpected DOM element'));
+    warnSpy.mockRestore();
+  });
 });