T07a: frontend core SPA — shell + auth + routing + i18n + UI library + a11y

- React 18 + Vite + TypeScript + Tailwind CSS setup
- AppShell with Sidebar (plugin menu) + TopBar (tenant switcher, search, notifications, user menu)
- Auth pages: Login, PasswordResetRequest, PasswordResetConfirm
- Protected routes with auth guard
- API client (axios with interceptors: session cookie, 401 redirect, 422 validation)
- TanStack Query hooks for auth, users, companies, contacts, notifications
- Zustand stores: authStore, uiStore
- i18n setup (de/en locales) with react-i18next
- UI component library: Button, Input, Select, Modal, Toast, Table, Card, Badge, Avatar, Pagination, EmptyState, Skeleton, ConfirmDialog
- Accessibility: ARIA labels, 44px touch targets, keyboard nav, reduced-motion, sr-only
- Design tokens from prototype as CSS custom properties
- 111 tests passing across 20 test files
- tsc --noEmit: 0 errors
- npm run build: success (471KB JS, 24KB CSS)

frontend/src/__tests__/ui/Modal.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Modal } from '@/components/ui/Modal';
+
+describe('Modal', () => {
+  it('renders nothing when open=false', () => {
+    render(<Modal open={false} onClose={() => {}}>Content</Modal>);
+    expect(screen.queryByText('Content')).not.toBeInTheDocument();
+  });
+
+  it('renders content when open=true', () => {
+    render(<Modal open={true} onClose={() => {}}>Modal Content</Modal>);
+    expect(screen.getByText('Modal Content')).toBeInTheDocument();
+  });
+
+  it('has role=dialog and aria-modal=true', () => {
+    render(<Modal open={true} onClose={() => {}}>Content</Modal>);
+    expect(screen.getByRole('dialog')).toHaveAttribute('aria-modal', 'true');
+  });
+
+  it('calls onClose when backdrop clicked', () => {
+    const onClose = vi.fn();
+    render(<Modal open={true} onClose={onClose}>Content</Modal>);
+    fireEvent.click(screen.getByTestId('modal-backdrop'));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onClose when ESC pressed', () => {
+    const onClose = vi.fn();
+    render(<Modal open={true} onClose={onClose}>Content</Modal>);
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onClose on backdrop when closeOnBackdrop=false', () => {
+    const onClose = vi.fn();
+    render(<Modal open={true} onClose={onClose} closeOnBackdrop={false}>Content</Modal>);
+    fireEvent.click(screen.getByTestId('modal-backdrop'));
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('renders title with aria-labelledby', () => {
+    render(<Modal open={true} onClose={() => {}} title="Test Title">Content</Modal>);
+    const dialog = screen.getByRole('dialog');
+    expect(dialog).toHaveAttribute('aria-labelledby', 'modal-title');
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+  });
+
+  it('renders close button with aria-label', () => {
+    render(<Modal open={true} onClose={() => {}}>Content</Modal>);
+    expect(screen.getByLabelText('Close dialog')).toBeInTheDocument();
+  });
+});