From 8adbda4f1695c3d50d9ae54d33e0494c772fc88c Mon Sep 17 00:00:00 2001
From: greta <gretadoci@gmail.com>
Date: Thu, 18 Jun 2026 15:11:22 +0200
Subject: [PATCH] fix(a11y): add missing ARIA labels to form inputs and buttons

Screen reader users encountered unlabelled inputs in the event/task
creation modals, the alias edit form, and the composer attachment list,
and an incorrectly associated label in the search modal.

Assisted-by: ClaudeCode:claude-sonnet-4-6
Signed-off-by: greta <gretadoci@gmail.com>
---
 src/components/AliasForm.vue          | 2 ++
 src/components/ComposerAttachment.vue | 4 +++-
 src/components/EventModal.vue         | 7 ++++++-
 src/components/SearchMessages.vue     | 2 +-
 src/components/TaskModal.vue          | 3 ++-
 5 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/AliasForm.vue b/src/components/AliasForm.vue
index d8b7b878eb..3c358578f1 100644
--- a/src/components/AliasForm.vue
+++ b/src/components/AliasForm.vue
@@ -14,12 +14,14 @@
 				v-model="changeName"
 				type="text"
 				class="alias-form__form__input"
+				:aria-label="t('mail', 'Alias name')"
 				required>
 			<input
 				v-model="changeAlias"
 				:disabled="alias.provisioned"
 				type="email"
 				class="alias-form__form__input"
+				:aria-label="t('mail', 'Email address')"
 				required>
 		</form>
 		<div v-else>
diff --git a/src/components/ComposerAttachment.vue b/src/components/ComposerAttachment.vue
index 727c36f013..b2955fb71c 100644
--- a/src/components/ComposerAttachment.vue
+++ b/src/components/ComposerAttachment.vue
@@ -24,7 +24,9 @@
 				{{ attachment.sizeString }}
 			</span>
 		</div>
-		<button @click="onDelete(attachment)">
+		<button
+			:aria-label="t('mail', 'Remove attachment {fileName}', { fileName: attachment.displayName ?? attachment.fileName })"
+			@click="onDelete(attachment)">
 			<Close :size="20" />
 		</button>
 	</li>
diff --git a/src/components/EventModal.vue b/src/components/EventModal.vue
index 3e39080729..bb54785f00 100644
--- a/src/components/EventModal.vue
+++ b/src/components/EventModal.vue
@@ -10,7 +10,12 @@
 		<div class="modal-content">
 			<h2>{{ t('mail', 'Create event') }}</h2>
 			<div class="eventTitle">
-				<input v-model="eventTitle" :disabled="generatingData" type="text">
+				<label for="eventTitle">{{ t('mail', 'Title') }}</label>
+				<input
+					id="eventTitle"
+					v-model="eventTitle"
+					:disabled="generatingData"
+					type="text">
 			</div>
 			<div class="dateTimePicker">
 				<DatetimePicker
diff --git a/src/components/SearchMessages.vue b/src/components/SearchMessages.vue
index a9fe9ff3ff..d4c460c435 100644
--- a/src/components/SearchMessages.vue
+++ b/src/components/SearchMessages.vue
@@ -71,7 +71,7 @@
 						</div>
 					</div>
 					<div class="modal-inner--field">
-						<label class="modal-inner--label" for="fromId">
+						<label class="modal-inner--label">
 							{{ t('mail', 'Date') }}
 						</label>
 						<div class="modal-inner--container range">
diff --git a/src/components/TaskModal.vue b/src/components/TaskModal.vue
index 6364db1044..10dc880aa4 100644
--- a/src/components/TaskModal.vue
+++ b/src/components/TaskModal.vue
@@ -7,7 +7,8 @@
 		<div class="modal-content">
 			<h2>{{ t('mail', 'Create task') }}</h2>
 			<div class="taskTitle">
-				<input v-model="taskTitle" type="text">
+				<label for="taskTitle">{{ t('mail', 'Title') }}</label>
+				<input id="taskTitle" v-model="taskTitle" type="text">
 			</div>
 			<div class="all-day">
 				<DatetimePicker