🎨 Palette: Improve Contact form accessibility
💡 What: Added ARIA roles to form status messages and hid decorative icons. 🎯 Why: Screen readers were missing dynamic success/error messages on form submission. ♿ Accessibility: - Added `role="alert"` and `aria-live="polite"` to success, error, and rate-limit messages. - Added `aria-hidden="true"` to decorative icons in the contact info section. Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
This commit is contained in:
@@ -116,6 +116,8 @@ describe('Contact Page', () => {
|
||||
// Verify success message
|
||||
const successMessage = await screen.findByText('Message sent successfully!');
|
||||
expect(successMessage).toBeTruthy();
|
||||
expect(successMessage.getAttribute('role')).toBe('alert');
|
||||
expect(successMessage.getAttribute('aria-live')).toBe('polite');
|
||||
});
|
||||
|
||||
it('sanitizes input before sending', async () => {
|
||||
@@ -193,4 +195,32 @@ describe('Contact Page', () => {
|
||||
// EmailJS should NOT be called
|
||||
expect(emailjs.send).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('shows error message with alert role when submission fails', async () => {
|
||||
// Mock failure
|
||||
const sendMock = vi.mocked(emailjs.send);
|
||||
sendMock.mockRejectedValueOnce(new Error('Network error'));
|
||||
|
||||
render(<Contact />);
|
||||
|
||||
// Fill out the form
|
||||
fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'John Doe' } });
|
||||
fireEvent.change(screen.getByLabelText('Email'), { target: { value: 'john@example.com' } });
|
||||
fireEvent.change(screen.getByLabelText('Subject'), { target: { value: 'Test Subject' } });
|
||||
fireEvent.change(screen.getByLabelText('Message'), { target: { value: 'Hello world' } });
|
||||
|
||||
// Submit
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Send Message' }));
|
||||
|
||||
// Wait for submission attempt
|
||||
await waitFor(() => {
|
||||
expect(emailjs.send).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
// Verify error message
|
||||
const errorMessage = await screen.findByText('Failed to send message.');
|
||||
expect(errorMessage).toBeTruthy();
|
||||
expect(errorMessage.getAttribute('role')).toBe('alert');
|
||||
expect(errorMessage.getAttribute('aria-live')).toBe('polite');
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user