From d4a256b2f9c18a0cb77b6274f6889639607e8933 Mon Sep 17 00:00:00 2001
From: Agate <me@agate.blue>
Date: Tue, 11 Aug 2020 14:07:06 +0200
Subject: [PATCH] Fixed some unfocusable links/buttons

---
 front/src/components/Queue.vue                |  5 ++--
 front/src/components/Sidebar.vue              |  8 +++---
 .../components/admin/SignupFormBuilder.vue    |  6 ++---
 front/src/components/common/ActionTable.vue   |  8 +++---
 .../components/common/RenderedDescription.vue |  4 +--
 front/src/components/library/FileUpload.vue   |  6 ++---
 .../src/components/library/radios/Filter.vue  |  7 ++---
 front/src/components/manage/ChannelsTable.vue |  8 +++---
 .../components/manage/library/AlbumsTable.vue |  8 +++---
 .../manage/library/ArtistsTable.vue           |  6 ++---
 .../manage/library/LibrariesTable.vue         | 16 ++++++------
 .../components/manage/library/TracksTable.vue | 12 ++++-----
 .../manage/library/UploadsTable.vue           | 26 +++++++++----------
 .../manage/moderation/AccountsTable.vue       |  6 ++---
 .../notifications/NotificationRow.vue         |  8 +++---
 .../components/playlists/PlaylistModal.vue    |  6 ++---
 front/src/views/Notifications.vue             |  6 ++---
 front/src/views/channels/DetailBase.vue       | 22 ++++++++--------
 .../views/content/libraries/FilesTable.vue    | 21 ++++++++-------
 front/src/views/content/remote/Card.vue       |  8 +++---
 front/src/views/content/remote/Home.vue       |  4 ++-
 21 files changed, 104 insertions(+), 97 deletions(-)

diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index ae4a447fe..5b92d76d9 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -72,7 +72,7 @@
                   </div>
                   <div class="progress">
                     <template v-if="!isLoadingAudio">
-                      <span role="button" class="left floated timer start" @click="setCurrentTime(0)">{{currentTimeFormatted}}</span>
+                      <a href="" :aria-label="labels.restart" class="left floated timer discrete start" @click.prevent="setCurrentTime(0)">{{currentTimeFormatted}}</a>
                       <span class="right floated timer total">{{durationFormatted}}</span>
                     </template>
                     <template v-else>
