From 1ac553943ba775864876713cb9db47579831941b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 22 Jan 2025 11:13:21 +0100
Subject: [PATCH] fix(a11y): add labels to comment interactions

---
 frontend/src/components/tasks/partials/Comments.vue | 11 ++++++++++-
 frontend/src/i18n/lang/en.json                      |  3 ++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/tasks/partials/Comments.vue b/frontend/src/components/tasks/partials/Comments.vue
index f3aa84f46..abb82fc47 100644
--- a/frontend/src/components/tasks/partials/Comments.vue
+++ b/frontend/src/components/tasks/partials/Comments.vue
@@ -35,6 +35,9 @@
 						height="48"
 						width="48"
 					>
+					<figcaption class="tw-sr-only">
+						{{ $t('misc.avatarOfUser', {user: getDisplayName(c.author)}) }}
+					</figcaption>
 				</figure>
 				<div class="media-content">
 					<div class="comment-info">
@@ -64,7 +67,10 @@
 							class="comment-permalink"
 							:title="$t('task.comment.permalink')"
 							@click.prevent.stop="copy(getCommentUrl(`${c.id}`))"
-						><Icon icon="link" /></a>
+						>
+							<span class="tw-sr-only">{{ $t('task.comment.permalink') }}</span>
+							<Icon icon="link" />
+						</a>
 						<CustomTransition name="fade">
 							<span
 								v-if="
@@ -136,6 +142,9 @@
 						height="48"
 						width="48"
 					>
+					<figcaption class="tw-sr-only">
+						{{ $t('misc.avatarOfUser', {user: getDisplayName(authStore.info)}) }}
+					</figcaption>
 				</figure>
 				<div class="media-content">
 					<div class="form">
diff --git a/frontend/src/i18n/lang/en.json b/frontend/src/i18n/lang/en.json
index a6b58d75c..ed67a8717 100644
--- a/frontend/src/i18n/lang/en.json
+++ b/frontend/src/i18n/lang/en.json
@@ -587,7 +587,8 @@
     "created": "Created at",
     "createdBy": "Created by {0}",
     "actions": "Actions",
-    "cannotBeUndone": "This cannot be undone!"
+    "cannotBeUndone": "This cannot be undone!",
+    "avatarOfUser": "{user}'s profile image"
   },
   "input": {
     "resetColor": "Reset Color",