fix(a11y): add labels to comment interactions

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

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