marcel/familienarchiv
1
0
Fork 0
Code Issues 120 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(journey): editor review round — labels, errors, pending state, a11y, tests

Browse Source 
Addresses the remaining #792 review blockers and concerns in the journey
editor cluster:

- Interlude rows show 'Zwischentext' (dedicated key), not the add-button text
- All four mutation handlers route the backend ErrorCode through
  getErrorMessage (a 409 duplicate no longer says 'bitte Seite neu laden')
  and console.error their failures so client-side errors leave a trace
- Remove implements the spec'd pending state: row stays dimmed with an
  aria-live 'wird entfernt…' until the DELETE resolves; failure keeps the row
- Move announcements fire after the reorder resolves (no false 'verschoben')
- Touch targets ≥44px (remove ×, note links, create submit); focus moves to
  the new row after add, to a sensible neighbor after remove, back to × on
  confirm-cancel; drag handle is pointer-only; title/intro get aria-labels;
  publish-disabled reason is a visible hint, not a title tooltip
- Amber warning styles use new --color-warning-* tokens with dark remaps
- Blocked interlude-clear restores the draft instead of showing phantom text
- useBlockDragDrop moves to $lib/shared/hooks — geschichte no longer imports
  another domain's internals
- Test hardening: reorder-failure rollback (non-ok + reject), publish/
  unpublish/empty-warning surface, destructive confirm path, maxlength
  assertions, JourneyCreate failure path, edit-page STORY/JOURNEY branch,
  fixture factory, m.* assertions, all fixed sleeps replaced with polling

67 component tests green across 6 spec files; transcription consumer of the
moved hook re-verified (30 green).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-10 07:55:12 +02:00
parent 7977d22d0b
commit f10b0cb73e
13 changed files with 843 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/routes/geschichten/[id]/edit/page.svelte.test.ts
View File

