From d5e197e6ea353e1d635c33b95cd342d51c5baf76 Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Mon, 22 Aug 2016 01:25:10 +0200
Subject: [PATCH] client/general: add empty href for link buttons

In e464e69 I removed href='#' but I noticed that it broke some things.
Readding href serves two purposes:

- it makes links reachable with Tab key
- it makes links clickable with Enter key

The alternative to this approach was to introduce [tabindex] and [role]
attributes. But not only using tabindex=0 with <a/> is questionable,
it'd require adding a keyboard handler that'd intercept space and return
key presses and simulated link clicks. Since it's best to leave this
kind of thing to the native UI, I went with readding hrefs instead. I
believe that hash hrefs, even though being a common practice, are silly,
so I decided to settle down with empty hrefs.

As a bonus, I added a snippet that prevents middle mouse clicks from
opening such links/buttons in new tabs, which was the motivation for
e464e69.
---
 client/html/comment.tpl                         |  4 ++--
 client/html/comment_form.tpl                    |  4 ++--
 client/html/expander.tpl                        |  2 +-
 client/html/fav.tpl                             |  4 ++--
 client/html/post_edit_sidebar.tpl               | 10 +++++-----
 client/html/post_readonly_sidebar.tpl           |  8 ++++----
 client/html/post_upload_row.tpl                 |  2 +-
 client/html/posts_header.tpl                    |  4 ++--
 client/html/posts_page.tpl                      |  2 +-
 client/html/score.tpl                           |  6 +++---
 client/html/tag_categories.tpl                  |  2 +-
 client/html/tag_category_row.tpl                |  4 ++--
 client/html/tag_input.tpl                       |  4 ++--
 client/js/controls/auto_complete_control.js     |  1 +
 client/js/controls/post_edit_sidebar_control.js |  5 +++++
 client/js/controls/tag_input_control.js         |  4 ++++
 client/js/util/views.js                         |  8 ++++++++
 client/js/views/post_upload_view.js             |  1 +
 18 files changed, 47 insertions(+), 28 deletions(-)

diff --git a/client/html/comment.tpl b/client/html/comment.tpl
index c0aa766b..2142ae07 100644
--- a/client/html/comment.tpl
+++ b/client/html/comment.tpl
@@ -32,13 +32,13 @@
             --><span class='score-container'></span><!--
 
             --><% if (ctx.canEditComment) { %><!--
-                --><a class='edit'><!--
+                --><a href class='edit'><!--
                     --><i class='fa fa-pencil'></i> edit<!--
                 --></a><!--
             --><% } %><!--
 
             --><% if (ctx.canDeleteComment) { %><!--
-                --><a class='delete'><!--
+                --><a href class='delete'><!--
                     --><i class='fa fa-remove'></i> delete<!--
                 --></a><!--
             --><% } %><!--
diff --git a/client/html/comment_form.tpl b/client/html/comment_form.tpl
index 269805b9..5c60149f 100644
--- a/client/html/comment_form.tpl
+++ b/client/html/comment_form.tpl
@@ -16,8 +16,8 @@
 
         <nav class='buttons'>
             <ul>
-                <li class='preview'><a>Preview</a></li>
-                <li class='edit'><a>Edit</a></li>
+                <li class='preview'><a href>Preview</a></li>
+                <li class='edit'><a href>Edit</a></li>
             </ul>
         </nav>
 
diff --git a/client/html/expander.tpl b/client/html/expander.tpl
index 39014d15..abfd73e4 100644
--- a/client/html/expander.tpl
+++ b/client/html/expander.tpl
@@ -1,6 +1,6 @@
 <section class='expander'>
     <header>
-        <a>
+        <a href>
             <%- ctx.title %>
             <i class='fa fa-chevron-down'></i>
         </a>
