From ea6a0bd9ca7331df2073af4281af278de80c03df Mon Sep 17 00:00:00 2001
From: patrick <patrickjaroszewski@protonmail.com>
Date: Thu, 14 May 2026 08:38:47 -0400
Subject: [PATCH] Fix a11y label associations across components

- Add for/id attributes to associate labels with form controls in PipelinePanel
- Add for/id for pipeline select in +page.svelte
- Change Device label to span since DeviceSelector has its own internal label

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/lib/components/PipelinePanel.svelte | 24 ++++++++++++++++--------
 src/routes/+page.svelte                 |  7 ++++---
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/PipelinePanel.svelte b/src/lib/components/PipelinePanel.svelte
index d3c8464..3236895 100644
--- a/src/lib/components/PipelinePanel.svelte
+++ b/src/lib/components/PipelinePanel.svelte
@@ -92,11 +92,12 @@
 <div class="flex flex-col h-full">
 	<!-- Preset selector -->
 	<div class="p-4 border-b border-grey-200">
-		<label class="block text-xs font-medium text-grey-500 uppercase tracking-wide mb-2">
+		<label for="preset-select" class="block text-xs font-medium text-grey-500 uppercase tracking-wide mb-2">
 			Preset
 		</label>
 		<div class="flex gap-2">
 			<select
+				id="preset-select"
 				class="
 					flex-1 px-3 py-2
 					bg-white text-ink text-sm
@@ -174,8 +175,9 @@
 			defaultExpanded
 		>
 			{#snippet children()}
-				<label class="block text-xs text-grey-500 mb-1">Mode</label>
+				<label for="crop-mode" class="block text-xs text-grey-500 mb-1">Mode</label>
 				<select
+					id="crop-mode"
 					class="w-full px-2 py-1.5 text-sm border border-grey-200 rounded-md"
 					value={config.crop.mode}
 					onchange={(e) => updateStep('crop', { mode: (e.target as HTMLSelectElement).value as CropMode })}
@@ -195,8 +197,9 @@
 			defaultExpanded
 		>
 			{#snippet children()}
-				<label class="block text-xs text-grey-500 mb-1">Mode</label>
+				<label for="resize-mode" class="block text-xs text-grey-500 mb-1">Mode</label>
 				<select
+					id="resize-mode"
 					class="w-full px-2 py-1.5 text-sm border border-grey-200 rounded-md"
 					value={config.resize.mode}
 					onchange={(e) => updateStep('resize', { mode: (e.target as HTMLSelectElement).value as ResizeMode })}
@@ -281,9 +284,10 @@
 			onToggle={(enabled) => updateStep('autoLevels', { enabled })}
 		>
 			{#snippet children()}
-				<label class="block text-xs text-grey-500 mb-1">Clip %</label>
+				<label for="autolevels-clip" class="block text-xs text-grey-500 mb-1">Clip %</label>
 				<div class="flex items-center gap-2">
 					<input
+						id="autolevels-clip"
 						type="range"
 						min="0"
 						max="5"
@@ -305,8 +309,9 @@
 			defaultExpanded
 		>
 			{#snippet children()}
-				<label class="block text-xs text-grey-500 mb-1">Method</label>
+				<label for="greyscale-method" class="block text-xs text-grey-500 mb-1">Method</label>
 				<select
+					id="greyscale-method"
 					class="w-full px-2 py-1.5 text-sm border border-grey-200 rounded-md"
 					value={config.greyscale.method}
 					onchange={(e) => updateStep('greyscale', { method: (e.target as HTMLSelectElement).value as GreyscaleMethod })}
@@ -325,9 +330,10 @@
 			onToggle={(enabled) => updateStep('sharpen', { enabled })}
 		>
 			{#snippet children()}
-				<label class="block text-xs text-grey-500 mb-1">Amount</label>
+				<label for="sharpen-amount" class="block text-xs text-grey-500 mb-1">Amount</label>
 				<div class="flex items-center gap-2">
 					<input
+						id="sharpen-amount"
 						type="range"
 						min="0"
 						max="100"
@@ -348,8 +354,9 @@
 			onToggle={(enabled) => updateStep('quantize', { enabled })}
 		>
 			{#snippet children()}
-				<label class="block text-xs text-grey-500 mb-1">Levels</label>
+				<label for="quantize-levels" class="block text-xs text-grey-500 mb-1">Levels</label>
 				<select
+					id="quantize-levels"
 					class="w-full px-2 py-1.5 text-sm border border-grey-200 rounded-md"
 					value={config.quantize.levels}
 					onchange={(e) => updateStep('quantize', { levels: parseInt((e.target as HTMLSelectElement).value) })}
@@ -373,8 +380,9 @@
 			onToggle={(enabled) => updateStep('dither', { enabled })}
 		>
 			{#snippet children()}
-				<label class="block text-xs text-grey-500 mb-1">Algorithm</label>
+				<label for="dither-algorithm" class="block text-xs text-grey-500 mb-1">Algorithm</label>
 				<select
+					id="dither-algorithm"
 					class="w-full px-2 py-1.5 text-sm border border-grey-200 rounded-md"
 					value={config.dither.algorithm}
 					onchange={(e) => updateStep('dither', { algorithm: (e.target as HTMLSelectElement).value as DitherAlgorithm })}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 59eaf8d..1b9ec03 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -399,18 +399,19 @@
 			<!-- Controls bar -->
 		<div class="flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-6">
 			<div class="flex-1 max-w-xs">
-				<label class="block text-xs font-medium text-grey-500 uppercase tracking-wide mb-1.5">
+				<span class="block text-xs font-medium text-grey-500 uppercase tracking-wide mb-1.5">
 					Device
-				</label>
+				</span>
 				<DeviceSelector onCustomClick={openCustomModal} />
 			</div>
 
 			<div class="w-full sm:w-auto sm:max-w-xs">
-				<label class="block text-xs font-medium text-grey-500 uppercase tracking-wide mb-1.5">
+				<label for="pipeline-select" class="block text-xs font-medium text-grey-500 uppercase tracking-wide mb-1.5">
 					Pipeline
 				</label>
 				<div class="flex items-center gap-2">
 					<select
+						id="pipeline-select"
 						class="
 							flex-1 px-3 py-2
 							bg-white text-ink text-sm