@@ -272,7 +272,8 @@ export default {
       return {
         queue: this.$pgettext('*/*/*', 'Queue'),
         duration: this.$pgettext('*/*/*', 'Duration'),
-        addArtistContentFilter: this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Hide content from this artist…')
+        addArtistContentFilter: this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Hide content from this artist…'),
+        restart: this.$pgettext('*/*/*', 'Restart track'),
       }
     },
     timeLeft () {
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 2a2a6e7a5..6ec684f6e 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -90,10 +90,10 @@
       </template>
       <div class="item collapse-button-wrapper">
 
-        <span
+        <button
           @click="isCollapsed = !isCollapsed"
           :class="['ui', 'basic', 'big', {'vibrant': !isCollapsed}, 'inverted icon', 'collapse', 'button']">
-            <i class="sidebar icon"></i></span>
+            <i class="sidebar icon"></i></button>
       </div>
     </nav>
   </header>
@@ -115,7 +115,7 @@
     <section :class="['ui', 'bottom', 'attached', {active: selectedTab === 'library'}, 'tab']" :aria-label="labels.mainMenu">
       <nav class="ui vertical large fluid inverted menu" role="navigation" :aria-label="labels.mainMenu">
         <div :class="[{collapsed: !exploreExpanded}, 'collaspable item']">
-          <h2 class="header" @click="exploreExpanded = true" tabindex="0" @focus="exploreExpanded = true">
+          <h2 class="header" role="button" @click="exploreExpanded = true" tabindex="0" @focus="exploreExpanded = true">
             <translate translate-context="*/*/*/Verb">Explore</translate>
             <i class="angle right icon" v-if="!exploreExpanded"></i>
           </h2>
@@ -128,7 +128,7 @@
           </div>
         </div>
         <div :class="[{collapsed: !myLibraryExpanded}, 'collaspable item']" v-if="$store.state.auth.authenticated">
-          <h3 class="header" @click="myLibraryExpanded = true" tabindex="0" @focus="myLibraryExpanded = true">
+          <h3 class="header" role="button" @click="myLibraryExpanded = true" tabindex="0" @focus="myLibraryExpanded = true">
             <translate translate-context="*/*/*/Noun">My Library</translate>
             <i class="angle right icon" v-if="!myLibraryExpanded"></i>
           </h3>
diff --git a/front/src/components/admin/SignupFormBuilder.vue b/front/src/components/admin/SignupFormBuilder.vue
index ab6738390..3724b883e 100644
--- a/front/src/components/admin/SignupFormBuilder.vue
+++ b/front/src/components/admin/SignupFormBuilder.vue
@@ -80,15 +80,15 @@
               <td>
                 <i
                   :disabled="idx === 0"
-                  @click="move(idx, -1)" rel="button"
+                  @click="move(idx, -1)" role="button"
                   :title="labels.up"
                   :class="['up', 'arrow', {disabled: idx === 0}, 'icon']"></i>
                 <i
                   :disabled="idx >= local.fields.length - 1"
-                  @click="move(idx, 1)" rel="button"
+                  @click="move(idx, 1)" role="button"
                   :title="labels.down"
                   :class="['down', 'arrow', {disabled: idx >= local.fields.length - 1}, 'icon']"></i>
-                <i @click="remove(idx)" rel="button" :title="labels.delete" class="x icon"></i>
+                <i @click="remove(idx)" role="button" :title="labels.delete" class="x icon"></i>
               </td>
             </tr>
           </tbody>
diff --git a/front/src/components/common/ActionTable.vue b/front/src/components/common/ActionTable.vue
index bb6685ca3..38a6d23d0 100644
--- a/front/src/components/common/ActionTable.vue
+++ b/front/src/components/common/ActionTable.vue
@@ -48,13 +48,13 @@
                     </p>
                     <div :aria-label="labels.performAction" slot="modal-confirm"><translate translate-context="Modal/*/Button.Label/Short, Verb">Launch</translate></div>
                   </dangerous-button>
-                  <div
+                  <button
                     v-else
                     @click="launchAction"
                     :disabled="checked.length === 0"
                     :aria-label="labels.performAction"
                     :class="['ui', {disabled: checked.length === 0}, {'loading': actionLoading}, 'button']">
-                    <translate translate-context="Content/*/Button.Label/Short, Verb">Go</translate></div>
+                    <translate translate-context="Content/*/Button.Label/Short, Verb">Go</translate></button>
                 </div>
                 <div class="count field">
                   <translate translate-context="Content/*/Paragraph"
@@ -76,7 +76,7 @@
                     %{ count } on %{ total } selected
                   </translate>
                   <template v-if="currentAction.allowAll && checkable.length > 0 && checkable.length === checked.length">
-                    <a @click="selectAll = true" v-if="!selectAll">
+                    <a @click.prevent="selectAll = true" v-if="!selectAll" href="">
                       <translate translate-context="Content/*/Link/Verb"
                         key="3"
                         :translate-n="objectsData.count"
@@ -85,7 +85,7 @@
                         Select all %{ total } elements
                       </translate>
                     </a>
-                    <a @click="selectAll = false" v-else>
+                    <a @click.prevent="selectAll = false" v-else href="">
                       <translate translate-context="Content/*/Link/Verb" key="4">Select only current page</translate>
                     </a>
                   </template>
diff --git a/front/src/components/common/RenderedDescription.vue b/front/src/components/common/RenderedDescription.vue
index fa40ab169..b7db84d64 100644
--- a/front/src/components/common/RenderedDescription.vue
+++ b/front/src/components/common/RenderedDescription.vue
@@ -4,10 +4,10 @@
       <div v-html="html"></div>
       <template v-if="isTruncated">
         <div class="ui small hidden divider"></div>
-        <a @click.stop.prevent="showMore = true" v-if="showMore === false">
+        <a href="" @click.stop.prevent="showMore = true" v-if="showMore === false">
           <translate translate-context="*/*/Button,Label">Show more</translate>
         </a>
-        <a @click.stop.prevent="showMore = false" v-else="showMore === true">
+        <a href="" @click.stop.prevent="showMore = false" v-else="showMore === true">
           <translate translate-context="*/*/Button,Label">Show less</translate>
         </a>
 
diff --git a/front/src/components/library/FileUpload.vue b/front/src/components/library/FileUpload.vue
index 8bcf55bbe..7a0c9e30e 100644
--- a/front/src/components/library/FileUpload.vue
+++ b/front/src/components/library/FileUpload.vue
@@ -1,8 +1,8 @@
   <template>
   <div class="component-file-upload">
     <div class="ui top attached tabular menu">
-      <a :class="['item', {active: currentTab === 'summary'}]" @click="currentTab = 'summary'"><translate translate-context="Content/Library/Tab.Title/Short">Summary</translate></a>
-      <a :class="['item', {active: currentTab === 'uploads'}]" @click="currentTab = 'uploads'">
+      <a href="" :class="['item', {active: currentTab === 'summary'}]" @click.prevent="currentTab = 'summary'"><translate translate-context="Content/Library/Tab.Title/Short">Summary</translate></a>
+      <a href="" :class="['item', {active: currentTab === 'uploads'}]" @click.prevent="currentTab = 'uploads'">
         <translate translate-context="Content/Library/Tab.Title/Short">Uploading</translate>
         <div v-if="files.length === 0" class="ui label">
           0
@@ -14,7 +14,7 @@
           {{ uploadedFilesCount + erroredFilesCount }}/{{ files.length }}
         </div>
       </a>
-      <a :class="['item', {active: currentTab === 'processing'}]" @click="currentTab = 'processing'">
+      <a href="" :class="['item', {active: currentTab === 'processing'}]" @click.prevent="currentTab = 'processing'">
         <translate translate-context="Content/Library/Tab.Title/Short">Processing</translate>
         <div v-if="processableFiles === 0" class="ui label">
           0
diff --git a/front/src/components/library/radios/Filter.vue b/front/src/components/library/radios/Filter.vue
index 2a9c86b05..a5f910083 100644
--- a/front/src/components/library/radios/Filter.vue
+++ b/front/src/components/library/radios/Filter.vue
@@ -35,12 +35,13 @@
       </div>
     </td>
     <td>
-      <span
-        @click="showCandidadesModal = !showCandidadesModal"
+      <a
+        href=""
+        @click.prevent="showCandidadesModal = !showCandidadesModal"
         v-if="checkResult"
         :class="['ui', {'success': checkResult.candidates.count > 10}, 'label']">
         {{ checkResult.candidates.count }} tracks matching filter
-      </span>
+      </a>
       <modal v-if="checkResult" :show.sync="showCandidadesModal">
         <h4 class="header">
           <translate translate-context="Popup/Radio/Title/Noun">Tracks matching filter</translate>
diff --git a/front/src/components/manage/ChannelsTable.vue b/front/src/components/manage/ChannelsTable.vue
index 04d6a9fdd..337ecfbfe 100644
--- a/front/src/components/manage/ChannelsTable.vue
+++ b/front/src/components/manage/ChannelsTable.vue
@@ -62,7 +62,7 @@
               <i class="wrench icon"></i>
               <span class="visually-hidden">{{ labels.openModeration }}</span>
             </router-link>
-            <span role="button" class="discrete link" @click="addSearchToken('account', scope.obj.attributed_to.full_username)">{{ scope.obj.attributed_to.preferred_username }}</span>
+            <a href="" class="discrete link" @click.prevent="addSearchToken('account', scope.obj.attributed_to.full_username)">{{ scope.obj.attributed_to.preferred_username }}</a>
           </td>
           <td>
             <template v-if="!scope.obj.is_local">
@@ -70,12 +70,12 @@
                 <i class="wrench icon"></i>
                 <span class="visually-hidden">{{ labels.openModeration }}</span>
               </router-link>
-              <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.attributed_to.domain)">{{ scope.obj.attributed_to.domain }}</span>
+              <a href="" class="discrete link" @click.prevent="addSearchToken('domain', scope.obj.attributed_to.domain)">{{ scope.obj.attributed_to.domain }}</a>
             </template>
