test: less fragile - use semantic locators\helpers

web/src/lib/components/CatalogGroup.svelte

@@ -12,7 +12,7 @@
 
 <section class="catalog-group">
 	<div class="group-title">
-		<span>{label}</span>
+		<h2>{label}</h2>
 		<i>{count.toString().padStart(2, "0")} <!-- --> {t("catalog.toolsCount")}</i
 		>
 	</div>
@@ -35,7 +35,8 @@
 		padding-bottom: var(--space-m);
 		border-bottom: var(--size-border) solid var(--color-border);
 	}
-	.group-title span {
+	.group-title h2 {
+		margin: 0;
 		font: var(--font-size-s) var(--font-mono);
 		letter-spacing: var(--space-text-xl);
 		text-transform: uppercase;

web/src/lib/components/CatalogHeader.svelte

@@ -12,10 +12,13 @@
 		<h1>{t("catalog.heading")}</h1>
 		<p>{t("catalog.lead")}</p>
 	</div>
-	<div class="catalog-total">
+	<output
+		class="catalog-total"
+		aria-label={`${total} ${t("catalog.toolsAvailable")}`}
+	>
 		<b>{total}</b>
 		<span>{t("catalog.toolsAvailable")}</span>
-	</div>
+	</output>
 </div>
 
 <style>

web/src/lib/components/CatalogToolbar.svelte

@@ -38,6 +38,7 @@
 			<button
 				type="button"
 				class:active={category === f.value}
+				aria-pressed={category === f.value}
 				onclick={() => (category = f.value)}
 			>
 				{f.label}

web/src/lib/components/SchemaResultTile.svelte

@@ -82,11 +82,17 @@
 				{/each}
 			</div>
 		{:else if resultKind === "image" && resultUrl}
-			<img src={resultUrl} alt={t("resultCard.alt")} />
+			<img
+				data-testid="result-image"
+				src={resultUrl}
+				alt={t("resultCard.alt")}
+			/>
 		{:else if running}
 			<Check size={22} />
 		{:else}
-			<span class="empty">{t("resultCard.noResult")}</span>
+			<span data-testid="empty-state" class="empty"
+				>{t("resultCard.noResult")}</span
+			>
 		{/if}
 	</div>
 </PreviewTile>

web/src/lib/components/SchemaSourceTile.svelte

@@ -37,7 +37,7 @@
 			/>
 		</div>
 	{:else if mode === "image" && sourceUrl}
-		<img src={sourceUrl} alt={t("sourceCard.alt")} />
+		<img data-testid="source-image" src={sourceUrl} alt={t("sourceCard.alt")} />
 	{:else if mode === "image"}
 		<span class="empty">{t("sourceCard.chooseImage")}</span>
 	{:else}

web/src/lib/components/SchemaTextResult.svelte

@@ -32,7 +32,11 @@
 {#if kind === "verdict"}
 	<div class="verdict">
 		<span class="verdict-label">{t("resultCard.result")}</span>
-		<div class="badge badge-tone--{tone}" role="status">
+		<div
+			data-testid="result-verdict"
+			class="badge badge-tone--{tone}"
+			role="status"
+		>
 			<span class="verdict-text">{displayValue}</span>
 			<IconButton icon={Copy} label={t("textResult.copy")} onclick={oncopy} />
 		</div>
@@ -50,7 +54,9 @@
 				/>
 			</div>
 		</div>
-		<pre class="result-pre"><code>{value}</code></pre>
+		<pre aria-label={t("textResult.outputAria")} class="result-pre"><code
+				>{value}</code
+			></pre>
 	</div>
 {/if}
 

web/src/lib/components/SchemaTextSource.svelte

@@ -22,6 +22,7 @@
 
 <div class="text-source">
 	<textarea
+		aria-label={t("textInput.aria")}
 		spellcheck="false"
 		{placeholder}
 		rows="6"

web/src/lib/components/fields/schema/RangeControl.svelte

@@ -25,6 +25,7 @@
 		<output>{current}</output>
 	</span>
 	<input
+		aria-label={label}
 		type="range"
 		min={sp.min ?? 0}
 		max={sp.max ?? 100}