Bug: aria-invalid is overriden in TextInput (#4365)

* Add failing test * Add failing test * Add fix * Create grumpy-shirts-march.md
primer · Apr 16, 2024 · 81ac811 · 81ac811
1 parent cc467ec
commit 81ac811
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/grumpy-shirts-march.md 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
@@ -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
@@ -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')
+  })
 })