-            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.attributed_to.domain)">
+            <a href="" v-else class="ui tiny accent icon link label" @click.prevent="addSearchToken('domain', scope.obj.attributed_to.domain)">
               <i class="home icon"></i>
               <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
-            </span>
+            </a>
           </td>
           <td>
             {{ scope.obj.artist.albums_count }}
diff --git a/front/src/components/manage/library/AlbumsTable.vue b/front/src/components/manage/library/AlbumsTable.vue
index cd71fc02e..3bff50352 100644
--- a/front/src/components/manage/library/AlbumsTable.vue
+++ b/front/src/components/manage/library/AlbumsTable.vue
@@ -53,7 +53,7 @@
               <i class="wrench icon"></i>
               <span class="visually-hidden">{{ labels.openModeration }}</span>
             </router-link>
-            <span role="button" class="discrete link" @click="addSearchToken('artist', scope.obj.artist.name)" :title="scope.obj.artist.name">{{ scope.obj.artist.name }}</span>
+            <a href="" class="discrete link" @click.prevent="addSearchToken('artist', scope.obj.artist.name)" :title="scope.obj.artist.name">{{ scope.obj.artist.name }}</a>
           </td>
           <td>
             <template v-if="!scope.obj.is_local">
@@ -61,12 +61,12 @@
                 <i class="wrench icon"></i>
                 <span class="visually-hidden">{{ labels.openModeration }}</span>
               </router-link>
