From 44e28bbba85babe684b5a681bd04315f6be1d47b Mon Sep 17 00:00:00 2001
From: Wuesteon <nils.weiser@outlook.com>
Date: Mon, 15 Dec 2025 19:14:08 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20fix(worldream):=20add=20a1?=
 =?UTF-8?q?1y=20attributes=20to=20modal=20and=20dialog=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../apps/web/src/lib/components/AiGenerator.svelte          | 3 +++
 .../apps/web/src/lib/components/ImageGallery.svelte         | 3 +++
 .../apps/web/src/lib/components/ImageUploadModal.svelte     | 6 ++++++
 .../worldream/apps/web/src/lib/components/NodeDetail.svelte | 4 ++--
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/games/worldream/apps/web/src/lib/components/AiGenerator.svelte b/games/worldream/apps/web/src/lib/components/AiGenerator.svelte
index 6df6c950c..019ceddd1 100644
--- a/games/worldream/apps/web/src/lib/components/AiGenerator.svelte
+++ b/games/worldream/apps/web/src/lib/components/AiGenerator.svelte
@@ -108,6 +108,9 @@
 				<div
 					class="fixed inset-0 bg-slate-500 bg-opacity-75 transition-opacity"
 					onclick={toggleDialog}
+					role="button"
+					tabindex="-1"
+					aria-label="Close dialog"
 				></div>
 
 				<!-- Modal panel -->
diff --git a/games/worldream/apps/web/src/lib/components/ImageGallery.svelte b/games/worldream/apps/web/src/lib/components/ImageGallery.svelte
index 4a5899751..54c1c53c7 100644
--- a/games/worldream/apps/web/src/lib/components/ImageGallery.svelte
+++ b/games/worldream/apps/web/src/lib/components/ImageGallery.svelte
@@ -190,6 +190,9 @@
 	<div
 		class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-90 p-4"
 		onclick={closeLightbox}
+		role="dialog"
+		aria-modal="true"
+		tabindex="-1"
 	>
 		<div class="relative max-h-full max-w-6xl">
 			<img
diff --git a/games/worldream/apps/web/src/lib/components/ImageUploadModal.svelte b/games/worldream/apps/web/src/lib/components/ImageUploadModal.svelte
index dd4bdc652..be54d2409 100644
--- a/games/worldream/apps/web/src/lib/components/ImageUploadModal.svelte
+++ b/games/worldream/apps/web/src/lib/components/ImageUploadModal.svelte
@@ -166,11 +166,15 @@
 		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
 		transition:fade={{ duration: 200 }}
 		onclick={onClose}
+		role="dialog"
+		aria-modal="true"
+		tabindex="-1"
 	>
 		<div
 			class="relative w-full max-w-3xl rounded-lg bg-theme-surface p-6 shadow-xl"
 			transition:scale={{ duration: 200, start: 0.95 }}
 			onclick={(e) => e.stopPropagation()}
+			role="document"
 		>
 			<!-- Header -->
 			<div class="mb-6 flex items-center justify-between">
@@ -200,6 +204,8 @@
 				ondragleave={handleDragLeave}
 				ondragover={handleDragOver}
 				ondrop={handleDrop}
+				role="region"
+				aria-label="Datei-Upload-Bereich"
 			>
 				<svg
 					class="mx-auto mb-4 h-12 w-12 text-theme-text-secondary"
diff --git a/games/worldream/apps/web/src/lib/components/NodeDetail.svelte b/games/worldream/apps/web/src/lib/components/NodeDetail.svelte
index 023b2cf45..61fb8379a 100644
--- a/games/worldream/apps/web/src/lib/components/NodeDetail.svelte
+++ b/games/worldream/apps/web/src/lib/components/NodeDetail.svelte
@@ -253,8 +253,8 @@
 
 	const contentFields = getContentFields();
 
-	// Check if layout should be side-by-side
-	const isSideBySide = node.kind === 'character' || node.kind === 'object';
+	// Check if layout should be side-by-side (reactive to node changes)
+	const isSideBySide = $derived(node.kind === 'character' || node.kind === 'object');
 </script>
 
 {#if !isSideBySide && (node.kind === 'world' || node.kind === 'place') && !loadingImages && (images.length > 0 || node.image_url)}