diff --git a/client/html/fav.tpl b/client/html/fav.tpl
index d97333f5..38cbd6be 100644
--- a/client/html/fav.tpl
+++ b/client/html/fav.tpl
@@ -1,9 +1,9 @@
 <% if (ctx.canFavorite) { %>
     <% if (ctx.ownFavorite) { %>
-        <a class='remove-favorite'>
+        <a href class='remove-favorite'>
             <i class='fa fa-heart'></i>
     <% } else { %>
-        <a class='add-favorite'>
+        <a href class='add-favorite'>
             <i class='fa fa-heart-o'></i>
     <% } %>
 <% } else { %>
diff --git a/client/html/post_edit_sidebar.tpl b/client/html/post_edit_sidebar.tpl
index 18e7e87e..29d27de8 100644
--- a/client/html/post_edit_sidebar.tpl
+++ b/client/html/post_edit_sidebar.tpl
@@ -57,9 +57,9 @@
 
         <% if (ctx.canEditPostNotes) { %>
             <section class='notes'>
-                <a class='add'>Add a note</a>
+                <a href class='add'>Add a note</a>
                 <%= ctx.makeTextarea({disabled: true, text: 'Content (supports Markdown)', rows: '8'}) %>
-                <a class='delete inactive'>Delete selected note</a>
+                <a href class='delete inactive'>Delete selected note</a>
             </section>
         <% } %>
 
@@ -74,7 +74,7 @@
             <section class='post-thumbnail'>
                 <label>Thumbnail</label>
                 <div class='dropper-container'></div>
-                <a>Discard custom thumbnail</a>
+                <a href>Discard custom thumbnail</a>
             </section>
         <% } %>
 
@@ -82,10 +82,10 @@
             <section class='management'>
                 <ul>
                     <% if (ctx.canFeaturePosts) { %>
-                        <li><a class='feature'>Feature this post on main page</a></li>
+                        <li><a href class='feature'>Feature this post on main page</a></li>
                     <% } %>
                     <% if (ctx.canDeletePosts) { %>
-                        <li><a class='delete'>Delete this post</a></li>
+                        <li><a href class='delete'>Delete this post</a></li>
                     <% } %>
                 </ul>
             </section>
diff --git a/client/html/post_readonly_sidebar.tpl b/client/html/post_readonly_sidebar.tpl
index a4b0eb03..b7fd01fe 100644
--- a/client/html/post_readonly_sidebar.tpl
+++ b/client/html/post_readonly_sidebar.tpl
@@ -26,10 +26,10 @@
         </section>
 
         <section class='zoom'>
-            <a class='fit-original'>Original zoom</a> &middot;
-            <a class='fit-width'>fit width</a> &middot;
-            <a class='fit-height'>height</a> &middot;
-            <a class='fit-both'>both</a>
+            <a href class='fit-original'>Original zoom</a> &middot;
+            <a href class='fit-width'>fit width</a> &middot;
+            <a href class='fit-height'>height</a> &middot;
+            <a href class='fit-both'>both</a>
         </section>
 
         <section class='search'>
diff --git a/client/html/post_upload_row.tpl b/client/html/post_upload_row.tpl
index aae1aedd..b12a9d0f 100644
--- a/client/html/post_upload_row.tpl
+++ b/client/html/post_upload_row.tpl
@@ -1,5 +1,5 @@
 <li class='uploadable'>
-    <a class='remove'>
+    <a href class='remove'>
         <i class='fa fa-remove'></i>
     </a>
 
diff --git a/client/html/posts_header.tpl b/client/html/posts_header.tpl
index 431a4713..ea6b97d5 100644
--- a/client/html/posts_header.tpl
+++ b/client/html/posts_header.tpl
@@ -12,11 +12,11 @@
             <% if (ctx.parameters.tag) { %>
                 <span class='append'>Tagging with:</span>
             <% } else { %>
-                <a class='mousetrap button append open-masstag'>Mass tag</a>
+                <a href class='mousetrap button append open-masstag'>Mass tag</a>
             <% } %>
             <%= ctx.makeTextInput({name: 'masstag', value: ctx.parameters.tag}) %>
             <input class='mousetrap start-tagging' type='submit' value='Start tagging'/>
-            <a class='mousetrap button append stop-tagging'>Stop tagging</a>
+            <a href class='mousetrap button append stop-tagging'>Stop tagging</a>
         </form>
     <% } %>
 </div>
