Convert post buttons from <a> to <button>

This is a change I've been meaning to make for a while anyway for better
semantic HTML and accessibility, and it ended up being necessary to be
able to support some other updates as well.

tildes/scss/modules/_btn.scss

@@ -68,3 +68,49 @@
     border: 1px solid;
   }
 }
+
+.btn-post {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0;
+  padding: 0.2rem;
+
+  // The buttons don't need to be spaced widely on a desktop
+  @media (min-width: $size-md) {
+    justify-content: left;
+  }
+
+  li {
+    margin-top: 0;
+  }
+
+  // Combined with flex-wrap: wrap, this should put any form on its own line
+  form {
+    min-width: 100%;
+  }
+}
+
+.btn-post-action {
+  @include min-touch-size;
+
+  display: flex;
+  padding: 0.2rem 0.4rem;
+
+  background: none;
+  border: 0;
+
+  justify-content: center;
+  align-items: center;
+
+  font-weight: bold;
+  font-size: 0.6rem;
+  line-height: 0.6rem;
+
+  cursor: pointer;
+}
+
+.btn-post-action-used {
+  text-decoration: underline;
+}

tildes/scss/modules/_comment.scss

@@ -167,7 +167,7 @@
   .comment-tree-replies,
   .comment-text,
   .comment-votes,
-  .post-buttons {
+  .btn-post {
     display: none;
   }
 

tildes/scss/modules/_post-buttons.scss

@@ -1,45 +0,0 @@
-// Copyright (c) 2018 Tildes contributors <code@tildes.net>
-// SPDX-License-Identifier: AGPL-3.0-or-later
-
-.post-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0;
-  padding: 0.2rem;
-
-  // The buttons don't need to be spaced widely on a desktop
-  @media (min-width: $size-md) {
-    justify-content: left;
-  }
-
-  li {
-    margin-top: 0;
-  }
-
-  // Combined with flex-wrap: wrap, this should put any form on its own line
-  form {
-    min-width: 100%;
-  }
-}
-
-.post-button {
-  @include min-touch-size;
-
-  display: flex;
-  padding: 0.2rem 0.4rem;
-
-  justify-content: center;
-  align-items: center;
-
-  font-weight: bold;
-  font-size: 0.6rem;
-  line-height: 0.6rem;
-
-  cursor: pointer;
-}
-
-.post-button-used {
-  text-decoration: underline;
-}

tildes/scss/styles.scss

@@ -23,7 +23,6 @@
 @import 'modules/nav';
 @import 'modules/pagination';
 @import 'modules/post';
-@import 'modules/post-buttons';
 @import 'modules/settings';
 @import 'modules/sidebar';
 @import 'modules/site-footer';

tildes/scss/themes/_theme_base.scss

@@ -163,6 +163,18 @@
     }
   }
 
+  .btn-post-action {
+    color: map-get($theme, "foreground-secondary");
+
+    &:hover {
+      color: map-get($theme, "foreground-extreme");
+    }
+  }
+
+  .btn-post-action-used {
+    color: map-get($theme, "button-used");
+  }
+
   .btn-comment-label-exemplary {
     @include labelbutton(map-get($theme, "comment-label-exemplary"));
   }
@@ -335,18 +347,6 @@
     }
   }
 
-  .post-button {
-    color: map-get($theme, "foreground-secondary");
-
-    &:hover {
-      color: map-get($theme, "foreground-extreme");
-    }
-  }
-
-  .post-button-used {
-    color: map-get($theme, "button-used");
-  }
-
   .sidebar-controls {
     background-color: map-get($theme, "background-secondary");
   }

tildes/static/js/behaviors/comment-label-button.js

@@ -76,7 +76,7 @@ $.onmount('[data-js-comment-label-button]', function() {
         // update Intercooler so it knows about these new elements
         Intercooler.processNodes(clone);
 
-        $comment.find(".post-buttons").first().after(clone);
+        $comment.find(".btn-post").first().after(clone);
     });
 });
 

tildes/static/js/behaviors/comment-reply-button.js

