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

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

diff --git a/app/assets/javascripts/discourse/app/raw-views/list/posts-count-column.js b/app/assets/javascripts/discourse/app/raw-views/list/posts-count-column.js
index 6f9f953..0633068 100644
--- a/app/assets/javascripts/discourse/app/raw-views/list/posts-count-column.js
+++ b/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}`;
+    }
+  },
 });
diff --git a/app/assets/javascripts/discourse/app/templates/list/posts-count-column.hbr b/app/assets/javascripts/discourse/app/templates/list/posts-count-column.hbr
index fb6642f..4c847dd 100644
--- a/app/assets/javascripts/discourse/app/templates/list/posts-count-column.hbr
+++ b/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}}>
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index 88c46e2..bcb53b1 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/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;
     }
   }
 

GitHub sha: f14e898f

1 Like

This commit appears in #12570 which was approved by eviltrout. It was merged by jjaffeux.