From 9a68e77f9209929df7cb0f6de12f8277b04b9b3a Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 12 Jul 2023 23:22:58 -0700
Subject: [PATCH] refactor: :wheelchair: add aria labels to buttons

---
 locales/en-US.yml                             |  3 ++
 .../src/server/api/endpoints/admin/meta.ts    |  2 +-
 .../backend/src/server/api/endpoints/meta.ts  |  2 +-
 packages/client/src/components/MkDonation.vue | 36 ++++++++++---------
 packages/client/src/components/MkInfo.vue     |  1 +
 .../src/components/MkModalPageWindow.vue      |  2 +-
 .../client/src/components/MkPollEditor.vue    |  2 +-
 packages/client/src/components/MkPostForm.vue |  6 ++--
 packages/client/src/components/MkWidgets.vue  |  1 +
 packages/client/src/pages/admin/settings.vue  |  4 +--
 packages/client/src/pages/follow-requests.vue |  2 ++
 packages/client/src/pages/gallery/edit.vue    |  1 +
 packages/client/src/pages/my-groups/group.vue |  1 +
 packages/client/src/pages/my-lists/list.vue   |  1 +
 14 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index c61b573bab..415d872305 100644
--- a/locales/en-US.yml
+++ b/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
diff --git a/packages/backend/src/server/api/endpoints/admin/meta.ts b/packages/backend/src/server/api/endpoints/admin/meta.ts
index 6c3bb5041d..9abb57b1b3 100644
--- a/packages/backend/src/server/api/endpoints/admin/meta.ts
+++ b/packages/backend/src/server/api/endpoints/admin/meta.ts
@@ -495,7 +495,7 @@ export const meta = {
 				type: "string",
 				optional: true,
 				nullable: true,
-			}
+			},
 		},
 	},
 } as const;
diff --git a/packages/backend/src/server/api/endpoints/meta.ts b/packages/backend/src/server/api/endpoints/meta.ts
index dfb589a431..03b0da4011 100644
--- a/packages/backend/src/server/api/endpoints/meta.ts
+++ b/packages/backend/src/server/api/endpoints/meta.ts
@@ -393,7 +393,7 @@ export const meta = {
 				type: "string",
 				optional: "true",
 				nullable: true,
-			}
+			},
 		},
 	},
 } as const;
diff --git a/packages/client/src/components/MkDonation.vue b/packages/client/src/components/MkDonation.vue
index 6b575f30b1..d6f6d48010 100644
--- a/packages/client/src/components/MkDonation.vue
+++ b/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>
@@ -72,10 +72,10 @@ const hostname = instance.name?.length < 38 ? instance.name : host;
 const zIndex = os.claimZIndex("low");
 
 function slideIn() {
-    show.value = false;
-    nextTick(() => {
-        show.value = true;
-    });
+	show.value = false;
+	nextTick(() => {
+		show.value = true;
+	});
 }
 
 slideIn();
@@ -98,31 +98,35 @@ function openExternal(link) {
 
 <style lang="scss" scoped>
 .slide-fade-enter-from {
-    opacity: 0;
-    transform: translateY(100%);
+	opacity: 0;
+	transform: translateY(100%);
 }
 
 .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 {
-    opacity: 1;
-    transform: translateY(0);
+	opacity: 1;
+	transform: translateY(0);
 }
 
 .slide-fade-leave-from {
-    opacity: 1;
-    transform: translateY(0);
+	opacity: 1;
+	transform: translateY(0);
 }
 
 .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 {
-    opacity: 0;
-    transform: translateY(100%);
+	opacity: 0;
+	transform: translateY(100%);
 }
 </style>
 
diff --git a/packages/client/src/components/MkInfo.vue b/packages/client/src/components/MkInfo.vue
index ba3a606ab8..0a9373885e 100644
--- a/packages/client/src/components/MkInfo.vue
+++ b/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>
diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue
index bf4d8d0bce..e35c6952b8 100644
--- a/packages/client/src/components/MkModalPageWindow.vue
+++ b/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>
diff --git a/packages/client/src/components/MkPollEditor.vue b/packages/client/src/components/MkPollEditor.vue
index e0474ac710..6215e6f2dc 100644
--- a/packages/client/src/components/MkPollEditor.vue
+++ b/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>
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index ab110b14db..98fc008519 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/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>
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index 272ba1404e..f6241512fe 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/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>
diff --git a/packages/client/src/pages/admin/settings.vue b/packages/client/src/pages/admin/settings.vue
index 4920a82fae..a33335089a 100644
--- a/packages/client/src/pages/admin/settings.vue
+++ b/packages/client/src/pages/admin/settings.vue
@@ -59,9 +59,7 @@
 								class="_formBlock"
 							>
 								<template #prefix
-									><i
-										class="ph-hand-heart ph-bold ph-lg"
-									></i
+									><i class="ph-hand-heart ph-bold ph-lg"></i
 								></template>
 								<template #label>{{
 									i18n.ts.donationLink
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index b0f8cd5b16..d6afcf4565 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/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>
diff --git a/packages/client/src/pages/gallery/edit.vue b/packages/client/src/pages/gallery/edit.vue
index a98e643b3d..72da912eaf 100644
--- a/packages/client/src/pages/gallery/edit.vue
+++ b/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>
diff --git a/packages/client/src/pages/my-groups/group.vue b/packages/client/src/pages/my-groups/group.vue
index 30aa0d8306..d77751e8d6 100644
--- a/packages/client/src/pages/my-groups/group.vue
+++ b/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>
diff --git a/packages/client/src/pages/my-lists/list.vue b/packages/client/src/pages/my-lists/list.vue
index 43b18dac56..fe02c2ddd5 100644
--- a/packages/client/src/pages/my-lists/list.vue
+++ b/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>