@@ -1,6 +1,7 @@
import { describe, it, expect, vi, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import { m } from '$lib/paraglide/messages.js';
vi.mock('$app/navigation', () => ({
beforeNavigate: () => {},
@@ -21,13 +22,20 @@ const { default: GeschichtenEditPage } = await import('./+page.svelte');
afterEach(cleanup);
const baseData = (overrides: Record<string, unknown> = {}) => ({
user: undefined,
canWrite: true,
canAnnotate: false,
canBlogWrite: true,
geschichte: {
id: 'g1',
title: 'Die Reise nach Berlin',
body: '<p>Im Jahr 1923...</p>',
status: 'PUBLISHED' as 'DRAFT' | 'PUBLISHED',
type: 'STORY' as 'STORY' | 'JOURNEY',
persons: [],
documents: []
items: [],
createdAt: '2024-01-01T00:00:00',
updatedAt: '2024-01-01T00:00:00'
},
...overrides
});
@@ -60,4 +68,50 @@ describe('geschichten/[id]/edit page', () => {
const inputs = document.querySelectorAll('input, textarea, [contenteditable]');
expect(inputs.length).toBeGreaterThan(0);
});
it('renders the JourneyEditor (add-bar, no TipTap toolbar) for JOURNEY-type geschichten', async () => {
render(GeschichtenEditPage, {
props: {
data: baseData({
geschichte: {
id: 'g1',
title: 'Die Reise nach Berlin',
body: '',
status: 'DRAFT' as const,
type: 'JOURNEY' as const,
persons: [],
items: [],
createdAt: '2024-01-01T00:00:00',
updatedAt: '2024-01-01T00:00:00'
}
})
}
});
await expect.element(page.getByText(m.journey_add_document())).toBeVisible();
expect(document.querySelector('[role="toolbar"]')).toBeNull();
});
it('renders the GeschichteEditor (TipTap toolbar, no add-bar) for STORY-type geschichten', async () => {
render(GeschichtenEditPage, {
props: {
data: baseData({
geschichte: {
id: 'g1',
title: 'Die Reise nach Berlin',
body: '<p>Im Jahr 1923...</p>',
status: 'DRAFT' as const,
type: 'STORY' as const,
persons: [],
items: [],
createdAt: '2024-01-01T00:00:00',
updatedAt: '2024-01-01T00:00:00'
}
})
}
});
await expect.element(page.getByRole('toolbar')).toBeVisible();
await expect.element(page.getByText(m.journey_add_document())).not.toBeInTheDocument();
});
});

3
frontend/src/routes/geschichten/new/JourneyCreate.svelte
View File

@@ -60,6 +60,7 @@ async function handleSubmit(e: SubmitEvent) {
bind:value={title}
onblur={() => (titleTouched = true)}
placeholder={m.geschichte_editor_title_placeholder()}
aria-label={m.journey_title_aria_label()}
aria-invalid={showTitleError}
class="block w-full rounded border px-3 py-2 font-serif text-lg text-ink placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring {showTitleError
? 'border-danger'
@@ -74,7 +75,7 @@ async function handleSubmit(e: SubmitEvent) {
<button
type="submit"
disabled={submitting}
class="rounded bg-brand-navy px-4 py-2 font-sans text-sm font-medium text-white hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:opacity-50"
class="inline-flex h-11 items-center rounded bg-brand-navy px-4 font-sans text-sm font-medium text-white hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:opacity-50"
>
{m.journey_create_submit()}
</button>

73
frontend/src/routes/geschichten/new/JourneyCreate.svelte.spec.ts Normal file
View File

@@ -0,0 +1,73 @@
import { afterEach, describe, expect, it, vi } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page, userEvent } from 'vitest/browser';
import { m } from '$lib/paraglide/messages.js';
import { getErrorMessage } from '$lib/shared/errors';
vi.mock('$app/navigation', () => ({
goto: vi.fn()
}));
const { default: JourneyCreate } = await import('./JourneyCreate.svelte');
afterEach(() => {
cleanup();
vi.unstubAllGlobals();
});
describe('JourneyCreate — failure path', () => {
it('renders the mapped error message when POST /api/geschichten fails with a code', async () => {
vi.stubGlobal(
'fetch',
vi.fn().mockResolvedValue({
ok: false,
json: vi.fn().mockResolvedValue({ code: 'VALIDATION_ERROR' })
})
);
render(JourneyCreate, {});
await userEvent.fill(
page.getByRole('textbox', { name: m.journey_title_aria_label() }),
'Meine Lesereise'
);
await userEvent.click(page.getByRole('button', { name: m.journey_create_submit() }));
const alert = page.getByRole('alert');
await expect.element(alert).toBeInTheDocument();
await expect.element(alert).toHaveTextContent(getErrorMessage('VALIDATION_ERROR'));
});
it('navigates to the edit page on success', async () => {
const { goto } = await import('$app/navigation');
vi.mocked(goto).mockClear();
vi.stubGlobal(
'fetch',
vi.fn().mockResolvedValue({
ok: true,
json: vi.fn().mockResolvedValue({ id: 'g-new' })
})
);
render(JourneyCreate, {});
await userEvent.fill(
page.getByRole('textbox', { name: m.journey_title_aria_label() }),
'Meine Lesereise'
);
await userEvent.click(page.getByRole('button', { name: m.journey_create_submit() }));
await vi.waitFor(() => {
expect(goto).toHaveBeenCalledWith('/geschichten/g-new/edit');
});
});
it('has an accessible label on the title input', async () => {
vi.stubGlobal('fetch', vi.fn());
render(JourneyCreate, {});
await expect
.element(page.getByRole('textbox', { name: m.journey_title_aria_label() }))
.toBeInTheDocument();
});
});

21
frontend/src/routes/layout.css
View File

@@ -77,6 +77,11 @@
--color-warning: #b45309;
--color-warning-fg: #ffffff;
/* Warning surface — amber banner (bg/border/text), mode-aware */
--color-warning-bg: var(--c-warning-bg);
--color-warning-border: var(--c-warning-border);
--color-warning-text: var(--c-warning-text);
/* Journey / Lesereise — orange semantic tokens (badge, interlude block, annotation) */
--color-journey-tint: var(--c-journey-bg);
--color-journey: var(--c-journey-text);
@@ -149,6 +154,11 @@
--c-interlude-border: #a1dcd8;
--c-interlude-label: #4b5563;
/* Warning surface — amber banner; text #92400E on #FFFBEB ≈ 7.7:1 — WCAG AAA ✓ */
--c-warning-bg: #fffbeb;
--c-warning-border: #fcd34d;
--c-warning-text: #92400e;
/* Tag color tokens — decorative dot colors on tag chips */
--c-tag-sage: #5a8a6a;
--c-tag-sienna: #a0522d;
@@ -278,6 +288,12 @@
--c-interlude-bg: #151c22;
--c-interlude-border: #00c7b1;
--c-interlude-label: #8b97a5;
/* Warning surface — muted amber on dark; text #FBD38D on #2A2113 ≈ 9.5:1 — WCAG AAA ✓
KEEP IN SYNC with :root[data-theme='dark'] */
--c-warning-bg: #2a2113;
--c-warning-border: #6d5417;
--c-warning-text: #fbd38d;
}
}
@@ -363,6 +379,11 @@
--c-interlude-bg: #151c22;
--c-interlude-border: #00c7b1;
--c-interlude-label: #8b97a5;
/* Warning surface — KEEP IN SYNC with the @media block above */
--c-warning-bg: #2a2113;
--c-warning-border: #6d5417;
--c-warning-text: #fbd38d;
}
/* ─── 6. Icon inversion — De Gruyter icons are black SVGs loaded as <img> ──── */