[stable5.10] fix(a11y): add missing ARIA labels to form inputs and buttons

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>
@@ -87,7 +89,7 @@
 	},
 
 	props: {
 		account: {
 			type: Object,
 			required: true,
 		},
@@ -99,22 +101,22 @@
 
 		enableUpdate: {
 			type: Boolean,
 			default: true,
 		},
 
 		enableDelete: {
 			type: Boolean,
 			default: true,
 		},
 
 		onUpdateAlias: {
 			type: Function,
 			default: async (aliasId, { alias, name }) => {},
 		},
 
 		onDelete: {
 			type: Function,
 			default: async (aliasId) => {},
 		},
 	},
 

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>

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

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

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