From 1d5164b629ff9ab7ef3ffe3ff63e3dab50fd39f6 Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Sun, 26 Jul 2026 16:22:46 +0200
Subject: [PATCH] client_v2: label form controls for a11y (select-name/label)

Add aria-labels to the Settings language select, currency/base-URL/
low-stock inputs, and the Labels toolbar + preview-bar selects, which
axe-core flagged as unnamed (WCAG select-name/label, critical) under the
mobile a11y audit. Adds a labels.selectDesign message key.
---
 client_v2/locales/en/common.json                         | 1 +
 client_v2/src/lib/components/labels/LabelDesigner.svelte | 6 +++++-
 client_v2/src/routes/labels/+page.svelte                 | 1 +
 client_v2/src/routes/settings/+page.svelte               | 4 ++++
 4 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/client_v2/locales/en/common.json b/client_v2/locales/en/common.json
index 18f2d4b6..c10f0355 100644
--- a/client_v2/locales/en/common.json
+++ b/client_v2/locales/en/common.json
@@ -139,6 +139,7 @@
     "labels.deleteConfirm": "Delete this label design?",
     "labels.deleteElement": "Delete element",
     "labels.designName": "Design name",
+    "labels.selectDesign": "Select label design",
     "labels.designerDesc": "Design QR-code labels with any spool, filament, or vendor field, then print them on sheets or a label printer. Designs are saved on the server.",
     "labels.designerTitle": "Label designer",
     "labels.dpi": "Resolution",
diff --git a/client_v2/src/lib/components/labels/LabelDesigner.svelte b/client_v2/src/lib/components/labels/LabelDesigner.svelte
index ce729849..34446d3f 100644
--- a/client_v2/src/lib/components/labels/LabelDesigner.svelte
+++ b/client_v2/src/lib/components/labels/LabelDesigner.svelte
@@ -201,7 +201,11 @@
 	<div class="stage-area">
 		<div class="preview-bar">
 			<span>{m['labels.previewWith']()}</span>
-			<select value={previewId} onchange={(e) => (previewId = e.currentTarget.value)}>
+			<select
+				aria-label={m['labels.previewWith']()}
+				value={previewId}
+				onchange={(e) => (previewId = e.currentTarget.value)}
+			>
 				<option value="">{m['labels.sampleData']()}</option>
 				{#if kind === 'filament'}
 					{#each previewFilaments as f (f.id)}
diff --git a/client_v2/src/routes/labels/+page.svelte b/client_v2/src/routes/labels/+page.svelte
index f7fffa83..bc14e43b 100644
--- a/client_v2/src/routes/labels/+page.svelte
+++ b/client_v2/src/routes/labels/+page.svelte
@@ -98,6 +98,7 @@
 
 		<div class="toolbar">
 			<select
+				aria-label={m['labels.selectDesign']()}
 				value={selectedId ?? ''}
 				onchange={(e) => selectDesign(e.currentTarget.value)}
 				disabled={labelDesigns.designs.length === 0}
diff --git a/client_v2/src/routes/settings/+page.svelte b/client_v2/src/routes/settings/+page.svelte
index 18748891..466f384d 100644
--- a/client_v2/src/routes/settings/+page.svelte
+++ b/client_v2/src/routes/settings/+page.svelte
@@ -60,6 +60,7 @@
 			<SettingRow title={m['settings.language.label']()} desc={m['settings.language.desc']()}>
 				<select
 					class="lang"
+					aria-label={m['settings.language.label']()}
 					value={getLocale()}
 					onchange={(e) => {
 						if (isLocale(e.currentTarget.value)) setLocale(e.currentTarget.value);
@@ -77,6 +78,7 @@
 			<SettingRow title={m['settings.general.currency.label']()} desc={m['settings.general.currency.desc']()}>
 				<input
 					class="code mono"
+					aria-label={m['settings.general.currency.label']()}
 					value={settings.currency}
 					maxlength="3"
 					onchange={(e) => saveCurrency(e.currentTarget.value)}
@@ -98,6 +100,7 @@
 			>
 				<input
 					class="url"
+					aria-label={m['settings.general.baseUrl.label']()}
 					value={settings.baseUrl}
 					placeholder="https://spoolman.example.com"
 					onchange={(e) => saveBaseUrl(e.currentTarget.value)}
@@ -114,6 +117,7 @@
 				<input
 					class="num mono"
 					type="number"
+					aria-label={m['settings.library.lowThreshold.label']()}
 					value={settings.lowThreshold}
 					oninput={(e) => settings.setLowThreshold(Number(e.currentTarget.value) || 0)}
 				/>