refac

src/lib/components/common/PDFViewer.svelte

@@ -466,7 +466,7 @@
 	});
 </script>
 
-	<div class="relative {className}">
+<div class="relative {className}">
 	{#if loading}
 		<div class="absolute inset-0 flex items-center justify-center">
 			<Spinner className="size-5" />
@@ -477,17 +477,19 @@
 		</div>
 	{/if}
 
-		<div
+	<div
-			class={singlePage
+		class={singlePage
-				? 'overflow-hidden h-full flex items-center justify-center overscroll-contain'
+			? 'overflow-hidden h-full flex items-center justify-center overscroll-contain'
-				: 'overflow-y-auto h-full'}
+			: 'overflow-y-auto h-full'}
-			bind:this={outerContainer}
+		bind:this={outerContainer}
-			tabindex="0"
+		role="region"
-			on:scroll={handleScroll}
+		aria-label={`${itemLabel} viewer`}
-			on:wheel|nonpassive={handleWheel}
+		tabindex="0"
-			on:pointerdown={focusViewer}
+		on:scroll={handleScroll}
-			on:keydown={handleKeyDown}
+		on:wheel|nonpassive={handleWheel}
-		>
+		on:pointerdown={focusViewer}
+		on:keydown={handleKeyDown}
+	>
 		<div bind:this={sceneElement} class={singlePage ? '' : 'w-full'}></div>
 	</div>
 

src/lib/components/common/PptxPreview.svelte

@@ -231,15 +231,17 @@
 	});
 </script>
 
-	<div
+<div
-		bind:this={rootEl}
+	bind:this={rootEl}
-		tabindex="0"
+	role="region"
-		on:keydown={handleKeyDown}
+	aria-label={`${itemLabel} preview`}
-		on:pointerdown={focusPreview}
+	tabindex="0"
-		class="relative grid {hideThumbs
+	on:keydown={handleKeyDown}
-			? 'grid-cols-[minmax(0,1fr)]'
+	on:pointerdown={focusPreview}
-			: 'grid-cols-[144px_minmax(0,1fr)]'} min-h-0 bg-transparent text-gray-900 dark:text-gray-100 {className}"
+	class="relative grid {hideThumbs
-	>
+		? 'grid-cols-[minmax(0,1fr)]'
+		: 'grid-cols-[144px_minmax(0,1fr)]'} min-h-0 bg-transparent text-gray-900 dark:text-gray-100 {className}"
+>
 	<aside
 		class={hideThumbs
 			? 'hidden'