Adding aria-invalid="true" to TextInput when error (#4349)

* Adding aria-invalid="true" to TextInput when error

* Create gold-baboons-live.md

.changeset/gold-baboons-live.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Adding aria-invalid="true" to TextInput when error.

packages/react/src/TextInput/TextInput.tsx

@@ -149,6 +149,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           aria-required={required}
           {...inputProps}
           data-component="input"
+          aria-invalid={validationStatus === 'error' ? 'true' : undefined}
         />
         <TextInputInnerVisualSlot
           visualPosition="trailing"

packages/react/src/__tests__/TextInput.test.tsx

@@ -1,6 +1,6 @@
 import {SearchIcon} from '@primer/octicons-react'
 import userEvent from '@testing-library/user-event'
-import {render as HTMLRender, fireEvent} from '@testing-library/react'
+import {render as HTMLRender, fireEvent, screen} from '@testing-library/react'
 import {axe} from 'jest-axe'
 import React from 'react'
 import {TextInput} from '..'
@@ -39,6 +39,11 @@ describe('TextInput', () => {
     expect(render(<TextInput name="zipcode" validationStatus="error" />)).toMatchSnapshot()
   })
 
+  it('renders sets aria-invalid="true" on error', () => {
+    HTMLRender(<TextInput name="zipcode" validationStatus="error" data-testid="zipcodeInput" />)
+    expect(screen.getByTestId('zipcodeInput')).toHaveAttribute('aria-invalid', 'true')
+  })
+
   it('renders contrast', () => {
     expect(render(<TextInput name="zipcode" contrast />)).toMatchSnapshot()
   })

packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap

@@ -526,6 +526,7 @@ exports[`TextInput renders error 1`] = `
   onClick={[Function]}
 >
   <input
+    aria-invalid="true"
     className="c2"
     data-component="input"
     name="zipcode"