@@ -72,7 +72,7 @@ $.onmount('[data-js-comment-reply-button]', function() {
         $(cancelButton).on('click', function (event) {
             // re-enable click/hover events on the reply button
             $(this).parents('.comment').first()
-                .find('.post-button[name=reply]').first()
+                .find('.btn-post-action[name=reply]').first()
                 .css('pointer-events', 'auto');
         });
         buttonDiv.appendChild(cancelButton);

tildes/tildes/templates/macros/comments.jinja2

@@ -161,10 +161,10 @@
         </div>
       {% endif %}
 
-      <menu class="post-buttons">
+      <menu class="btn-post">
         {% if request.has_permission('vote', comment) %}
           {% if comment.user_voted is defined and comment.user_voted %}
-            <li><a class="post-button post-button-used" name="unvote"
+            <li><button class="btn-post-action btn-post-action-used" name="unvote"
               data-ic-delete-from="{{ request.route_url(
                 'ic_comment_vote',
                 comment_id36=comment.comment_id36,
@@ -173,7 +173,7 @@
               data-ic-replace-target="true"
               >Voted
           {% else %}
-            <li><a class="post-button" name="vote"
+            <li><button class="btn-post-action" name="vote"
               data-ic-put-to="{{ request.route_url(
                 'ic_comment_vote',
                 comment_id36=comment.comment_id36,
@@ -185,26 +185,26 @@
           {% if comment.num_votes > 0 %}
             ({{ comment.num_votes }})
           {% endif %}
-          </a></li>
+          </button></li>
         {% endif %}
 
         {% if request.has_permission('label', comment) %}
-          <li><a class="post-button" name="label" data-js-comment-label-button>Label</a></li>
+          <li><button class="btn-post-action" name="label" data-js-comment-label-button>Label</button></li>
         {% endif %}
 
         {% if request.has_permission('edit', comment) %}
-          <li><a class="post-button" name="edit"
+          <li><button class="btn-post-action" name="edit"
             data-ic-get-from="{{ request.route_url(
               'ic_comment',
               comment_id36=comment.comment_id36,
             ) }}"
             data-ic-target="#comment-{{ comment.comment_id36 }} .comment-itself:first .comment-text"
             data-ic-scroll-to-target="true"
-          >Edit</a></li>
+          >Edit</button></li>
         {% endif %}
 
         {% if request.has_permission('delete', comment) %}
-          <li><a class="post-button"
+          <li><button class="btn-post-action"
             data-ic-delete-from="{{ request.route_url(
               'ic_comment',
               comment_id36=comment.comment_id36,
@@ -212,12 +212,12 @@
             data-ic-target="#comment-{{ comment.comment_id36 }} .comment-itself:first"
             data-ic-replace-target="true"
             data-ic-confirm="Delete this comment? This cannot be undone."
-          >Delete</a></li>
+          >Delete</button></li>
         {% endif %}
 
         {% if request.has_permission('bookmark', comment) %}
           {% if comment.bookmark_created_time %}
-            <li><a class="post-button post-button-used" name="unbookmark"
+            <li><button class="btn-post-action btn-post-action-used" name="unbookmark"
               data-ic-delete-from="{{ request.route_url(
                 'ic_comment_bookmark',
                 comment_id36=comment.comment_id36,
@@ -226,7 +226,7 @@
               data-ic-replace-target="true"
               >Bookmarked
           {% else %}
-            <li><a class="post-button" name="bookmark"
+            <li><button class="btn-post-action" name="bookmark"
               data-ic-put-to="{{ request.route_url(
                 'ic_comment_bookmark',
                 comment_id36=comment.comment_id36,
@@ -235,35 +235,35 @@
               data-ic-replace-target="true"
               >Bookmark
           {% endif %}
-          </a></li>
+          </button></li>
         {% endif %}
 
         {% if request.has_permission("remove", comment) %}
           <li>
           {% if not comment.is_removed %}
-            <a class="post-button"
+            <button class="btn-post-action"
               data-ic-put-to="{{ request.route_url(
                 'ic_comment_remove',
                 comment_id36=comment.comment_id36,
               ) }}"
               data-ic-replace-target="true"
               data-ic-confirm="Remove this comment?"
-            >Remove</a>
+            >Remove</button>
           {% else %}
-            <a class="post-button"
+            <button class="btn-post-action"
               data-ic-delete-from="{{ request.route_url(
                 'ic_comment_remove',
                 comment_id36=comment.comment_id36,
               ) }}"
               data-ic-replace-target="true"
               data-ic-confirm="Un-remove this comment?"
-            >Un-remove</a>
+            >Un-remove</button>
           {% endif %}
           </li>
         {% endif %}
 
         {% if request.has_permission('reply', comment) %}
-          <li><a class="post-button" name="reply" data-js-comment-reply-button>Reply</a></li>
+          <li><button class="btn-post-action" name="reply" data-js-comment-reply-button>Reply</button></li>
         {% endif %}
       </menu>
     {% endif %}

tildes/tildes/templates/topic.jinja2

@@ -67,81 +67,81 @@
 {% endif %}
 
 {% if request.has_any_permission(('edit', 'delete', 'tag', 'lock', 'move', 'edit_title', 'remove', 'bookmark'), topic) %}
-  <menu class="post-buttons">
+  <menu class="btn-post">
     {% if request.has_permission('edit', topic) %}
-      <li><a class="post-button" name="edit"
+      <li><button class="btn-post-action" name="edit"
         data-ic-get-from="{{ request.route_url(
           'ic_topic',
           topic_id36=topic.topic_id36,
         ) }}"
         data-ic-target=".topic-full .topic-full-text"
         data-ic-scroll-to-target="true"
-      >Edit</a></li>
+      >Edit</button></li>
     {% endif %}
 
     {% if request.has_permission('tag', topic) %}
