patrick/2eInk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix a11y label associations across components

Browse Source 
- 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>
This commit is contained in:
Patrick Jaroszewski
2026-05-14 08:38:47 -04:00
parent d9d10cd6fb
commit ea6a0bd9ca
2 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/lib/components/PipelinePanel.svelte
View File

@@ -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 })}

7
src/routes/+page.svelte
View File

@@ -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