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

refactor(geschichte): CSS.escape in focus queries, announceTimer cleanup, warning icon (#795)

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-11 13:11:12 +02:00
parent d91bedbaaf
commit 232721214d
1 changed files with 22 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/lib/geschichte/StoryDocumentPanel.svelte
View File

@@ -29,6 +29,10 @@ let liveAnnounce = $state('');
let announceTimer: ReturnType<typeof setTimeout> | null = null;
let sectionEl: HTMLElement | null = $state(null);
$effect(() => () => {
if (announceTimer) clearTimeout(announceTimer);
});
const alreadyAddedIds = $derived(
new Set(items.filter((i) => i.document).map((i) => i.document!.id))
);
@@ -86,7 +90,9 @@ async function moveFocusAfterRemove(removedIdx: number) {
return;
}
const target = items[Math.max(removedIdx - 1, 0)];
sectionEl?.querySelector<HTMLElement>(`[data-item-id="${target.id}"] [data-remove-btn]`)?.focus();
sectionEl
?.querySelector<HTMLElement>(`[data-item-id="${CSS.escape(target.id)}"] [data-remove-btn]`)
?.focus();
}
/** Optimistic removal with snapshot-and-rollback. */
@@ -142,8 +148,22 @@ async function handleRemove(item: JourneyItemView) {
{#if errorMessage}
<p
role="alert"
class="mb-3 rounded border border-danger bg-danger/10 px-3 py-2 font-sans text-sm text-danger"
class="mb-3 flex items-start gap-2 rounded border border-danger bg-danger/10 px-3 py-2 font-sans text-sm text-danger"
>
<svg
class="mt-0.5 h-4 w-4 flex-none"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
/>
</svg>
{errorMessage}
</p>
{/if}