From 0c89c13bb28337ee636d55f20cdabc329b34e05e Mon Sep 17 00:00:00 2001
From: Schalli <kschaller@ctl.de>
Date: Mon, 21 Sep 2026 14:43:36 +0200
Subject: [PATCH] fix(quick-260921-jt4): calendar-settings-panel
 Loeschdialog-Hintergrund wird echte Schaltflaeche

- Zentrierbehaelter verliert den e.target===e.currentTarget-Handler,
  die Hintergrundfarbe wandert auf eine eigene benannte <button> (D-01)
- Muss abbrechen, darf niemals loeschen (T-JT4-04): Beschriftung nennt
  ausdruecklich das Abbrechen (widgets.calendar.deleteDialogCancel)
- Dialogkarte bekommt relative, aria-label des alertdialog aus dem
  Katalog statt fest verdrahtetem Englisch (deleteDialogLabel)
- Neue Testdatei belegt per Klick UND echter Tastaturbetaetigung, dass
  der Hintergrundweg abbricht und deleteSource nie aufgerufen wird;
  eigener Test fuer den tatsaechlichen Loeschweg ueber die CTA

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TPPB4ApQxzSU1rwV2Ffj9J
---
 .../settings/calendar-settings-panel.test.tsx | 131 ++++++++++++++++++
 .../settings/calendar-settings-panel.tsx      |  20 +--
 apps/web/src/messages/de.json                 |   4 +-
 apps/web/src/messages/en.json                 |   4 +-
 4 files changed, 149 insertions(+), 10 deletions(-)
 create mode 100644 apps/web/src/components/settings/calendar-settings-panel.test.tsx

