From a523f17ed7d27821187666eb0e202d706284f812 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 28 Sep 2023 13:29:56 -0400
Subject: [PATCH] A11Y: aria-label for mobile topic list avatar (#23693)

---
 .../javascripts/discourse-common/addon/lib/avatar-utils.js    | 2 +-
 .../app/raw-templates/mobile/list/topic-list-item.hbr         | 2 +-
 .../javascripts/discourse/tests/unit/lib/avatar-utils-test.js | 2 +-
 .../javascripts/discourse/tests/unit/models/report-test.js    | 4 ++--
 config/locales/client.en.yml                                  | 1 +
 5 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/discourse-common/addon/lib/avatar-utils.js b/app/assets/javascripts/discourse-common/addon/lib/avatar-utils.js
index 309f13a0c69..41a7d7a2eb4 100644
--- a/app/assets/javascripts/discourse-common/addon/lib/avatar-utils.js
+++ b/app/assets/javascripts/discourse-common/addon/lib/avatar-utils.js
@@ -75,7 +75,7 @@ export function avatarImg(options, customGetURL) {
   let title = "";
   if (options.title) {
     const escaped = escape(options.title || "");
-    title = ` title='${escaped}' aria-label='${escaped}'`;
+    title = ` title='${escaped}'`;
   }
 
   return `<img loading='lazy' alt='' width='${size}' height='${size}' src='${url}' class='${classes}'${title}>`;
diff --git a/app/assets/javascripts/discourse/app/raw-templates/mobile/list/topic-list-item.hbr b/app/assets/javascripts/discourse/app/raw-templates/mobile/list/topic-list-item.hbr
index fcf11336bc5..632c6e32eb4 100644
--- a/app/assets/javascripts/discourse/app/raw-templates/mobile/list/topic-list-item.hbr
+++ b/app/assets/javascripts/discourse/app/raw-templates/mobile/list/topic-list-item.hbr
@@ -6,7 +6,7 @@
         <input type="checkbox" class="bulk-select" id="bulk-select-{{topic.id}}">
       </label>
     {{else}}
-      <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.lastPosterUser.username}}">{{avatar topic.lastPosterUser imageSize="large"}}</a>
+    <a href="{{topic.lastPostUrl}}" aria-label="{{i18n 'latest_poster_link' username=topic.lastPosterUser.username}}" data-user-card="{{topic.lastPosterUser.username}}">{{avatar topic.lastPosterUser imageSize="large"}}</a>
     {{/if}}
   </div>
   <div class='right'>
diff --git a/app/assets/javascripts/discourse/tests/unit/lib/avatar-utils-test.js b/app/assets/javascripts/discourse/tests/unit/lib/avatar-utils-test.js
index 8020a9f7149..b9187c65d09 100644
--- a/app/assets/javascripts/discourse/tests/unit/lib/avatar-utils-test.js
+++ b/app/assets/javascripts/discourse/tests/unit/lib/avatar-utils-test.js
@@ -69,7 +69,7 @@ module("Unit | Utilities", function (hooks) {
         size: "tiny",
         title: "evilest trout",
       }),
-      "<img loading='lazy' alt='' width='24' height='24' src='/path/to/avatar/48.png' class='avatar' title='evilest trout' aria-label='evilest trout'>",
+      "<img loading='lazy' alt='' width='24' height='24' src='/path/to/avatar/48.png' class='avatar' title='evilest trout'>",
       "it adds a title if supplied"
     );
 
diff --git a/app/assets/javascripts/discourse/tests/unit/models/report-test.js b/app/assets/javascripts/discourse/tests/unit/models/report-test.js
index d6007f1099b..0bc27c1c3e4 100644
--- a/app/assets/javascripts/discourse/tests/unit/models/report-test.js
+++ b/app/assets/javascripts/discourse/tests/unit/models/report-test.js
@@ -370,7 +370,7 @@ module("Unit | Model | report", function (hooks) {
     const computedUsernameLabel = usernameLabel.compute(row);
     assert.strictEqual(
       computedUsernameLabel.formattedValue,
-      "<a href='/admin/users/1/joffrey'><img loading='lazy' alt='' width='24' height='24' src='/' class='avatar' title='joffrey' aria-label='joffrey'><span class='username'>joffrey</span></a>"
+      "<a href='/admin/users/1/joffrey'><img loading='lazy' alt='' width='24' height='24' src='/' class='avatar' title='joffrey'><span class='username'>joffrey</span></a>"
     );
     assert.strictEqual(computedUsernameLabel.value, "joffrey");
 
@@ -459,7 +459,7 @@ module("Unit | Model | report", function (hooks) {
     const userLink = computedLabels[0].compute(row).formattedValue;
     assert.strictEqual(
       userLink,
-      "<a href='/forum/admin/users/1/joffrey'><img loading='lazy' alt='' width='24' height='24' src='/forum/' class='avatar' title='joffrey' aria-label='joffrey'><span class='username'>joffrey</span></a>"
+      "<a href='/forum/admin/users/1/joffrey'><img loading='lazy' alt='' width='24' height='24' src='/forum/' class='avatar' title='joffrey'><span class='username'>joffrey</span></a>"
     );
   });
 });
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 694276e9caa..e92113b3c86 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -3933,6 +3933,7 @@ en:
         other {}
       }
 
+    latest_poster_link: "%{username}'s profile, latest poster"
     original_post: "Original Post"
     views: "Views"
     sr_views: "Sort by views"