-              <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)">{{ scope.obj.domain }}</span>
+              <a href="" class="discrete link" @click.prevent="addSearchToken('domain', scope.obj.domain)">{{ scope.obj.domain }}</a>
             </template>
-            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)">
+            <a href="" v-else class="ui tiny accent icon link label" @click.prevent="addSearchToken('domain', scope.obj.domain)">
               <i class="home icon"></i>
               <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
-            </span>
+            </a>
           </td>
           <td>
             {{ scope.obj.tracks_count }}
diff --git a/front/src/components/manage/library/ArtistsTable.vue b/front/src/components/manage/library/ArtistsTable.vue
index 5babb6f53..454496d35 100644
--- a/front/src/components/manage/library/ArtistsTable.vue
+++ b/front/src/components/manage/library/ArtistsTable.vue
@@ -63,12 +63,12 @@
               <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
                 <i class="wrench icon"></i>
               </router-link>
-              <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span>
+              <a href="" class="discrete link" @click.prevent="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</a>
             </template>
-            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)">
+            <a href="" v-else class="ui tiny accent icon link label" @click.prevent="addSearchToken('domain', scope.obj.domain)">
               <i class="home icon"></i>
               <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
-            </span>
+            </a>
           </td>
           <td>
             {{ scope.obj.albums_count }}
diff --git a/front/src/components/manage/library/LibrariesTable.vue b/front/src/components/manage/library/LibrariesTable.vue
index 3cfb74739..b5bb8b9b8 100644
--- a/front/src/components/manage/library/LibrariesTable.vue
+++ b/front/src/components/manage/library/LibrariesTable.vue
@@ -62,28 +62,28 @@
             <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: scope.obj.actor.full_username }}">
               <i class="wrench icon"></i>
             </router-link>
-            <span role="button" class="discrete link" @click="addSearchToken('account', scope.obj.actor.full_username)" :title="scope.obj.actor.full_username">{{ scope.obj.actor.preferred_username }}</span>
+            <a href="" class="discrete link" @click.prevent="addSearchToken('account', scope.obj.actor.full_username)" :title="scope.obj.actor.full_username">{{ scope.obj.actor.preferred_username }}</a>
           </td>
           <td>
             <template v-if="!scope.obj.is_local">
               <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
                 <i class="wrench icon"></i>
               </router-link>