-      <li><a class="post-button" name="tag"
+      <li><button class="btn-post-action" name="tag"
         data-ic-get-from="{{ request.route_url(
           'ic_topic_tags',
           topic_id36=topic.topic_id36,
         ) }}"
         data-ic-swap-style="replace"
-        data-ic-target=".topic-full .post-buttons:first + .post-buttons-settings"
-      >Tag</a></li>
+        data-ic-target=".topic-full .btn-post:first + .btn-post-settings"
+      >Tag</button></li>
     {% endif %}
 
     {% if request.has_permission('delete', topic) %}
-      <li><a class="post-button" name="delete"
+      <li><button class="btn-post-action" name="delete"
         data-ic-delete-from="{{ request.route_url(
           'ic_topic',
           topic_id36=topic.topic_id36,
         ) }}"
         data-ic-confirm="Delete this topic? This cannot be undone."
-      >Delete</a></li>
+      >Delete</button></li>
     {% endif %}
 
     {% if request.has_permission('move', topic) %}
-      <li><a class="post-button" name="move"
+      <li><button class="btn-post-action" name="move"
         data-ic-get-from="{{ request.route_url(
           'ic_topic_group',
           topic_id36=topic.topic_id36,
         ) }}"
         data-ic-swap-style="replace"
-        data-ic-target=".topic-full .post-buttons:first + .post-buttons-settings"
-      >Move</a>
+        data-ic-target=".topic-full .btn-post:first + .btn-post-settings"
+      >Move</button>
     {% endif %}
 
     {% if request.has_permission('edit_title', topic) %}
-      <li><a class="post-button" name="edit-title"
+      <li><button class="btn-post-action" name="edit-title"
         data-ic-get-from="{{ request.route_url(
           'ic_topic_title',
           topic_id36=topic.topic_id36,
         ) }}"
         data-ic-swap-style="replace"
-        data-ic-target=".topic-full .post-buttons:first + .post-buttons-settings"
-      >Edit title</a>
+        data-ic-target=".topic-full .btn-post:first + .btn-post-settings"
+      >Edit title</button>
     {% endif %}
 
     {% if request.has_permission('lock', topic) %}
       <li>
       {% if not topic.is_locked %}
-        <a class="post-button"
+        <button class="btn-post-action"
           data-ic-put-to="{{ request.route_url(
             'ic_topic_lock',
             topic_id36=topic.topic_id36,
           ) }}"
           data-ic-replace-target="true"
           data-ic-confirm="Lock this topic?"
-        >Lock</a>
+        >Lock</button>
       {% else %}
-        <a class="post-button"
+        <button class="btn-post-action"
           data-ic-delete-from="{{ request.route_url(
             'ic_topic_lock',
             topic_id36=topic.topic_id36,
           ) }}"
           data-ic-replace-target="true"
           data-ic-confirm="Unlock this topic?"
-        >Unlock</a>
+        >Unlock</button>
       {% endif %}
       </li>
     {% endif %}
@@ -149,21 +149,21 @@
     {% if request.has_permission('bookmark', topic) %}
       <li>
       {% if not topic.bookmark_created_time %}
-        <a class="post-button"
+        <button class="btn-post-action"
           data-ic-put-to="{{ request.route_url(
             'ic_topic_bookmark',
             topic_id36=topic.topic_id36,
           ) }}"
           data-ic-replace-target="true"
-        >Bookmark</a>
+        >Bookmark</button>
       {% else %}
-        <a class="post-button"
+        <button class="btn-post-action"
           data-ic-delete-from="{{ request.route_url(
             'ic_topic_bookmark',
             topic_id36=topic.topic_id36,
           ) }}"
           data-ic-replace-target="true"
-        >Unbookmark</a>
+        >Unbookmark</button>
       {% endif %}
       </li>
     {% endif %}
@@ -171,28 +171,28 @@
     {% if request.has_permission("remove", topic) %}
       <li>
       {% if not topic.is_removed %}
-        <a class="post-button"
+        <button class="btn-post-action"
           data-ic-put-to="{{ request.route_url(
             'ic_topic_remove',
             topic_id36=topic.topic_id36,
           ) }}"
           data-ic-replace-target="true"
           data-ic-confirm="Remove this topic?"
-        >Remove</a>
+        >Remove</button>
       {% else %}
-        <a class="post-button"
+        <button class="btn-post-action"
           data-ic-delete-from="{{ request.route_url(
             'ic_topic_remove',
             topic_id36=topic.topic_id36,
           ) }}"
           data-ic-replace-target="true"
           data-ic-confirm="Un-remove this topic?"
-        >Un-remove</a>
+        >Un-remove</button>
       {% endif %}
       </li>
     {% endif %}
   </menu>
-  <div class="post-buttons-settings"></div>
+  <div class="btn-post-settings"></div>
 {% endif %}
 
 {% if topic.is_locked %}