redesign the homepage

apps/homepage/tests/unit/components/forms.test.tsx

@@ -0,0 +1,41 @@
+import { ErrorSummary } from '@/components/forms/ErrorSummary';
+import { FormField } from '@/components/forms/FormField';
+import { TextInput } from '@/components/forms/TextInput';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+describe('form primitives', () => {
+  it('associates labels, help, required state, and errors', () => {
+    render(
+      <FormField
+        id="work-email"
+        label="Work email"
+        required
+        supportingText="Use work email"
+        error="Enter a valid address"
+      >
+        <TextInput
+          id="work-email"
+          type="email"
+          required
+          invalid
+          describedBy="work-email-help work-email-error"
+        />
+      </FormField>,
+    );
+    const input = screen.getByLabelText(/Work email/);
+    expect(input).toHaveAttribute('required');
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+    expect(input).toHaveAccessibleDescription('Use work email Enter a valid address');
+  });
+
+  it('links summary errors back to fields', () => {
+    render(
+      <ErrorSummary
+        title="Correct the fields"
+        errors={[{ fieldId: 'work-email', message: 'Enter a valid address' }]}
+      />,
+    );
+    expect(screen.getByRole('alert').querySelector('a')).toHaveAttribute('href', '#work-email');
+  });
+});