feat(field): add aria-describedby to Field component

packages/react/src/components/field/examples/disabled.tsx

@@ -1,12 +1,12 @@
-import { Field } from '@ark-ui/react/field'
+import { Field } from "@ark-ui/react/field";
 
 export const Disabled = () => {
-  return (
-    <Field.Root disabled>
-      <Field.Label>Label</Field.Label>
-      <Field.Input />
-      <Field.HelperText>Some additional Info</Field.HelperText>
-      <Field.ErrorText>Error Info</Field.ErrorText>
-    </Field.Root>
-  )
-}
+	return (
+		<Field.Root disabled>
+			<Field.Label>Label</Field.Label>
+			<Field.Input />
+			<Field.HelperText>Some additional Info</Field.HelperText>
+			<Field.ErrorText>Error Info</Field.ErrorText>
+		</Field.Root>
+	);
+};

packages/react/src/components/field/field.stories.tsx

@@ -1,13 +1,13 @@
-import type { Meta } from '@storybook/react'
+import type { Meta } from "@storybook/react";
 
 const meta: Meta = {
-  title: 'Components / Field',
-}
+	title: "Components / Field",
+};
 
-export default meta
+export default meta;
 
-export { Input } from './examples/input'
-export { RequiredIndicator } from './examples/required-indicator'
-export { Select } from './examples/select'
-export { Textarea } from './examples/textarea'
-export { Disabled } from './examples/disabled'
+export { Input } from "./examples/input";
+export { RequiredIndicator } from "./examples/required-indicator";
+export { Select } from "./examples/select";
+export { Textarea } from "./examples/textarea";
+export { Disabled } from "./examples/disabled";

packages/react/src/components/field/field.test.tsx

@@ -1,89 +1,97 @@
-import { cleanup, render, screen } from '@testing-library/react/pure'
-import user from '@testing-library/user-event'
-import { axe } from 'vitest-axe'
-import { Field } from '../'
-import { getExports, getParts } from '../../setup-test'
-import { fieldAnatomy } from './field.anatomy'
+import { cleanup, render, screen } from "@testing-library/react/pure";
+import user from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+import { Field } from "../";
+import { getExports, getParts } from "../../setup-test";
+import { fieldAnatomy } from "./field.anatomy";
 
 const ComponentUnderTest = (props: Field.RootProps) => (
-  <Field.Root {...props}>
-    <Field.Label>
-      Label
-      <Field.RequiredIndicator />
-    </Field.Label>
-    <Field.Input />
-    <Field.HelperText>Some additional Info</Field.HelperText>
-    <Field.ErrorText>Error Info</Field.ErrorText>
-  </Field.Root>
-)
+	<Field.Root {...props}>
+		<Field.Label>
+			Label
+			<Field.RequiredIndicator />
+		</Field.Label>
+		<Field.Input />
+		<Field.HelperText>Some additional Info</Field.HelperText>
+		<Field.ErrorText>Error Info</Field.ErrorText>
+	</Field.Root>
+);
 
-describe('Field / Parts & Exports', () => {
-  afterAll(() => {
-    cleanup()
-  })
+describe("Field / Parts & Exports", () => {
+	afterAll(() => {
+		cleanup();
+	});
 
-  render(<ComponentUnderTest invalid required />)
+	render(<ComponentUnderTest invalid required />);
 
-  it.each(
-    getParts(fieldAnatomy).filter((part) => !part.includes('select') && !part.includes('textarea')),
-  )('should render part %s', async (part) => {
-    expect(document.querySelector(part)).toBeInTheDocument()
-  })
+	it.each(
+		getParts(fieldAnatomy).filter(
+			(part) => !part.includes("select") && !part.includes("textarea"),
+		),
+	)("should render part %s", async (part) => {
+		expect(document.querySelector(part)).toBeInTheDocument();
+	});
 
-  it.each(getExports(fieldAnatomy))('should export %s', async (part) => {
-    expect(Field[part]).toBeDefined()
-  })
-})
+	it.each(getExports(fieldAnatomy))("should export %s", async (part) => {
+		expect(Field[part]).toBeDefined();
+	});
+});
 
