A11Y: makes replies count a button and not a link (#12570)

app/assets/javascripts/discourse/app/raw-views/list/posts-count-column.js

@@ -1,7 +1,6 @@
 import EmberObject from "@ember/object";
 import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
-import { fmt } from "discourse/lib/computed";
 
 export default EmberObject.extend({
   tagName: "td",
@@ -38,5 +37,10 @@ export default EmberObject.extend({
     return "";
   },
 
-  likesHeat: fmt("ratioText", "heatmap-%@"),
+  @discourseComputed("ratioText")
+  likesHeat(ratioText) {
+    if (ratioText && ratioText.length) {
+      return `heatmap-${ratioText}`;
+    }
+  },
 });

app/assets/javascripts/discourse/app/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}}'>
+  <button class="btn-link posts-map badge-posts {{view.likesHeat}}">
     {{raw-plugin-outlet name="topic-list-before-reply-count"}}
     {{number topic.replyCount noTitle="true" ariaLabel=view.title}}
-  </a>
+  </button>
 </{{view.tagName}}>

app/assets/stylesheets/common/base/_topic-list.scss

@@ -274,11 +274,15 @@
 
   .num {
     text-align: center;
-    a:not(.badge-posts) {
+
+    a {
       color: inherit;
     }
-    a.badge-posts {
-      font-weight: bold;
+
+    .badge-posts {
+      font-weight: 700;
+      color: inherit;
+      padding: 15px 5px;
     }
   }