-              <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span>
+              <a href="" class="discrete link" @click.prevent="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</a>
             </template>
-            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)">
+            <a href="" v-else class="ui tiny accent icon link label" @click.prevent="addSearchToken('domain', scope.obj.domain)">
               <i class="home icon"></i>
               <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
-            </span>
+            </a>
           </td>
           <td>
-            <span
-              role="button"
+            <a
+              href=""
               class="discrete link"
-              @click="addSearchToken('privacy_level', scope.obj.privacy_level)"
+              @click.prevent="addSearchToken('privacy_level', scope.obj.privacy_level)"
               :title="sharedLabels.fields.privacy_level.shortChoices[scope.obj.privacy_level]">
               {{ sharedLabels.fields.privacy_level.shortChoices[scope.obj.privacy_level] }}
-            </span>
+            </a>
           </td>
           <td>
             {{ scope.obj.uploads_count }}
diff --git a/front/src/components/manage/library/TracksTable.vue b/front/src/components/manage/library/TracksTable.vue
index 80d8c6efe..9c12ea11d 100644
--- a/front/src/components/manage/library/TracksTable.vue
+++ b/front/src/components/manage/library/TracksTable.vue
@@ -53,29 +53,29 @@
               <router-link :to="{name: 'manage.library.albums.detail', params: {id: scope.obj.album.id }}">
                 <i class="wrench icon"></i>
               </router-link>
-              <span role="button" class="discrete link" @click="addSearchToken('album_id', scope.obj.album.id)" :title="scope.obj.album.title">{{ scope.obj.album.title }}</span>
+              <a href="" class="discrete link" @click.prevent="addSearchToken('album_id', scope.obj.album.id)" :title="scope.obj.album.title">{{ scope.obj.album.title }}</a>
             </template>
           </td>
           <td>
             <router-link :to="{name: 'manage.library.artists.detail', params: {id: scope.obj.artist.id }}">
               <i class="wrench icon"></i>
             </router-link>
-            <span role="button" class="discrete link" @click="addSearchToken('artist_id', scope.obj.artist.id)" :title="scope.obj.artist.name">{{ scope.obj.artist.name }}</span>
+            <a href="" class="discrete link" @click.prevent="addSearchToken('artist_id', scope.obj.artist.id)" :title="scope.obj.artist.name">{{ scope.obj.artist.name }}</a>
           </td>
           <td>
             <template v-if="!scope.obj.is_local">
               <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
                 <i class="wrench icon"></i>
               </router-link>
-              <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span>
+              <a href="" class="discrete link" @click.prevent="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</a>
             </template>
-            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)">
+            <a href="" v-else class="ui tiny accent icon link label" @click.prevent="addSearchToken('domain', scope.obj.domain)">
               <i class="home icon"></i>
               <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
-            </span>
+            </a>
           </td>
           <td>
-            <span role="button" v-if="scope.obj.license" class="discrete link" @click="addSearchToken('license', scope.obj.license)" :title="scope.obj.license">{{ scope.obj.license }}</span>
+            <a href="" v-if="scope.obj.license" class="discrete link" @click.prevent="addSearchToken('license', scope.obj.license)" :title="scope.obj.license">{{ scope.obj.license }}</a>
             <translate v-else translate-context="*/*/*">N/A</translate>
           </td>
           <td>
diff --git a/front/src/components/manage/library/UploadsTable.vue b/front/src/components/manage/library/UploadsTable.vue
index 1063b3a47..f3f50584a 100644
--- a/front/src/components/manage/library/UploadsTable.vue
+++ b/front/src/components/manage/library/UploadsTable.vue
@@ -77,42 +77,42 @@
             <router-link :to="{name: 'manage.library.libraries.detail', params: {id: scope.obj.library.uuid }}">
               <i class="wrench icon"></i>
             </router-link>
-            <span role="button" class="discrete link"
-              @click="addSearchToken('library_id', scope.obj.library.id)"
+            <a href="" class="discrete link"
+              @click.prevent="addSearchToken('library_id', scope.obj.library.id)"
               :title="scope.obj.library.name">
               {{ scope.obj.library.name | truncate(20) }}
