ffe37fad37
Add `aria-invalid` and `aria-describedby` attributes to Input and Textarea components when an error is present. This ensures screen readers announce the validation error when the input is focused. Also added unit tests for these accessibility attributes.
53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
// @vitest-environment jsdom
|
|
import { render, screen, cleanup } from '@testing-library/react';
|
|
import { describe, it, expect, afterEach } from 'vitest';
|
|
import { Input, Textarea } from '../Input';
|
|
|
|
describe('Input', () => {
|
|
afterEach(() => {
|
|
cleanup();
|
|
});
|
|
|
|
it('renders with correct accessibility attributes when error is present', () => {
|
|
render(<Input label="Test Input" error="Invalid input" />);
|
|
|
|
const input = screen.getByLabelText('Test Input');
|
|
const error = screen.getByText('Invalid input');
|
|
|
|
expect(input.getAttribute('aria-invalid')).toBe('true');
|
|
expect(input.hasAttribute('aria-describedby')).toBe(true);
|
|
|
|
const describedBy = input.getAttribute('aria-describedby');
|
|
expect(describedBy).toBe(error.id);
|
|
expect(error.id).toBeDefined();
|
|
expect(error.id).not.toBe('');
|
|
});
|
|
|
|
it('renders without accessibility error attributes when valid', () => {
|
|
render(<Input label="Test Input" />);
|
|
|
|
const input = screen.getByLabelText('Test Input');
|
|
|
|
// In React 19, aria-invalid={false} renders aria-invalid="false"
|
|
expect(input.getAttribute('aria-invalid')).toBe('false');
|
|
expect(input.hasAttribute('aria-describedby')).toBe(false);
|
|
});
|
|
});
|
|
|
|
describe('Textarea', () => {
|
|
it('renders with correct accessibility attributes when error is present', () => {
|
|
render(<Textarea label="Test Textarea" error="Invalid textarea" />);
|
|
|
|
const textarea = screen.getByLabelText('Test Textarea');
|
|
const error = screen.getByText('Invalid textarea');
|
|
|
|
expect(textarea.getAttribute('aria-invalid')).toBe('true');
|
|
expect(textarea.hasAttribute('aria-describedby')).toBe(true);
|
|
|
|
const describedBy = textarea.getAttribute('aria-describedby');
|
|
expect(describedBy).toBe(error.id);
|
|
expect(error.id).toBeDefined();
|
|
expect(error.id).not.toBe('');
|
|
});
|
|
});
|