Fix TextField ARIA attributes

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}
     />
   );

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);
+  });
 });