feat(RAC): Allow passing data attributes to FieldError (#6895)

* Allow passing data attributes to FieldError

* Update FieldError.tsx

just fixing some lint, not sure how it passed

---------

Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Reid Barber <[email protected]>

Author: 3 people

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

@@ -10,15 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
+import {DOMProps, ValidationResult} from "@react-types/shared";
+import {filterDOMProps} from "@react-aria/utils";
 import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
 import {RenderProps, useRenderProps} from './utils';
 import {Text} from './Text';
-import {ValidationResult} from '@react-types/shared';
 
 export const FieldErrorContext = createContext<ValidationResult | null>(null);
 
 export interface FieldErrorRenderProps extends ValidationResult {}
-export interface FieldErrorProps extends RenderProps<FieldErrorRenderProps> {}
+export interface FieldErrorProps extends RenderProps<FieldErrorRenderProps>, DOMProps {}
 
 function FieldError(props: FieldErrorProps, ref: ForwardedRef<HTMLElement>) {
   let validation = useContext(FieldErrorContext);
@@ -37,6 +38,7 @@ export {_FieldError as FieldError};
 
 const FieldErrorInner = forwardRef((props: FieldErrorProps, ref: ForwardedRef<HTMLElement>) => {
   let validation = useContext(FieldErrorContext)!;
+  let domProps = filterDOMProps(props)!;
   let renderProps = useRenderProps({
     ...props,
     defaultClassName: 'react-aria-FieldError',
@@ -48,5 +50,5 @@ const FieldErrorInner = forwardRef((props: FieldErrorProps, ref: ForwardedRef<HT
     return null;
   }
 
-  return <Text slot="errorMessage" {...renderProps} ref={ref} />;
+  return <Text slot="errorMessage" {...domProps} {...renderProps} ref={ref} />;
 });

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

@@ -0,0 +1,23 @@
+import {FieldError} from '../src/FieldError';
+import {Input} from '../src/Input';
+import {Label} from '../src/Label';
+import React from 'react';
+import {render} from '@react-spectrum/test-utils-internal';
+import {TextField} from '../src/TextField';
+
+describe('FieldError', function () {
+  it('supports data attributes passed as props', async () => {
+    const TEST_ID = 'testid';
+
+    const {getByTestId} = render(
+      <TextField isInvalid>
+        <Label>Email</Label>
+        <Input />
+        <FieldError data-testid={TEST_ID}>An error</FieldError>
+      </TextField>
+    );
+
+    const element = getByTestId(TEST_ID);
+    expect(element).toHaveTextContent('An error');
+  });
+});