diff --git a/apps/web/src/components/settings/calendar-settings-panel.test.tsx b/apps/web/src/components/settings/calendar-settings-panel.test.tsx
new file mode 100644
index 0000000..8ca7c8a
--- /dev/null
+++ b/apps/web/src/components/settings/calendar-settings-panel.test.tsx
@@ -0,0 +1,131 @@
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('next-intl', () => ({
+  useTranslations: (namespace: string) => (key: string) => {
+    const translations: Record<string, Record<string, string>> = {
+      widgets: {
+        'calendar.sourceEmpty':
+          'Keine Kalenderquellen eingerichtet. Fügen Sie eine Quelle hinzu, um Termine anzuzeigen.',
+        'calendar.addSource': 'Quelle hinzufügen',
+        'calendar.deleteDialogCancel': 'Löschen abbrechen',
+        'calendar.deleteDialogLabel': 'Löschen bestätigen',
+        'calendar.saveError': 'Fehler beim Speichern',
+        'calendar.saveSuccess': 'Gespeichert',
+      },
+      settings: {
+        sourceDeleteCta: 'Quelle löschen',
+        sourceDeleteConfirm: 'Möchten Sie diese Kalenderquelle wirklich löschen?',
+        cancel: 'Abbrechen',
+      },
+    };
+    return translations[namespace]?.[key] ?? key;
+  },
+}));
+
+vi.mock('@/lib/calendar-api', () => ({
+  fetchSources: vi.fn(),
+  addSource: vi.fn(),
+  updateSource: vi.fn(),
+  deleteSource: vi.fn(),
+  testSource: vi.fn(),
+}));
+
+vi.mock('./calendar-source-form', () => ({
+  CalendarSourceForm: () => <div data-testid="calendar-source-form" />,
+}));
+
+import { fetchSources, deleteSource } from '@/lib/calendar-api';
+import type { CalendarSource } from '@/lib/calendar-api';
+import { CalendarSettingsPanel } from './calendar-settings-panel';
+
+const baseSource: CalendarSource = {
+  id: 'src-1',
+  userId: 'user-1',
+  tenantId: 'tenant-1',
+  name: 'Firmenkalender',
+  type: 'caldav',
+  url: 'https://example.test/dav',
+  isVisible: true,
+  syncIntervalMin: 15,
+  createdAt: '2026-01-01T00:00:00Z',
+  updatedAt: '2026-01-01T00:00:00Z',
+};
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+async function renderWithOneSource() {
+  vi.mocked(fetchSources).mockResolvedValue([baseSource]);
+  render(<CalendarSettingsPanel />);
+  await screen.findByText('Firmenkalender');
+}
+
+describe('CalendarSettingsPanel — delete confirmation dialog (D-01, T-JT4-04)', () => {
+  it('opens the delete confirmation dialog when clicking the delete icon', async () => {
+    const user = userEvent.setup();
+    await renderWithOneSource();
+
+    await user.click(screen.getByRole('button', { name: 'Delete Firmenkalender' }));
+
+    expect(
+      screen.getByRole('alertdialog', { name: 'Löschen bestätigen' }),
+    ).toBeInTheDocument();
+  });
+
+  it('mouse-clicking the backdrop aborts: the source is NOT deleted and the dialog closes', async () => {
+    const user = userEvent.setup();
+    await renderWithOneSource();
+
+    await user.click(screen.getByRole('button', { name: 'Delete Firmenkalender' }));
+    await user.click(screen.getByRole('button', { name: 'Löschen abbrechen' }));
+
+    expect(deleteSource).not.toHaveBeenCalled();
+    expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
+    // Source is still listed — the abort path never removed it.
+    expect(screen.getByText('Firmenkalender')).toBeInTheDocument();
+  });
+
+  it('a real keyboard activation (Enter on the focused backdrop button) also aborts, never deletes', async () => {
+    const user = userEvent.setup();
+    await renderWithOneSource();
+
+    await user.click(screen.getByRole('button', { name: 'Delete Firmenkalender' }));
+
+    const backdrop = screen.getByRole('button', { name: 'Löschen abbrechen' });
+    backdrop.focus();
+    await user.keyboard('{Enter}');
+
+    expect(deleteSource).not.toHaveBeenCalled();
+    expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
+    expect(screen.getByText('Firmenkalender')).toBeInTheDocument();
+  });
+
+  it('clicking the explicit delete CTA inside the dialog deletes the source', async () => {
+    vi.mocked(deleteSource).mockResolvedValue(undefined);
+    const user = userEvent.setup();
+    await renderWithOneSource();
+
+    await user.click(screen.getByRole('button', { name: 'Delete Firmenkalender' }));
+    await user.click(screen.getByRole('button', { name: 'Quelle löschen' }));
+
+    await waitFor(() => expect(deleteSource).toHaveBeenCalledWith('src-1'));
+    await waitFor(() =>
+      expect(screen.queryByText('Firmenkalender')).not.toBeInTheDocument(),
+    );
+  });
+
+  it('clicking inside the dialog card itself does not close it or delete anything', async () => {
+    const user = userEvent.setup();
+    await renderWithOneSource();
+
+    await user.click(screen.getByRole('button', { name: 'Delete Firmenkalender' }));
+    await user.click(screen.getByRole('alertdialog', { name: 'Löschen bestätigen' }));
+
+    expect(deleteSource).not.toHaveBeenCalled();
+    expect(screen.getByRole('alertdialog')).toBeInTheDocument();
+  });
+});
diff --git a/apps/web/src/components/settings/calendar-settings-panel.tsx b/apps/web/src/components/settings/calendar-settings-panel.tsx
index e5f2b49..42d0e98 100644
--- a/apps/web/src/components/settings/calendar-settings-panel.tsx
+++ b/apps/web/src/components/settings/calendar-settings-panel.tsx
@@ -370,17 +370,21 @@ export function CalendarSettingsPanel() {
 
       {/* Delete confirmation dialog (UI-SPEC destructive pattern) */}
       {deletingId && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-          onClick={(e) => {
-            if (e.target === e.currentTarget) setDeletingId(null);
-          }}
-        >
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+          {/* Hintergrund — jetzt eine echte, benannte Schaltflaeche. Sie MUSS
+              abbrechen und darf unter keinen Umstaenden loeschen (T-JT4-04). */}
+          <button
+            type="button"
+            onClick={() => setDeletingId(null)}
+            aria-label={t('calendar.deleteDialogCancel')}
+            className="fixed inset-0 bg-black/50"
+          />
+
           <div
-            className="mx-4 max-w-md rounded-lg border border-border bg-card p-6 shadow-xl"
+            className="relative mx-4 max-w-md rounded-lg border border-border bg-card p-6 shadow-xl"
             role="alertdialog"
             aria-modal="true"
-            aria-label="Confirm deletion"
+            aria-label={t('calendar.deleteDialogLabel')}
           >
             <h3 className="mb-2 text-lg font-semibold text-foreground">
               {ts('sourceDeleteCta')}
diff --git a/apps/web/src/messages/de.json b/apps/web/src/messages/de.json
index 79d1b6a..1550802 100644
--- a/apps/web/src/messages/de.json
+++ b/apps/web/src/messages/de.json
@@ -281,7 +281,9 @@
       "formUrlErrorHttps": "Die Adresse muss mit https:// beginnen.",
       "formUrlErrorInvalid": "Bitte geben Sie eine gültige Adresse ein.",
       "saveSuccess": "Kalenderquelle gespeichert.",
-      "saveError": "Die Kalenderquelle konnte nicht gespeichert werden."
+      "saveError": "Die Kalenderquelle konnte nicht gespeichert werden.",
+      "deleteDialogCancel": "Löschen abbrechen",
+      "deleteDialogLabel": "Löschen bestätigen"
     },
     "note": {
       "name": "Notizen",
diff --git a/apps/web/src/messages/en.json b/apps/web/src/messages/en.json
index f07e26b..f7ca6bb 100644
--- a/apps/web/src/messages/en.json
+++ b/apps/web/src/messages/en.json
@@ -281,7 +281,9 @@
       "formUrlErrorHttps": "The address must start with https://.",
       "formUrlErrorInvalid": "Please enter a valid address.",
       "saveSuccess": "Calendar source saved.",
-      "saveError": "The calendar source could not be saved."
+      "saveError": "The calendar source could not be saved.",
+      "deleteDialogCancel": "Cancel deletion",
+      "deleteDialogLabel": "Confirm deletion"
     },
     "note": {
       "name": "Notes",