-            </span>
+            </a>
           </td>
           <td>
             <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: scope.obj.library.actor.full_username }}">
             </router-link>
-            <span role="button" class="discrete link" @click="addSearchToken('account', scope.obj.library.actor.full_username)" :title="scope.obj.library.actor.full_username">{{ scope.obj.library.actor.preferred_username }}</span>
+            <a href="" class="discrete link" @click.prevent="addSearchToken('account', scope.obj.library.actor.full_username)" :title="scope.obj.library.actor.full_username">{{ scope.obj.library.actor.preferred_username }}</a>
           </td>
           <td>
             <template v-if="!scope.obj.is_local">
               <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
                 <i class="wrench icon"></i>
               </router-link>
-              <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span>
+              <a href="" class="discrete link" @click.prevent="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</a>
             </template>
-            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)">
+            <a href="" v-else class="ui tiny accent icon link label" @click.prevent="addSearchToken('domain', scope.obj.domain)">
               <i class="home icon"></i>
               <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
-            </span>
+            </a>
           </td>
           <td>
-            <span
-              role="button"
+            <a
+              href=""
               class="discrete link"
-              @click="addSearchToken('privacy_level', scope.obj.library.privacy_level)"
+              @click.prevent="addSearchToken('privacy_level', scope.obj.library.privacy_level)"
               :title="sharedLabels.fields.privacy_level.shortChoices[scope.obj.library.privacy_level]">
               {{ sharedLabels.fields.privacy_level.shortChoices[scope.obj.library.privacy_level] }}
-            </span>
+            </a>
           </td>
           <td>
-            <span class="discrete link" @click="addSearchToken('status', scope.obj.import_status)" :title="sharedLabels.fields.import_status.choices[scope.obj.import_status].help">
+            <a href="" class="discrete link" @click.prevent="addSearchToken('status', scope.obj.import_status)" :title="sharedLabels.fields.import_status.choices[scope.obj.import_status].help">
               {{ sharedLabels.fields.import_status.choices[scope.obj.import_status].label }}
-            </span>
+            </a>
             <button class="ui tiny basic icon button" :title="sharedLabels.fields.import_status.detailTitle" @click="detailedUpload = scope.obj; showUploadDetailModal = true">
               <i class="question circle outline icon"></i>
             </button>
diff --git a/front/src/components/manage/moderation/AccountsTable.vue b/front/src/components/manage/moderation/AccountsTable.vue
index 9b6782fc6..124efcbca 100644
--- a/front/src/components/manage/moderation/AccountsTable.vue
+++ b/front/src/components/manage/moderation/AccountsTable.vue
@@ -53,12 +53,12 @@
               <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
                 <i class="wrench icon"></i>
               </router-link>
-              <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span>
+              <a href="" class="discrete link" @click.prevent="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</a>
             </template>
-            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)">
+            <a href="" v-else class="ui tiny accent icon link label" @click.prevent="addSearchToken('domain', scope.obj.domain)">
               <i class="home icon"></i>
               <translate translate-context="Content/Moderation/*/Short, Noun">Local account</translate>
-            </span>
+            </a>
           </td>
           <td>
             {{ scope.obj.uploads_count }}
diff --git a/front/src/components/notifications/NotificationRow.vue b/front/src/components/notifications/NotificationRow.vue
index 3a014241c..68a017d17 100644
--- a/front/src/components/notifications/NotificationRow.vue
+++ b/front/src/components/notifications/NotificationRow.vue
@@ -21,12 +21,12 @@
     </td>
     <td><human-date :date="item.activity.creation_date" /></td>
     <td class="read collapsing">
-      <span @click="markRead(false)" role="button" v-if="item.is_read" :title="labels.markUnread">
+      <a href="" :aria-label="labels.markUnread" @click.prevent="markRead(false)" class="discrete link" v-if="item.is_read" :title="labels.markUnread">
         <i class="redo icon" />
