From 8bfe3947448dbacda503e32781b93802d3b240cb Mon Sep 17 00:00:00 2001
From: Deimos <deimos@tildes.net>
Date: Wed, 11 Sep 2019 15:46:11 -0600
Subject: [PATCH] Convert comment label buttons from <a> to <button>

The post buttons (Reply, Delete, etc.) were converted to <button> quite
a while ago, and these ones should be switched over for the same reasons
as those were (accessibility, more semantic), as well as being able to
support the error messages from Intercooler.
---
 tildes/scss/modules/_btn.scss                      | 9 ++++-----
 tildes/scss/modules/_comment.scss                  | 6 ++++++
 tildes/static/js/behaviors/comment-label-button.js | 2 +-
 tildes/tildes/templates/macros/comments.jinja2     | 4 ++--
 4 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/tildes/scss/modules/_btn.scss b/tildes/scss/modules/_btn.scss
index 43baaff..6725995 100644
--- a/tildes/scss/modules/_btn.scss
+++ b/tildes/scss/modules/_btn.scss
@@ -58,18 +58,17 @@
   margin: 0 0.4rem;
   padding: 0.2rem;
 
+  background: none;
+  border: 0;
+
   font-size: 0.6rem;
   font-weight: bold;
   text-transform: capitalize;
 
   cursor: pointer;
 
-  &.btn {
-    height: 1rem;
-    text-transform: capitalize;
-  }
-
   &.btn-used {
+    height: 1rem;
     border: 1px solid;
   }
 }
diff --git a/tildes/scss/modules/_comment.scss b/tildes/scss/modules/_comment.scss
index 503f34e..6d99e55 100644
--- a/tildes/scss/modules/_comment.scss
+++ b/tildes/scss/modules/_comment.scss
@@ -133,10 +133,16 @@
   margin: 0;
   padding: 0 1rem;
   justify-content: space-between;
+  align-items: center;
 
   @media (min-width: $size-md) {
     justify-content: left;
   }
+
+  // Wrap error message onto a new line
+  .text-status-message {
+    min-width: 100%;
+  }
 }
 
 .comment-label-count {
diff --git a/tildes/static/js/behaviors/comment-label-button.js b/tildes/static/js/behaviors/comment-label-button.js
index 2aedcb7..71f4b12 100644
--- a/tildes/static/js/behaviors/comment-label-button.js
+++ b/tildes/static/js/behaviors/comment-label-button.js
@@ -24,7 +24,7 @@ $.onmount("[data-js-comment-label-button]", function() {
 
         var labeltemplate = document.querySelector("#comment-label-options");
         var clone = document.importNode(labeltemplate.content, true);
-        var options = clone.querySelectorAll("a");
+        var options = clone.querySelectorAll("button");
 
         for (var i = 0; i < options.length; i++) {
             var label = options[i];
diff --git a/tildes/tildes/templates/macros/comments.jinja2 b/tildes/tildes/templates/macros/comments.jinja2
index 3f69204..95b6ebc 100644
--- a/tildes/tildes/templates/macros/comments.jinja2
+++ b/tildes/tildes/templates/macros/comments.jinja2
@@ -246,12 +246,12 @@
     <menu class="comment-label-buttons">
       {% for label in options if request.user.is_label_available(label) %}
         <li>
-          <a class="btn-comment-label btn-comment-label-{{ label.name|lower }}"
+          <button class="btn-comment-label btn-comment-label-{{ label.name|lower }}"
             data-js-label-name="{{ label.name|lower }}"
             {% if label.reason_prompt %}
               data-js-reason-prompt="{{ label.reason_prompt }}"
             {% endif %}
-          >{{ label.name|lower }}{% if label.reason_prompt %}...{% endif %}</a>
+          >{{ label.name|lower }}{% if label.reason_prompt %}...{% endif %}</button>
         </li>
       {% endfor %}
     </menu>