From 2829a851dff1d610b5929d2a9ba6458899299cac Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 20 Apr 2026 21:02:19 +0200
Subject: [PATCH] feat(a11y): associate errors with inputs in FormInput and
 FormSelect

Wire aria-invalid, aria-describedby and role=alert on the form
primitive components so errors raised directly on FormInput or
FormSelect are announced by assistive tech and programmatically
linked to the control.
---
 frontend/src/components/input/FormInput.vue  | 5 +++++
 frontend/src/components/input/FormSelect.vue | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/frontend/src/components/input/FormInput.vue b/frontend/src/components/input/FormInput.vue
index f9b51c261..f02a6e1e4 100644
--- a/frontend/src/components/input/FormInput.vue
+++ b/frontend/src/components/input/FormInput.vue
@@ -22,6 +22,7 @@ defineOptions({inheritAttrs: false})
 
 const fallbackId = useId()
 const inputId = computed(() => props.id ?? fallbackId)
+const errorId = computed(() => props.error ? `${inputId.value}-error` : undefined)
 
 const inputClasses = computed(() => [
 	'input',
@@ -67,11 +68,15 @@ defineExpose({
 		v-bind="{ ...$attrs, ...inputBindings }"
 		:class="inputClasses"
 		:disabled="disabled || undefined"
+		:aria-invalid="error ? true : undefined"
+		:aria-describedby="errorId"
 		@input="handleInput"
 	>
 	<p
 		v-if="error"
+		:id="errorId"
 		class="help is-danger"
+		role="alert"
 	>
 		{{ error }}
 	</p>
diff --git a/frontend/src/components/input/FormSelect.vue b/frontend/src/components/input/FormSelect.vue
index 96e77ec01..ccbfe6b39 100644
--- a/frontend/src/components/input/FormSelect.vue
+++ b/frontend/src/components/input/FormSelect.vue
@@ -27,6 +27,7 @@ defineOptions({inheritAttrs: false})
 
 const fallbackId = useId()
 const selectId = computed(() => props.id ?? fallbackId)
+const errorId = computed(() => props.error ? `${selectId.value}-error` : undefined)
 
 const wrapperClasses = computed(() => [
 	'select',
@@ -70,6 +71,8 @@ function handleChange(event: Event) {
 			:id="selectId"
 			v-bind="{ ...$attrs, ...selectBindings }"
 			:disabled="disabled || undefined"
+			:aria-invalid="error ? true : undefined"
+			:aria-describedby="errorId"
 			@change="handleChange"
 		>
 			<template v-if="normalizedOptions">
@@ -87,7 +90,9 @@ function handleChange(event: Event) {
 	</div>
 	<p
 		v-if="error"
+		:id="errorId"
 		class="help is-danger"
+		role="alert"
 	>
 		{{ error }}
 	</p>