-      </span>
-      <span @click="markRead(true)" role="button" v-else :title="labels.markRead">
+      </a>
+      <a href="" :aria-label="labels.markRead" @click.prevent="markRead(true)" class="discrete link" v-else :title="labels.markRead">
         <i class="check icon" />
-      </span>
+      </a>
     </td>
   </tr>
 </template>
diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index 79e49a92a..ea63954b8 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -69,13 +69,13 @@
               <td><human-date :date="playlist.modification_date"></human-date></td>
               <td>{{ playlist.tracks_count }}</td>
               <td>
-                <div
+                <button
                   v-if="track"
                   class="ui success icon basic small right floated button"
                   :title="labels.addToPlaylist"
-                  @click="addToPlaylist(playlist.id, false)">
+                  @click.prevent="addToPlaylist(playlist.id, false)">
                   <i class="plus icon"></i> <translate translate-context="Popup/Playlist/Table.Button.Label/Verb">Add track</translate>
-                </div>
+                </button>
               </td>
             </tr>
           </tbody>
diff --git a/front/src/views/Notifications.vue b/front/src/views/Notifications.vue
index 84315af9f..7060762b3 100644
--- a/front/src/views/Notifications.vue
+++ b/front/src/views/Notifications.vue
@@ -72,13 +72,13 @@
           <input id="show-read-notifications" v-model="filters.is_read" type="checkbox">
           <label for="show-read-notifications"><translate translate-context="Content/Notifications/Form.Label/Verb">Show read notifications</translate></label>
         </div>
-        <div
+        <button
           v-if="filters.is_read === false && notifications.count > 0"
-          @click="markAllAsRead"
+          @click.prevent="markAllAsRead"
           class="ui basic labeled icon right floated button">
           <i class="ui check icon" />
           <translate translate-context="Content/Notifications/Button.Label/Verb">Mark all as read</translate>
-        </div>
+        </button>
         <div class="ui hidden divider" />
 
         <div v-if="isLoading" :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']">
diff --git a/front/src/views/channels/DetailBase.vue b/front/src/views/channels/DetailBase.vue
index a6385488d..be8481daf 100644
--- a/front/src/views/channels/DetailBase.vue
+++ b/front/src/views/channels/DetailBase.vue
@@ -76,32 +76,32 @@
                 <button class="ui right floated pointing dropdown icon small basic button" ref="dropdown" v-dropdown="{direction: 'downward'}">
                   <i class="ellipsis vertical icon"></i>
                   <div class="menu">
-                    <div
-                      role="button"
+                    <a
+                      href=""
                       v-if="totalTracks > 0"
-                      @click="showEmbedModal = !showEmbedModal"
+                      @click.prevent="showEmbedModal = !showEmbedModal"
                       class="basic item">
                       <i class="code icon"></i>
                       <translate translate-context="Content/*/Button.Label/Verb">Embed</translate>
-                    </div>
+                    </a>
                     <div class="divider"></div>
-                    <div
-                      role="button"
+                    <a
+                      href=""
                       class="basic item"
                       v-for="obj in getReportableObjs({account: object.attributed_to, channel: object})"
                       :key="obj.target.type + obj.target.id"
                       @click.stop.prevent="$store.dispatch('moderation/report', obj.target)">
                       <i class="share icon" /> {{ obj.label }}
-                    </div>
+                    </a>
 
                     <template v-if="isOwner">
                       <div class="divider"></div>
-                      <div
+                      <a
                         class="item"
-                        role="button"
-                        @click.stop="showEditModal = true">
+                        href=""
+                        @click.stop.prevent="showEditModal = true">
                         <translate translate-context="*/*/*/Verb">Edit…</translate>
-                      </div>
+                      </a>
                       <dangerous-button
                         :class="['ui', {loading: isLoading}, 'item']"
                         v-if="object"
diff --git a/front/src/views/content/libraries/FilesTable.vue b/front/src/views/content/libraries/FilesTable.vue
index deb0804a6..5481f368a 100644
--- a/front/src/views/content/libraries/FilesTable.vue
+++ b/front/src/views/content/libraries/FilesTable.vue
@@ -130,17 +130,19 @@
               </router-link>
             </td>
             <td>