diff --git a/client/html/posts_page.tpl b/client/html/posts_page.tpl
index bb4ffe65..7080aa53 100644
--- a/client/html/posts_page.tpl
+++ b/client/html/posts_page.tpl
@@ -36,7 +36,7 @@
                         <% } %>
                     </a>
                     <% if (ctx.parameters && ctx.parameters.tag) { %>
-                        <a data-post-id='<%= post.id %>' class='masstag'>
+                        <a href data-post-id='<%= post.id %>' class='masstag'>
                         </a>
                     <% } %>
                 </li>
diff --git a/client/html/score.tpl b/client/html/score.tpl
index 3641ce3f..745c03ea 100644
--- a/client/html/score.tpl
+++ b/client/html/score.tpl
@@ -1,5 +1,5 @@
 <% if (ctx.canScore) { %>
-    <a class='upvote'>
+    <a href class='upvote'>
         <% if (ctx.ownScore == 1) { %>
             <i class='fa fa-thumbs-up'></i>
         <% } else { %>
@@ -9,13 +9,13 @@
         <span class='vim-nav-hint'>like</span>
     </a>
 <% } else { %>
-    <a class='upvote inactive'>
+    <a href class='upvote inactive'>
         <i class='fa fa-thumbs-o-up'></i>
     </a>
 <% } %>
 <span class='value'><%- ctx.score %></span>
 <% if (ctx.canScore) { %>
-    <a class='downvote'>
+    <a href class='downvote'>
         <% if (ctx.ownScore == -1) { %>
             <i class='fa fa-thumbs-down'></i>
         <% } else { %>
diff --git a/client/html/tag_categories.tpl b/client/html/tag_categories.tpl
index f39f4d61..f401d515 100644
--- a/client/html/tag_categories.tpl
+++ b/client/html/tag_categories.tpl
@@ -14,7 +14,7 @@
         </table>
 
         <% if (ctx.canCreate) { %>
-            <p><a class='add'>Add new category</a></p>
+            <p><a href class='add'>Add new category</a></p>
         <% } %>
 
         <div class='messages'></div>
diff --git a/client/html/tag_category_row.tpl b/client/html/tag_category_row.tpl
index 4d459a43..3ec199c1 100644
--- a/client/html/tag_category_row.tpl
+++ b/client/html/tag_category_row.tpl
@@ -31,13 +31,13 @@
             <% if (ctx.tagCategory.tagCount) { %>
                 <a class='inactive' title="Can't delete category in use">Remove</a>
             <% } else { %>
-                <a>Remove</a>
+                <a href>Remove</a>
             <% } %>
         </td>
     <% } %>
     <% if (ctx.canSetDefault) { %>
         <td class='set-default'>
-            <a>Make default</a>
+            <a href>Make default</a>
         </td>
     <% } %>
 </tr>
diff --git a/client/html/tag_input.tpl b/client/html/tag_input.tpl
index 87791289..d8ffd7bc 100644
--- a/client/html/tag_input.tpl
+++ b/client/html/tag_input.tpl
@@ -8,8 +8,8 @@
         <div class='wrapper'>
             <p>
                 <span class='buttons'>
-                    <a class='opacity'><i class='fa fa-eye'></i></a>
-                    <a class='close'>×</a>
+                    <a href class='opacity'><i class='fa fa-eye'></i></a>
+                    <a href class='close'>×</a>
                 </span>
                 Suggested tags
             </p>
diff --git a/client/js/controls/auto_complete_control.js b/client/js/controls/auto_complete_control.js
index d8bc83ac..fd3fc47a 100644
--- a/client/js/controls/auto_complete_control.js
+++ b/client/js/controls/auto_complete_control.js
@@ -215,6 +215,7 @@ class AutoCompleteControl {
             const listItem = document.createElement('li');
             const link = document.createElement('a');
             link.innerHTML = resultItem.caption;
+            link.setAtribute('href', '');
             link.setAttribute('data-key', resultItem.value);
             link.addEventListener(
                 'mouseenter',
diff --git a/client/js/controls/post_edit_sidebar_control.js b/client/js/controls/post_edit_sidebar_control.js
index 670f8c56..b3fd7b5c 100644
--- a/client/js/controls/post_edit_sidebar_control.js
+++ b/client/js/controls/post_edit_sidebar_control.js
@@ -146,12 +146,14 @@ class PostEditSidebarControl extends events.EventTarget {
     }
 
     _evtRemoveThumbnailClick(e) {
+        e.preventDefault();
         this._thumbnailFileDropper.reset();
         this._newPostThumbnail = null;
         this._thumbnailRemovalLinkNode.style.display = 'none';
     }
 
     _evtFeatureClick(e) {
+        e.preventDefault();
         if (confirm('Are you sure you want to feature this post?')) {
             this.dispatchEvent(new CustomEvent('feature', {
                 detail: {
@@ -162,6 +164,7 @@ class PostEditSidebarControl extends events.EventTarget {
     }
 
     _evtDeleteClick(e) {
+        e.preventDefault();
         if (confirm('Are you sure you want to delete this post?')) {
             this.dispatchEvent(new CustomEvent('delete', {
                 detail: {
@@ -195,6 +198,7 @@ class PostEditSidebarControl extends events.EventTarget {
     }
 
     _evtAddNoteClick(e) {
+        e.preventDefault();
         if (e.target.classList.contains('inactive')) {
             return;
         }
@@ -203,6 +207,7 @@ class PostEditSidebarControl extends events.EventTarget {
     }
 
     _evtDeleteNoteClick(e) {
+        e.preventDefault();
         if (e.target.classList.contains('inactive')) {
             return;
         }
diff --git a/client/js/controls/tag_input_control.js b/client/js/controls/tag_input_control.js
index 6546fcd8..4bc3d08c 100644
--- a/client/js/controls/tag_input_control.js
+++ b/client/js/controls/tag_input_control.js
@@ -251,6 +251,7 @@ class TagInputControl extends events.EventTarget {
     }
 
     _evtAddTagButtonClick(e) {
+        e.preventDefault();
         this.addTag(this._tagInputNode.value, SOURCE_USER_INPUT);
         this._tagInputNode.value = '';
     }
@@ -324,6 +325,7 @@ class TagInputControl extends events.EventTarget {
 
         const removalLinkNode = document.createElement('a');
         removalLinkNode.classList.add('append');
+        removalLinkNode.setAttribute('href', '')
         removalLinkNode.setAttribute('data-pseudo-content', '×');
         removalLinkNode.addEventListener('click', e => {
             e.preventDefault();
@@ -387,6 +389,7 @@ class TagInputControl extends events.EventTarget {
             const addLinkNode = document.createElement('a');
             addLinkNode.textContent = tagName;
             addLinkNode.classList.add('add-tag');
+            addLinkNode.setAttribute('href', '');
             if (actualTag) {
                 addLinkNode.classList.add(
                     misc.makeCssName(actualTag.category, 'tag'));
@@ -405,6 +408,7 @@ class TagInputControl extends events.EventTarget {
             const removeLinkNode = document.createElement('a');
             removeLinkNode.classList.add('remove-tag');
             removeLinkNode.classList.add('append');
+            removeLinkNode.setAttribute('href', '');
             removeLinkNode.setAttribute('data-pseudo-content', '×');
             removeLinkNode.addEventListener('click', e => {
                 e.preventDefault();
diff --git a/client/js/util/views.js b/client/js/util/views.js
index e6daf518..1887cd39 100644
--- a/client/js/util/views.js
+++ b/client/js/util/views.js
@@ -476,6 +476,14 @@ document.addEventListener('input', e => {
     }
 });
 
+// prevent opening buttons in new tabs
+document.addEventListener('click', e => {
+    if (e.target.getAttribute('href') === '' && e.which === 2) {
+        console.log('prevented');
+        e.preventDefault();
+    }
+});
+
 module.exports = misc.arrayToObject([
     htmlToDom,
     getTemplate,
diff --git a/client/js/views/post_upload_view.js b/client/js/views/post_upload_view.js
index 5ae241d3..26a43296 100644
--- a/client/js/views/post_upload_view.js
+++ b/client/js/views/post_upload_view.js
@@ -206,6 +206,7 @@ class PostUploadView extends events.EventTarget {
     }
 
     _evtRemoveClick(e, uploadable) {
+        e.preventDefault();
         this.removeUploadable(uploadable);
     }