From f9273ddcb7de82b413aa50cec99bce3e73ca8126 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 22 Apr 2025 15:22:52 -0400
Subject: [PATCH] A11Y: add aria-label to reply count link in topic list
 (#32402)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

At the moment the reply count is labelled by the topic list's header
column, which is good — but we don't actually describe what the link
does, so it's a little ambiguous.

This adds an aria-label to describe the behavior "jump to first post" so
it will be read as:

"n replies, jump to first post"

This provides better coverage for link-to-link navigation because it
both describes the number and the function.
---
 .../topic-list/item/replies-cell.gjs           | 18 ++++++++++++------
 config/locales/client.en.yml                   |  3 +++
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/topic-list/item/replies-cell.gjs b/app/assets/javascripts/discourse/app/components/topic-list/item/replies-cell.gjs
index bd9a86d6903..1b28f5a6782 100644
--- a/app/assets/javascripts/discourse/app/components/topic-list/item/replies-cell.gjs
+++ b/app/assets/javascripts/discourse/app/components/topic-list/item/replies-cell.gjs
@@ -4,7 +4,7 @@ import { service } from "@ember/service";
 import PluginOutlet from "discourse/components/plugin-outlet";
 import element from "discourse/helpers/element";
 import number from "discourse/helpers/number";
-import I18n from "discourse-i18n";
+import { i18n } from "discourse-i18n";
 
 export default class RepliesCell extends Component {
   @service siteSettings;
@@ -21,10 +21,12 @@ export default class RepliesCell extends Component {
   }
 
   get title() {
-    return I18n.messageFormat("posts_likes_MF", {
-      count: this.args.topic.replyCount,
-      ratio: this.ratioText,
-    }).trim();
+    return i18n
+      .messageFormat("posts_likes_MF", {
+        count: this.args.topic.replyCount,
+        ratio: this.ratioText,
+      })
+      .trim();
   }
 
   get ratioText() {
@@ -54,7 +56,11 @@ export default class RepliesCell extends Component {
     <this.wrapperElement
       class="num posts-map posts {{this.likesHeat}} topic-list-data"
     >
-      <a href={{@topic.firstPostUrl}} class="badge-posts">
+      <a
+        href={{@topic.firstPostUrl}}
+        class="badge-posts"
+        aria-label={{i18n "topic.reply_count_link" count=@topic.replyCount}}
+      >
         <PluginOutlet
           @name="topic-list-before-reply-count"
           @outletArgs={{hash topic=@topic}}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 0bc4f477e99..195af0f12e6 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -3430,6 +3430,9 @@ en:
           other {}
         }
 
+      reply_count_link:
+        one: "%{count} reply, jump to first post"
+        other: "%{count} replies, jump to first post"
       created_at: "Created: %{date}"
       bumped_at: "Latest: %{date}"