-describe('Field / Input', () => {
-  afterEach(() => {
-    cleanup()
-  })
+describe("Field / Input", () => {
+	afterEach(() => {
+		cleanup();
+	});
 
-  it('should have no a11y violations', async () => {
-    const { container } = render(<ComponentUnderTest />)
-    const results = await axe(container)
+	it("should have no a11y violations", async () => {
+		const { container } = render(<ComponentUnderTest />);
+		const results = await axe(container);
 
-    expect(results).toHaveNoViolations()
-  })
+		expect(results).toHaveNoViolations();
+	});
 
-  it('should set textbox as required', async () => {
-    render(<ComponentUnderTest required />)
-    expect(screen.getByRole('textbox', { name: /label/i })).toBeRequired()
-    expect(screen.getByText('*')).toBeInTheDocument()
-  })
+	it("should set textbox as required", async () => {
+		render(<ComponentUnderTest required />);
+		expect(screen.getByRole("textbox", { name: /label/i })).toBeRequired();
+		expect(screen.getByText("*")).toBeInTheDocument();
+	});
 
-  it('should set textbox as disabled', async () => {
-    render(<ComponentUnderTest disabled />)
-    expect(screen.getByRole('textbox', { name: /label/i })).toBeDisabled()
-    expect(document.querySelector('[data-part="root"]')).toHaveAttribute('data-disabled')
-    expect(screen.getByText('Label')).toHaveAttribute('data-disabled')
-    expect(screen.getByText('Some additional Info')).toHaveAttribute('data-disabled')
-  })
+	it("should set textbox as disabled", async () => {
+		render(<ComponentUnderTest disabled />);
+		expect(screen.getByRole("textbox", { name: /label/i })).toBeDisabled();
+		expect(document.querySelector('[data-part="root"]')).toHaveAttribute(
+			"data-disabled",
+		);
+		expect(screen.getByText("Label")).toHaveAttribute("data-disabled");
+		expect(screen.getByText("Some additional Info")).toHaveAttribute(
+			"data-disabled",
+		);
+	});
 
-  it('should set textbox as readonly', async () => {
-    render(<ComponentUnderTest readOnly />)
-    expect(screen.getByRole('textbox', { name: /label/i })).toHaveAttribute('readonly')
-  })
+	it("should set textbox as readonly", async () => {
+		render(<ComponentUnderTest readOnly />);
+		expect(screen.getByRole("textbox", { name: /label/i })).toHaveAttribute(
+			"readonly",
+		);
+	});
 
-  it('should display helper text', async () => {
-    render(<ComponentUnderTest />)
-    expect(screen.getByText('Some additional Info')).toBeInTheDocument()
-  })
+	it("should display helper text", async () => {
+		render(<ComponentUnderTest />);
+		expect(screen.getByText("Some additional Info")).toBeInTheDocument();
+	});
 
-  it('should display error text when error is present', async () => {
-    render(<ComponentUnderTest invalid />)
-    expect(screen.getByText('Error Info')).toBeInTheDocument()
-  })
+	it("should display error text when error is present", async () => {
+		render(<ComponentUnderTest invalid />);
+		expect(screen.getByText("Error Info")).toBeInTheDocument();
+	});
 
-  it('should focus on input when label is clicked', async () => {
-    render(<ComponentUnderTest />)
-    await user.click(screen.getByText(/label/i))
-    expect(screen.getByRole('textbox', { name: /label/i })).toHaveFocus()
-  })
+	it("should focus on input when label is clicked", async () => {
+		render(<ComponentUnderTest />);
+		await user.click(screen.getByText(/label/i));
+		expect(screen.getByRole("textbox", { name: /label/i })).toHaveFocus();
+	});
 
-  it('should not display error text when no error is present', async () => {
-    render(<ComponentUnderTest />)
-    expect(screen.queryByText('Error Info')).not.toBeInTheDocument()
-  })
-})
+	it("should not display error text when no error is present", async () => {
+		render(<ComponentUnderTest />);
+		expect(screen.queryByText("Error Info")).not.toBeInTheDocument();
+	});
+});