@jmruthers/pace-core 0.2.7 → 0.5.1

package/src/components/PasswordReset/__tests__/PasswordChangeForm.accessibility.test.tsx

@@ -1,408 +0,0 @@
-import React from 'react';
-import { screen } from '@testing-library/react';
-import { renderWithProviders } from '../../../__tests__/shared';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { PasswordChangeForm } from '../PasswordChangeForm';
-
-describe('PasswordChangeForm Accessibility', () => {
-  const user = userEvent.setup();
-  
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  const renderPasswordChangeForm = (props = {}) => {
-    const defaultProps = {
-      onSubmit: vi.fn(),
-      ...props
-    };
-    return renderWithProviders(<PasswordChangeForm {...defaultProps} />);
-  };
-
-  describe('WCAG 2.1 AA Compliance', () => {
-    it('has proper form structure with semantic HTML', () => {
-      renderPasswordChangeForm();
-      
-      // Check for proper form elements
-      expect(screen.getByLabelText('New Password')).toBeInTheDocument();
-      expect(screen.getByLabelText('Confirm Password')).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Change Password' })).toBeInTheDocument();
-    });
-
-    it('has proper label associations', () => {
-      renderPasswordChangeForm();
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      
-      // Check that labels are properly associated with inputs
-      expect(newPasswordInput).toHaveAttribute('id', 'new-password');
-      expect(confirmPasswordInput).toHaveAttribute('id', 'confirm-password');
-      
-      // Verify label associations
-      const newPasswordLabel = screen.getByText('New Password');
-      const confirmPasswordLabel = screen.getByText('Confirm Password');
-      
-      expect(newPasswordLabel).toHaveAttribute('for', 'new-password');
-      expect(confirmPasswordLabel).toHaveAttribute('for', 'confirm-password');
-    });
-
-    it('has proper input types for security', () => {
-      renderPasswordChangeForm();
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      
-      // Password fields should be type="password" for security
-      expect(newPasswordInput).toHaveAttribute('type', 'password');
-      expect(confirmPasswordInput).toHaveAttribute('type', 'password');
-    });
-
-    it('has required field indicators', () => {
-      renderPasswordChangeForm();
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      
-      // Required fields should have the required attribute
-      expect(newPasswordInput).toHaveAttribute('required');
-      expect(confirmPasswordInput).toHaveAttribute('required');
-    });
-  });
-
-  describe('Screen Reader Support', () => {
-    it('announces errors with proper ARIA attributes', async () => {
-      renderPasswordChangeForm();
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      const submitButton = screen.getByRole('button', { name: 'Change Password' });
-      
-      // Trigger validation error
-      await user.type(newPasswordInput, 'short');
-      await user.type(confirmPasswordInput, 'short');
-      await user.click(submitButton);
-      
-      // Error should be announced to screen readers
-      const errorElement = screen.getByRole('alert');
-      expect(errorElement).toBeInTheDocument();
-      expect(errorElement).toHaveTextContent('Password must be at least 8 characters.');
-    });
-
-    it('provides clear error messages for screen readers', async () => {
-      renderPasswordChangeForm();
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      const submitButton = screen.getByRole('button', { name: 'Change Password' });
-      
-      // Test password length error
-      await user.type(newPasswordInput, 'short');
-      await user.type(confirmPasswordInput, 'short');
-      await user.click(submitButton);
-      
-      expect(screen.getByRole('alert')).toHaveTextContent('Password must be at least 8 characters.');
-      
-      // Test password mismatch error
-      await user.clear(newPasswordInput);
-      await user.clear(confirmPasswordInput);
-      await user.type(newPasswordInput, 'newpassword123');
-      await user.type(confirmPasswordInput, 'differentpassword');
-      await user.click(submitButton);
-      
-      expect(screen.getByRole('alert')).toHaveTextContent('Passwords do not match.');
-    });
-
-    it('announces loading state changes', async () => {
-      const onSubmit = vi.fn().mockImplementation(() => new Promise(resolve => setTimeout(() => resolve({}), 100)));
-      renderPasswordChangeForm({ onSubmit });
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      const submitButton = screen.getByRole('button', { name: 'Change Password' });
-      
-      await user.type(newPasswordInput, 'newpassword123');
-      await user.type(confirmPasswordInput, 'newpassword123');
-      await user.click(submitButton);
-      
-      // Button text changes to indicate loading state
-      expect(screen.getByRole('button', { name: 'Changing...' })).toBeInTheDocument();
-    });
-
-    it('provides clear button labels', () => {
-      renderPasswordChangeForm();
-      
-      const submitButton = screen.getByRole('button', { name: 'Change Password' });
-      expect(submitButton).toHaveAccessibleName('Change Password');
-    });
-  });
-
-  describe('Keyboard Navigation', () => {
-    it('supports full keyboard navigation', async () => {
-      renderPasswordChangeForm();
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      const submitButton = screen.getByRole('button', { name: 'Change Password' });
-      
-      // Start with first input focused
-      newPasswordInput.focus();
-      expect(newPasswordInput).toHaveFocus();
-      
-      // Tab to next input
-      await user.tab();
-      expect(confirmPasswordInput).toHaveFocus();
-      
-      // Fill the form to enable the button
-      await user.type(newPasswordInput, 'newpassword123');
-      await user.type(confirmPasswordInput, 'newpassword123');
-      
-      // Tab to submit button
-      confirmPasswordInput.focus();
-      await user.tab();
-      expect(submitButton).toHaveFocus();
-    });
-
-    it('supports Enter key for form submission', async () => {
-      const onSubmit = vi.fn().mockResolvedValue({});
-      renderPasswordChangeForm({ onSubmit });
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      
-      await user.type(newPasswordInput, 'newpassword123');
-      await user.type(confirmPasswordInput, 'newpassword123');
-      
-      // Submit form with Enter key
-      await user.keyboard('{Enter}');
-      
-      expect(onSubmit).toHaveBeenCalledWith({
-        newPassword: 'newpassword123',
-        confirmPassword: 'newpassword123'
-      });
-    });
-
-    it('supports Escape key to clear form', async () => {
-      renderPasswordChangeForm();
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      
-      await user.type(newPasswordInput, 'newpassword123');
-      await user.type(confirmPasswordInput, 'newpassword123');
-      
-      // Focus on an input and press Escape
-      newPasswordInput.focus();
-      await user.keyboard('{Escape}');
-      
-      // Input should be cleared (browser default behavior)
-      // This test documents the expected behavior
-    });
-
-    it('maintains focus during form interactions', async () => {
-      renderPasswordChangeForm();
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      const submitButton = screen.getByRole('button', { name: 'Change Password' });
-      
-      // Focus on first input
-      newPasswordInput.focus();
-      expect(newPasswordInput).toHaveFocus();
-      
-      // Type in first input
-      await user.type(newPasswordInput, 'newpassword123');
-      expect(newPasswordInput).toHaveFocus();
-      
-      // Tab to second input
-      await user.tab();
-      expect(confirmPasswordInput).toHaveFocus();
-      
-      // Type in second input
-      await user.type(confirmPasswordInput, 'newpassword123');
-      expect(confirmPasswordInput).toHaveFocus();
-    });
-  });
-
-  describe('Focus Management', () => {
-    it('maintains focus during loading states', async () => {
-      const onSubmit = vi.fn().mockImplementation(() => new Promise(resolve => setTimeout(() => resolve({}), 100)));
-      renderPasswordChangeForm({ onSubmit });
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      const submitButton = screen.getByRole('button', { name: 'Change Password' });
-      
-      await user.type(newPasswordInput, 'newpassword123');
-      await user.type(confirmPasswordInput, 'newpassword123');
-      
-      // Focus on submit button and click
-      submitButton.focus();
-      await user.click(submitButton);
-      
-      // Button should remain focused during loading
-      expect(screen.getByRole('button', { name: 'Changing...' })).toHaveFocus();
-    });
-
-    it('handles focus when inputs are disabled', async () => {
-      const onSubmit = vi.fn().mockImplementation(() => new Promise(resolve => setTimeout(() => resolve({}), 100)));
-      renderPasswordChangeForm({ onSubmit });
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      const submitButton = screen.getByRole('button', { name: 'Change Password' });
-      
-      await user.type(newPasswordInput, 'newpassword123');
-      await user.type(confirmPasswordInput, 'newpassword123');
-      await user.click(submitButton);
-      
-      // Inputs should be disabled during loading
-      expect(newPasswordInput).toBeDisabled();
-      expect(confirmPasswordInput).toBeDisabled();
-    });
-  });
-
-  describe('High Contrast Support', () => {
-    it('has sufficient color contrast for text', () => {
-      renderPasswordChangeForm();
-      
-      // Check that text elements are present and visible
-      expect(screen.getByText('New Password')).toBeInTheDocument();
-      expect(screen.getByText('Confirm Password')).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Change Password' })).toBeInTheDocument();
-      
-      // Note: Actual color contrast testing would require CSS-in-JS testing
-      // or visual regression testing tools
-    });
-
-    it('has proper focus indicators', async () => {
-      renderPasswordChangeForm();
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      const submitButton = screen.getByRole('button', { name: 'Change Password' });
-      
-      // Test focus indicators
-      newPasswordInput.focus();
-      expect(newPasswordInput).toHaveFocus();
-      
-      await user.tab();
-      expect(confirmPasswordInput).toHaveFocus();
-      
-      // Fill form to enable button
-      await user.type(newPasswordInput, 'newpassword123');
-      await user.type(confirmPasswordInput, 'newpassword123');
-      
-      confirmPasswordInput.focus();
-      await user.tab();
-      expect(submitButton).toHaveFocus();
-    });
-  });
-
-  describe('Error Identification', () => {
-    it('clearly identifies form errors', async () => {
-      renderPasswordChangeForm();
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      const submitButton = screen.getByRole('button', { name: 'Change Password' });
-      
-      // Trigger validation error
-      await user.type(newPasswordInput, 'short');
-      await user.type(confirmPasswordInput, 'short');
-      await user.click(submitButton);
-      
-      // Error should be clearly identified
-      const errorElement = screen.getByRole('alert');
-      expect(errorElement).toBeInTheDocument();
-      expect(errorElement).toHaveTextContent('Password must be at least 8 characters.');
-    });
-
-    it('provides clear error recovery instructions', async () => {
-      renderPasswordChangeForm();
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      const submitButton = screen.getByRole('button', { name: 'Change Password' });
-      
-      // Test password length error
-      await user.type(newPasswordInput, 'short');
-      await user.type(confirmPasswordInput, 'short');
-      await user.click(submitButton);
-      
-      const errorMessage = screen.getByRole('alert').textContent;
-      expect(errorMessage).toContain('Password must be at least 8 characters.');
-      
-      // Error message should provide clear guidance
-      expect(errorMessage).toContain('8 characters');
-    });
-  });
-
-  describe('Form Validation Announcements', () => {
-    it('announces validation errors immediately', async () => {
-      renderPasswordChangeForm();
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      const submitButton = screen.getByRole('button', { name: 'Change Password' });
-      
-      // Submit with invalid data
-      await user.type(newPasswordInput, 'short');
-      await user.type(confirmPasswordInput, 'short');
-      await user.click(submitButton);
-      
-      // Error should be announced immediately
-      expect(screen.getByRole('alert')).toBeInTheDocument();
-    });
-
-    it('announces when validation passes', async () => {
-      const onSubmit = vi.fn().mockResolvedValue({});
-      renderPasswordChangeForm({ onSubmit });
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      const submitButton = screen.getByRole('button', { name: 'Change Password' });
-      
-      // Submit with valid data
-      await user.type(newPasswordInput, 'newpassword123');
-      await user.type(confirmPasswordInput, 'newpassword123');
-      await user.click(submitButton);
-      
-      // No error should be announced
-      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Security Considerations', () => {
-    it('does not expose password values in DOM', () => {
-      renderPasswordChangeForm();
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      
-      // Password fields should be type="password" to prevent visual exposure
-      expect(newPasswordInput).toHaveAttribute('type', 'password');
-      expect(confirmPasswordInput).toHaveAttribute('type', 'password');
-    });
-
-    it('handles password field security properly', async () => {
-      renderPasswordChangeForm();
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      
-      // Type passwords
-      await user.type(newPasswordInput, 'secretpassword');
-      await user.type(confirmPasswordInput, 'secretpassword');
-      
-      // Values should be present but not visually exposed
-      expect(newPasswordInput).toHaveValue('secretpassword');
-      expect(confirmPasswordInput).toHaveValue('secretpassword');
-      
-      // But the type should still be password for security
-      expect(newPasswordInput).toHaveAttribute('type', 'password');
-      expect(confirmPasswordInput).toHaveAttribute('type', 'password');
-    });
-  });
-});