-              <span
+              <a
+                href=""
                 class="discrete link"
-                @click="addSearchToken('artist', scope.obj.track.artist.name)"
-              >{{ scope.obj.track.artist.name|truncate(20) }}</span>
+                @click.prevent="addSearchToken('artist', scope.obj.track.artist.name)"
+              >{{ scope.obj.track.artist.name|truncate(20) }}</a>
             </td>
             <td>
-              <span
+              <a
+                href=""
                 v-if="scope.obj.track.album"
                 class="discrete link"
-                @click="addSearchToken('album', scope.obj.track.album.title)"
-              >{{ scope.obj.track.album.title|truncate(20) }}</span>
+                @click.prevent="addSearchToken('album', scope.obj.track.album.title)"
+              >{{ scope.obj.track.album.title|truncate(20) }}</a>
             </td>
           </template>
           <template v-else>
@@ -152,11 +154,12 @@
             <human-date :date="scope.obj.creation_date"></human-date>
           </td>
           <td>
-            <span
+            <a 
+              href=""
               class="discrete link"
-              @click="addSearchToken('status', scope.obj.import_status)"
+              @click.prevent="addSearchToken('status', scope.obj.import_status)"
               :title="sharedLabels.fields.import_status.choices[scope.obj.import_status].help"
-            >{{ sharedLabels.fields.import_status.choices[scope.obj.import_status].label }}</span>
+            >{{ sharedLabels.fields.import_status.choices[scope.obj.import_status].label }}</a>
             <button
               class="ui tiny basic icon button"
               :title="sharedLabels.fields.import_status.detailTitle"
diff --git a/front/src/views/content/remote/Card.vue b/front/src/views/content/remote/Card.vue
index 8be7463d4..3e082cee2 100644
--- a/front/src/views/content/remote/Card.vue
+++ b/front/src/views/content/remote/Card.vue
@@ -65,11 +65,11 @@
           <i class="warning download icon"></i>
           <translate translate-context="Content/Library/Card.List item">Scanned with errors</translate>
         </template>
-        <span class="link right floated" @click="showScan = !showScan">
+        <a href="" class="link right floated" @click.prevent="showScan = !showScan">
           <translate translate-context="Content/Library/Card.Button.Label/Noun">Details</translate>
           <i v-if="showScan" class="angle down icon" />
           <i v-else class="angle right icon" />
-        </span>
+        </a>
         <div v-if="showScan">
           <template v-if="latestScan.modification_date">
             <translate translate-context="Content/Library/Card.List item/Noun">Last update:</translate><human-date :date="latestScan.modification_date" /><br />
@@ -78,9 +78,9 @@
         </div>
       </div>
       <div v-if="displayScan && canLaunchScan" class="clearfix">
-        <span class="right floated link" @click="launchScan">
+        <a href="" class="right floated link" @click.prevent="launchScan">
           <translate translate-context="Content/Library/Card.Button.Label/Verb">Scan now</translate> <i class="paper plane icon" />
-        </span>
+        </a>
       </div>
     </div>
     <div class="extra content">
diff --git a/front/src/views/content/remote/Home.vue b/front/src/views/content/remote/Home.vue
index d9fc81ebc..0a896c9de 100644
--- a/front/src/views/content/remote/Home.vue
+++ b/front/src/views/content/remote/Home.vue
@@ -13,7 +13,9 @@
       </div>
       <template v-if="existingFollows && existingFollows.count > 0">
         <h2><translate translate-context="Content/Library/Title">Known libraries</translate></h2>
-        <i @click="fetch()" :class="['ui', 'circular', 'refresh', 'icon']" /> <translate translate-context="Content/*/Button.Label/Short, Verb">Refresh</translate>
+        <a href="" class="discrete link" @click.prevent="fetch()" >
+          <i :class="['ui', 'circular', 'refresh', 'icon']" /> <translate translate-context="Content/*/Button.Label/Short, Verb">Refresh</translate>
+        </a>
         <div class="ui hidden divider"></div>
         <div class="ui two cards">
           <library-card