From 81ac81123025f99defd1a0bef36f0db6e01c698f Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Thu, 7 Mar 2024 08:23:49 -0800
Subject: [PATCH] Bug: `aria-invalid` is overriden in TextInput (#4365)

* Add failing test

* Add failing test

* Add fix

* Create grumpy-shirts-march.md
---
 .changeset/grumpy-shirts-march.md               | 5 +++++
 packages/react/src/TextInput/TextInput.tsx      | 2 +-
 packages/react/src/__tests__/TextInput.test.tsx | 6 ++++++
 3 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/grumpy-shirts-march.md

diff --git a/.changeset/grumpy-shirts-march.md b/.changeset/grumpy-shirts-march.md
new file mode 100644
index 000000000000..6707df901665
--- /dev/null
+++ b/.changeset/grumpy-shirts-march.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bugfix: `aria-invalid` is overriden in TextInput
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 0f7c445086b2..6c75f6d033c6 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -147,9 +147,9 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           onBlur={handleInputBlur}
           type={type}
           aria-required={required}
+          aria-invalid={validationStatus === 'error' ? 'true' : undefined}
           {...inputProps}
           data-component="input"
-          aria-invalid={validationStatus === 'error' ? 'true' : undefined}
         />
         <TextInputInnerVisualSlot
           visualPosition="trailing"
diff --git a/packages/react/src/__tests__/TextInput.test.tsx b/packages/react/src/__tests__/TextInput.test.tsx
index 65a70b52cd56..78d18969e73e 100644
--- a/packages/react/src/__tests__/TextInput.test.tsx
+++ b/packages/react/src/__tests__/TextInput.test.tsx
@@ -230,4 +230,10 @@ describe('TextInput', () => {
   it('should render a password input', () => {
     expect(render(<TextInput name="password" type="password" />)).toMatchSnapshot()
   })
+
+  it('should not override prop aria-invalid', () => {
+    const onChange = jest.fn()
+    const {getByRole} = HTMLRender(<TextInput onChange={onChange} aria-invalid="true" value="" />)
+    expect(getByRole('textbox')).toHaveAttribute('aria-invalid', 'true')
+  })
 })