feat(#416): responsive layout + accessibility for login page

- Mobile-first responsive classes (p-4 sm:p-8, text-2xl sm:text-4xl)
- WCAG 2.1 AA: role=status on loading spinner, aria-labels, focus management
- Loading spinner has role=status and aria-label
- All interactive elements keyboard-accessible
- Added 10 new tests for responsive layout and accessibility

Refs #416

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/app/(auth)/login/page.test.tsx

@@ -283,6 +283,153 @@ describe("LoginPage", (): void => {
     });
   });
 
+  /* ------------------------------------------------------------------ */
+  /*  Responsive layout tests                                              */
+  /* ------------------------------------------------------------------ */
+
+  describe("responsive layout", (): void => {
+    it("applies mobile-first padding to main element", (): void => {
+      mockFetchConfig(EMAIL_ONLY_CONFIG);
+
+      const { container } = render(<LoginPage />);
+      const main = container.querySelector("main");
+
+      expect(main).toHaveClass("p-4", "sm:p-8");
+    });
+
+    it("applies responsive text size to heading", (): void => {
+      mockFetchConfig(EMAIL_ONLY_CONFIG);
+
+      render(<LoginPage />);
+
+      const heading = screen.getByRole("heading", { level: 1 });
+      expect(heading).toHaveClass("text-2xl", "sm:text-4xl");
+    });
+
+    it("applies responsive padding to card container", (): void => {
+      mockFetchConfig(EMAIL_ONLY_CONFIG);
+
+      const { container } = render(<LoginPage />);
+      const card = container.querySelector(".bg-white");
+
+      expect(card).toHaveClass("p-4", "sm:p-8");
+    });
+
+    it("card container has full width with max-width constraint", (): void => {
+      mockFetchConfig(EMAIL_ONLY_CONFIG);
+
+      const { container } = render(<LoginPage />);
+      const wrapper = container.querySelector(".max-w-md");
+
+      expect(wrapper).toHaveClass("w-full", "max-w-md");
+    });
+  });
+
+  /* ------------------------------------------------------------------ */
+  /*  Accessibility tests                                                  */
+  /* ------------------------------------------------------------------ */
+
+  describe("accessibility", (): void => {
+    it("loading spinner has role=status", (): void => {
+      // Never resolve fetch so it stays in loading state
+      // eslint-disable-next-line @typescript-eslint/no-empty-function -- intentionally never-resolving promise
+      (global.fetch as Mock).mockReturnValueOnce(new Promise(() => {}));
+
+      render(<LoginPage />);
+
+      const spinner = screen.getByTestId("loading-spinner");
+      expect(spinner).toHaveAttribute("role", "status");
+      expect(spinner).toHaveAttribute("aria-label", "Loading authentication options");
+    });
+
+    it("form inputs have associated labels", async (): Promise<void> => {
+      mockFetchConfig(EMAIL_ONLY_CONFIG);
+
+      render(<LoginPage />);
+
+      await waitFor((): void => {
+        expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+      });
+
+      const emailInput = screen.getByLabelText(/email/i);
+      const passwordInput = screen.getByLabelText(/password/i);
+
+      expect(emailInput).toHaveAttribute("id", "login-email");
+      expect(passwordInput).toHaveAttribute("id", "login-password");
+    });
+
+    it("error banner has role=alert and aria-live", async (): Promise<void> => {
+      mockSearchParams.set("error", "access_denied");
+      mockFetchConfig(EMAIL_ONLY_CONFIG);
+
+      render(<LoginPage />);
+
+      await waitFor((): void => {
+        expect(screen.getByRole("alert")).toBeInTheDocument();
+      });
+
+      const alert = screen.getByRole("alert");
+      expect(alert).toHaveAttribute("aria-live", "polite");
+    });
+
+    it("dismiss button has descriptive aria-label", async (): Promise<void> => {
+      mockSearchParams.set("error", "access_denied");
+      mockFetchConfig(EMAIL_ONLY_CONFIG);
+
+      render(<LoginPage />);
+
+      await waitFor((): void => {
+        expect(screen.getByRole("alert")).toBeInTheDocument();
+      });
+
+      const dismissButton = screen.getByRole("button", { name: /dismiss/i });
+      expect(dismissButton).toHaveAttribute("aria-label", "Dismiss");
+    });
+
+    it("interactive elements are keyboard-accessible (tab order)", async (): Promise<void> => {
+      mockFetchConfig(EMAIL_ONLY_CONFIG);
+      const user = userEvent.setup();
+
+      render(<LoginPage />);
+
+      await waitFor((): void => {
+        expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+      });
+
+      // LoginForm auto-focuses the email input on mount
+      expect(screen.getByLabelText(/email/i)).toHaveFocus();
+
+      // Tab forward through form: email -> password -> submit
+      await user.tab();
+      expect(screen.getByLabelText(/password/i)).toHaveFocus();
+
+      await user.tab();
+      expect(screen.getByRole("button", { name: /continue/i })).toHaveFocus();
+
+      // All interactive elements are reachable via keyboard
+      const oauthButton = screen.queryByRole("button", { name: /continue with/i });
+      // No OAuth button in email-only config, but verify all form elements have tabindex >= 0
+      expect(oauthButton).not.toBeInTheDocument();
+      expect(screen.getByLabelText(/email/i)).not.toHaveAttribute("tabindex", "-1");
+      expect(screen.getByLabelText(/password/i)).not.toHaveAttribute("tabindex", "-1");
+    });
+
+    it("OAuth button has descriptive aria-label", async (): Promise<void> => {
+      mockFetchConfig(OAUTH_ONLY_CONFIG);
+
+      render(<LoginPage />);
+
+      await waitFor((): void => {
+        expect(
+          screen.getByRole("button", { name: /continue with authentik/i })
+        ).toBeInTheDocument();
+      });
+
+      const oauthButton = screen.getByRole("button", { name: /continue with authentik/i });
+      expect(oauthButton).toHaveAttribute("aria-label", "Continue with Authentik");
+    });
+  });
+
   /* ------------------------------------------------------------------ */
   /*  URL error param tests                                               */
   /* ------------------------------------------------------------------ */

apps/web/src/app/(auth)/login/page.tsx

@@ -128,19 +128,24 @@ export default function LoginPage(): ReactElement {
   );
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center p-8 bg-gray-50">
+    <main className="flex min-h-screen flex-col items-center justify-center p-4 sm:p-8 bg-gray-50">
       <div className="w-full max-w-md space-y-8">
         <div className="text-center">
-          <h1 className="text-4xl font-bold mb-4">Welcome to Mosaic Stack</h1>
-          <p className="text-lg text-gray-600">
+          <h1 className="text-2xl sm:text-4xl font-bold mb-4">Welcome to Mosaic Stack</h1>
+          <p className="text-base sm:text-lg text-gray-600">
             Your personal assistant platform. Organize tasks, events, and projects with a
             PDA-friendly approach.
           </p>
         </div>
 
-        <div className="bg-white p-8 rounded-lg shadow-md">
+        <div className="bg-white p-4 sm:p-8 rounded-lg shadow-md">
           {loadingConfig ? (
-            <div className="flex items-center justify-center py-8" data-testid="loading-spinner">
+            <div
+              className="flex items-center justify-center py-8"
+              data-testid="loading-spinner"
+              role="status"
+              aria-label="Loading authentication options"
+            >
               <Loader2 className="h-8 w-8 animate-spin text-blue-500" aria-hidden="true" />
               <span className="sr-only">Loading authentication options</span>
             </div>