refactor: ♿ add aria labels to buttons

locales/en-US.yml

@@ -1121,6 +1121,9 @@ youHaveUnreadAnnouncements: "You have unread announcements"
 donationLink: "Link to donation page"
 neverShow: "Don't show again"
 remindMeLater: "Maybe later"
+removeQuote: "Remove quote"
+removeRecipient: "Remove recipient"
+removeMember: "Remove member"
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing

packages/backend/src/server/api/endpoints/admin/meta.ts

@@ -495,7 +495,7 @@ export const meta = {
 				type: "string",
 				optional: true,
 				nullable: true,
-			}
+			},
 		},
 	},
 } as const;

packages/backend/src/server/api/endpoints/meta.ts

@@ -393,7 +393,7 @@ export const meta = {
 				type: "string",
 				optional: "true",
 				nullable: true,
-			}
+			},
 		},
 	},
 } as const;

packages/client/src/components/MkDonation.vue

@@ -18,7 +18,7 @@
 						}}
 					</p>
 				</div>
-				<div class="_flexList" style="gap: 0.6rem;">
+				<div class="_flexList" style="gap: 0.6rem">
 					<MkButton
 						primary
 						@click="
@@ -46,7 +46,7 @@
 					}}</MkButton>
 				</div>
 			</div>
-			<button class="_button" :class="$style.close" @click="close">
+			<button class="_button" :class="$style.close" @click="close" :aria-label="i18n.t('close')">
 				<i class="ph-x ph-bold ph-lg"></i>
 			</button>
 		</div>
@@ -103,7 +103,9 @@ function openExternal(link) {
 }
 
 .slide-fade-enter-active {
-    transition: opacity 0.5s, transform 0.5s ease-out;
+	transition:
+		opacity 0.5s,
+		transform 0.5s ease-out;
 }
 
 .slide-fade-enter-to {
@@ -117,7 +119,9 @@ function openExternal(link) {
 }
 
 .slide-fade-leave-active {
-    transition: opacity 0.5s, transform 0.5s ease-out;
+	transition:
+		opacity 0.5s,
+		transform 0.5s ease-out;
 }
 
 .slide-fade-leave-to {

packages/client/src/components/MkInfo.vue

@@ -12,6 +12,7 @@
 			v-tooltip="i18n.ts.close"
 			class="_buttonIcon close"
 			@click.stop="close"
+			:aria-label="i18n.t('close')"
 		>
 			<i class="ph-x ph-bold ph-lg"></i>
 		</button>

packages/client/src/components/MkModalPageWindow.vue

@@ -26,7 +26,7 @@
 					></i>
 					<span>{{ pageMetadata?.value.title }}</span>
 				</span>
-				<button class="_button" @click="$refs.modal.close()">
+				<button class="_button" @click="$refs.modal.close()" :aria-label="i18n.t('close')">
 					<i class="ph-x ph-bold ph-lg"></i>
 				</button>
 			</div>

packages/client/src/components/MkPollEditor.vue

@@ -14,7 +14,7 @@
 					@update:modelValue="onInput(i, $event)"
 				>
 				</MkInput>
-				<button class="_button" @click="remove(i)">
+				<button class="_button" @click="remove(i)" :aria-label="i18n.t('remove')">
 					<i class="ph-x ph-bold ph-lg"></i>
 				</button>
 			</li>

packages/client/src/components/MkPostForm.vue

@@ -11,7 +11,7 @@
 	>
 		<header>
 			<button v-if="!fixed" class="cancel _button" @click="cancel">
-				<i class="ph-x ph-bold ph-lg"></i>
+				<i class="ph-x ph-bold ph-lg" :aria-label="i18n.t('close')"></i>
 			</button>
 			<button
 				v-if="$props.editId == null"
@@ -84,7 +84,7 @@
 			<div v-if="quoteId" class="with-quote">
 				<i class="ph-quotes ph-bold ph-lg"></i>
 				{{ i18n.ts.quoteAttached
-				}}<button class="_button" @click="quoteId = null">
+				}}<button class="_button" @click="quoteId = null" :aria-label="i18n.t('removeQuote')">
 					<i class="ph-x ph-bold ph-lg"></i>
 				</button>
 			</div>
@@ -93,7 +93,7 @@
 				<div class="visibleUsers">
 					<span v-for="u in visibleUsers" :key="u.id">
 						<MkAcct :user="u" />
-						<button class="_button" @click="removeVisibleUser(u)">
+						<button class="_button" @click="removeVisibleUser(u)" :aria-label="i18n.t('removeRecipient')">
 							<i class="ph-x ph-bold ph-lg"></i>
 						</button>
 					</span>

packages/client/src/components/MkWidgets.vue

@@ -40,6 +40,7 @@
 						<button
 							class="remove _button"
 							@click.prevent.stop="removeWidget(element)"
+							:aria-label="i18n.t('close')"
 						>
 							<i class="ph-x ph-bold ph-lg"></i>
 						</button>

packages/client/src/pages/admin/settings.vue

@@ -59,9 +59,7 @@
 								class="_formBlock"
 							>
 								<template #prefix
-									><i
+									><i class="ph-hand-heart ph-bold ph-lg"></i
-										class="ph-hand-heart ph-bold ph-lg"
-									></i
 								></template>
 								<template #label>{{
 									i18n.ts.donationLink

packages/client/src/pages/follow-requests.vue

@@ -60,12 +60,14 @@
 									<button
 										class="_button"
 										@click="accept(req.follower)"
+										:aria-label="i18n.t('accept')"
 									>
 										<i class="ph-check ph-bold ph-lg"></i>
 									</button>
 									<button
 										class="_button"
 										@click="reject(req.follower)"
+										:aria-label="i18n.t('reject')"
 									>
 										<i class="ph-x ph-bold ph-lg"></i>
 									</button>

packages/client/src/pages/gallery/edit.vue

@@ -29,6 +29,7 @@
 							v-tooltip="i18n.ts.remove"
 							class="remove _button"
 							@click="remove(file)"
+							:aria-label="i18n.t('remove')"
 						>
 							<i class="ph-x ph-bold ph-lg"></i>
 						</button>

packages/client/src/pages/my-groups/group.vue

@@ -23,6 +23,7 @@
 								<button
 									class="_button"
 									@click="removeUser(user)"
+									:aria-label="i18n.t('removeMember')"
 								>
 									<i class="ph-x ph-bold ph-lg"></i>
 								</button>

packages/client/src/pages/my-lists/list.vue

@@ -50,6 +50,7 @@
 										<button
 											class="_button"
 											@click="removeUser(user)"
+											:aria-label="i18n.t('removeMember')"
 										>
 											<i class="ph-x ph-bold ph-lg"></i>
 										</button>