From a653737a6656c82c821d7506b6e38bd9e9679b45 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Mon, 2 Mar 2020 14:28:54 -0500
Subject: [PATCH] FIX: Add aria-labels to topic list items (#9048)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* FIX: Add aria-labels to topic list items

Before this fix you could navigate the topic list using a screen reader
and a keyboard but some of the items were not as descriptive as they
could be. The newly added labels make it easier to understand what you
are tabbing over.

context:
https://meta.discourse.org/t/accessibility-aria-attributes-are-not-defined-for-links-under-replies-category/142539

* Update app/assets/javascripts/discourse/lib/utilities.js.es6

Co-Authored-By: Régis Hanol <regis@hanol.fr>

* Multiline fix

* Fix more tests

Co-authored-by: Régis Hanol <regis@hanol.fr>
---
 .../javascripts/discourse/helpers/application.js.es6     | 5 +++++
 app/assets/javascripts/discourse/lib/utilities.js.es6    | 9 ++++++---
 .../discourse/templates/list/posts-count-column.hbr      | 2 +-
 test/javascripts/lib/utilities-test.js.es6               | 2 +-
 test/javascripts/models/report-test.js.es6               | 4 ++--
 5 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/discourse/helpers/application.js.es6 b/app/assets/javascripts/discourse/helpers/application.js.es6
index e6a88ded97b..71baa92c914 100644
--- a/app/assets/javascripts/discourse/helpers/application.js.es6
+++ b/app/assets/javascripts/discourse/helpers/application.js.es6
@@ -41,6 +41,11 @@ registerUnbound("number", (orig, params) => {
   if (n.toString() !== title.toString() && addTitle) {
     result += " title='" + Handlebars.Utils.escapeExpression(title) + "'";
   }
+  if (params.ariaLabel) {
+    const ariaLabel = Handlebars.Utils.escapeExpression(params.ariaLabel);
+    result += ` aria-label='${ariaLabel}'`;
+  }
+
   result += ">" + n + "</span>";
 
   return new safe(result);
diff --git a/app/assets/javascripts/discourse/lib/utilities.js.es6 b/app/assets/javascripts/discourse/lib/utilities.js.es6
index 8b210b47371..e44a60d53a7 100644
--- a/app/assets/javascripts/discourse/lib/utilities.js.es6
+++ b/app/assets/javascripts/discourse/lib/utilities.js.es6
@@ -66,9 +66,12 @@ export function avatarImg(options, getURL) {
 
   const classes =
     "avatar" + (options.extraClasses ? " " + options.extraClasses : "");
-  const title = options.title
-    ? " title='" + escapeExpression(options.title || "") + "'"
-    : "";
+
+  let title = "";
+  if (options.title) {
+    const escaped = escapeExpression(options.title || "");
+    title = ` title='${escaped}' aria-label='${escaped}'`;
+  }
 
   return (
     "<img alt='' width='" +
diff --git a/app/assets/javascripts/discourse/templates/list/posts-count-column.hbr b/app/assets/javascripts/discourse/templates/list/posts-count-column.hbr
index b37ddd9c1b6..fb6642f0f04 100644
--- a/app/assets/javascripts/discourse/templates/list/posts-count-column.hbr
+++ b/app/assets/javascripts/discourse/templates/list/posts-count-column.hbr
@@ -1,6 +1,6 @@
 <{{view.tagName}} class='num posts-map posts {{view.likesHeat}}' title='{{view.title}}'>
   <a href class='posts-map badge-posts {{view.likesHeat}}'>
     {{raw-plugin-outlet name="topic-list-before-reply-count"}}
-    {{number topic.replyCount noTitle="true"}}
+    {{number topic.replyCount noTitle="true" ariaLabel=view.title}}
   </a>
 </{{view.tagName}}>
diff --git a/test/javascripts/lib/utilities-test.js.es6 b/test/javascripts/lib/utilities-test.js.es6
index dd34d8a204c..46609895a2e 100644
--- a/test/javascripts/lib/utilities-test.js.es6
+++ b/test/javascripts/lib/utilities-test.js.es6
@@ -89,7 +89,7 @@ QUnit.test("avatarImg", assert => {
       size: "tiny",
       title: "evilest trout"
     }),
-    "<img alt='' width='20' height='20' src='/path/to/avatar/40.png' class='avatar' title='evilest trout'>",
+    "<img alt='' width='20' height='20' src='/path/to/avatar/40.png' class='avatar' title='evilest trout' aria-label='evilest trout'>",
     "it adds a title if supplied"
   );
 
diff --git a/test/javascripts/models/report-test.js.es6 b/test/javascripts/models/report-test.js.es6
index 1fa622a1d3a..821a88eee8f 100644
--- a/test/javascripts/models/report-test.js.es6
+++ b/test/javascripts/models/report-test.js.es6
@@ -459,7 +459,7 @@ QUnit.test("computed labels", assert => {
   const computedUsernameLabel = usernameLabel.compute(row);
   assert.equal(
     computedUsernameLabel.formatedValue,
-    "<a href='/admin/users/1/joffrey'><img alt='' width='20' height='20' src='/' class='avatar' title='joffrey'><span class='username'>joffrey</span></a>"
+    "<a href='/admin/users/1/joffrey'><img alt='' width='20' height='20' src='/' class='avatar' title='joffrey' aria-label='joffrey'><span class='username'>joffrey</span></a>"
   );
   assert.equal(computedUsernameLabel.value, "joffrey");
 
@@ -542,6 +542,6 @@ QUnit.test("computed labels", assert => {
   const userLink = computedLabels[0].compute(row).formatedValue;
   assert.equal(
     userLink,
-    "<a href='/forum/admin/users/1/joffrey'><img alt='' width='20' height='20' src='/forum/' class='avatar' title='joffrey'><span class='username'>joffrey</span></a>"
+    "<a href='/forum/admin/users/1/joffrey'><img alt='' width='20' height='20' src='/forum/' class='avatar' title='joffrey' aria-label='joffrey'><span class='username'>joffrey</span></a>"
   );
 });