From 46cc41221d771530798337c8d8eab5caa73e0c76 Mon Sep 17 00:00:00 2001
From: Mats Bosson <mats.bosson@gmail.com>
Date: Sun, 29 Mar 2026 07:47:38 +0700
Subject: [PATCH] Fix TextField ARIA attributes

---
 .../src/components/text-field/text-field-input.tsx | 14 ++++++++++----
 .../components/text-field/text-field.test.tsx      | 12 ++++++++++++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/components/text-field/text-field-input.tsx b/packages/core/src/components/text-field/text-field-input.tsx
index 8e6f257..4c2a4b9 100644
--- a/packages/core/src/components/text-field/text-field-input.tsx
+++ b/packages/core/src/components/text-field/text-field-input.tsx
@@ -7,16 +7,22 @@ export type TextFieldInputProps = JSX.InputHTMLAttributes<HTMLInputElement>;
 
 /** The input element. Automatically wired to Label, Description, and ErrorMessage. */
 export function TextFieldInput(props: TextFieldInputProps): JSX.Element {
-  const [local, rest] = splitProps(props, ["id", "aria-describedby"]);
+  const [local, rest] = splitProps(props, [
+    "id",
+    "aria-describedby",
+    "aria-invalid",
+    "aria-required",
+    "disabled",
+  ]);
   const ctx = useTextFieldContext();
   return (
     <input
       id={local.id ?? ctx.inputId()}
       aria-describedby={local["aria-describedby"] ?? ctx.descriptionId()}
       aria-errormessage={ctx.invalid() ? ctx.errorMessageId() : undefined}
-      aria-invalid={ctx.invalid() || undefined}
-      aria-required={ctx.required() || undefined}
-      disabled={ctx.disabled()}
+      aria-invalid={ctx.invalid() ? "true" : undefined}
+      aria-required={ctx.required() ? "true" : undefined}
+      disabled={local.disabled ?? ctx.disabled()}
       {...rest}
     />
   );
diff --git a/packages/core/tests/components/text-field/text-field.test.tsx b/packages/core/tests/components/text-field/text-field.test.tsx
index ba3721f..88cc6d9 100644
--- a/packages/core/tests/components/text-field/text-field.test.tsx
+++ b/packages/core/tests/components/text-field/text-field.test.tsx
@@ -75,4 +75,16 @@ describe("TextField", () => {
     ));
     expect(screen.getByRole("textbox").getAttribute("aria-required")).toBe("true");
   });
+
+  it("input aria-errormessage links to error message id", () => {
+    render(() => (
+      <TextField invalid>
+        <TextField.Input />
+        <TextField.ErrorMessage>Required</TextField.ErrorMessage>
+      </TextField>
+    ));
+    const input = screen.getByRole("textbox");
+    const errorEl = screen.getByText("Required");
+    expect(input.getAttribute("aria-errormessage")).toBe(errorEl.id);
+  });
 });