From 0d4fad67dbf4c470503c640d24255a5dc7de37fa Mon Sep 17 00:00:00 2001
From: OsamaSayegh <asooomaasoooma90@gmail.com>
Date: Tue, 22 Mar 2022 00:17:44 +0300
Subject: [PATCH] A11Y: Add `aria-label`s to topics list column headers

Topics lists like /latest are ordered by last activity date by default,
but the order can be changed (and reversed) to something else such as
replies count and views count by clicking on the corresponding column
header in the topics list. These column headers are tabbable, but screen
readers announce them as, using the replies column as example, `Replies
toggle button`. This doesn't communicate very well that this the button
changes the order, so this commit adds `aria-label`s to all column
headers to make it clear that they change order. The current copy for
the `aria-label` is `Sort by replies`.
---
 .../discourse/app/templates/topic-list-header.hbr      | 10 +++++-----
 config/locales/client.en.yml                           |  5 +++++
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/topic-list-header.hbr b/app/assets/javascripts/discourse/app/templates/topic-list-header.hbr
index 636225a3b10..cdca90b5c5c 100644
--- a/app/assets/javascripts/discourse/app/templates/topic-list-header.hbr
+++ b/app/assets/javascripts/discourse/app/templates/topic-list-header.hbr
@@ -10,13 +10,13 @@
 {{#if showPosters}}
   {{raw "topic-list-header-column" order='posters' ariaLabel=(i18n "category.sort_options.posters")}}
 {{/if}}
-{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
+{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies' ariaLabel=(i18n "sr_replies")}}
 {{#if showLikes}}
-  {{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes'}}
+  {{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes' ariaLabel=(i18n "sr_likes")}}
 {{/if}}
 {{#if showOpLikes}}
-  {{raw "topic-list-header-column" sortable=sortable number='true' order='op_likes' name='likes'}}
+  {{raw "topic-list-header-column" sortable=sortable number='true' order='op_likes' name='likes' ariaLabel=(i18n "sr_op_likes")}}
 {{/if}}
-{{raw "topic-list-header-column" sortable=sortable number='true' order='views' name='views'}}
-{{raw "topic-list-header-column" sortable=sortable number='true' order='activity' name='activity'}}
+{{raw "topic-list-header-column" sortable=sortable number='true' order='views' name='views' ariaLabel=(i18n "sr_views")}}
+{{raw "topic-list-header-column" sortable=sortable number='true' order='activity' name='activity' ariaLabel=(i18n "sr_activity")}}
 {{~raw-plugin-outlet name="topic-list-header-after"~}}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 9991936f0bc..193086e544d 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -3542,15 +3542,20 @@ en:
         other {}}
     original_post: "Original Post"
     views: "Views"
+    sr_views: "Sort by views"
     views_lowercase:
       one: "view"
       other: "views"
     replies: "Replies"
+    sr_replies: "Sort by replies"
     views_long:
       one: "this topic has been viewed %{count} time"
       other: "this topic has been viewed %{number} times"
     activity: "Activity"
+    sr_activity: "Sort by activity"
     likes: "Likes"
+    sr_likes: "Sort by likes"
+    sr_op_likes: "Sort by original post likes"
     likes_lowercase:
       one: "like"
       other: "likes"