diff --git a/src/shared/ui/Input/ui/Input.test.tsx b/src/shared/ui/Input/ui/Input.test.tsx index 980e906..2f8bb8e 100644 --- a/src/shared/ui/Input/ui/Input.test.tsx +++ b/src/shared/ui/Input/ui/Input.test.tsx @@ -25,6 +25,27 @@ describe('Input', () => { expect(screen.queryByText('Required')).toBeNull() }) }) + describe('accessibility', () => { + it('label is associated with input via htmlFor/id', () => { + render() + expect(screen.getByLabelText('Email')).toBeInTheDocument() + }) + it('error span is referenced by aria-describedby', () => { + render() + const input = screen.getByRole('textbox') + const errorId = input.getAttribute('aria-describedby') + expect(errorId).toBeTruthy() + expect(document.getElementById(errorId!)).toHaveTextContent('Required') + }) + it('no aria-describedby when no error', () => { + render() + expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-describedby') + }) + it('uses provided id prop', () => { + render() + expect(screen.getByLabelText('Email')).toHaveAttribute('id', 'my-input') + }) + }) describe('styling', () => { it('has brutal-border class', () => { render() @@ -69,4 +90,21 @@ describe('Textarea', () => { expect(screen.getByRole('textbox')).toHaveAttribute('rows', '8') }) }) + describe('accessibility', () => { + it('label is associated with textarea via htmlFor/id', () => { + render(