🎨 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:
google-labs-jules[bot]
2026-01-29 01:48:58 +00:00
parent 6b8f54072e
commit 2c9cb547e7
3 changed files with 41 additions and 1 deletions

View File

@@ -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');
});
});