feat: use BaseButton where easily possible

This replaces links with BaseButton components. BaseButton will use `<button type="button">` inside for this case. This improves accessibility a lot. Also we might be able to remove the `.stop` modifiers in some places because AFAIK the button element stops propagation by default.

src/components/home/TheNavigation.vue

@@ -22,14 +22,14 @@
 
 		<div class="navbar-end">
 			<update/>
-			<a
+			<BaseButton
 				@click="openQuickActions"
 				class="trigger-button pr-0"
 				v-shortcut="'Control+k'"
 				:title="$t('keyboardShortcuts.quickSearch')"
 			>
 				<icon icon="search"/>
-			</a>
+			</BaseButton>
 			<notifications/>
 			<div class="user">
 				<dropdown class="is-right" ref="usernameDropdown">

src/components/home/contentAuth.vue

@@ -49,13 +49,13 @@
 					</modal>
 				</transition>
 
-				<a
+				<BaseButton
 					class="keyboard-shortcuts-button d-print-none"
 					@click="showKeyboardShortcuts()"
 					v-shortcut="'?'"
 				>
 					<icon icon="keyboard"/>
-				</a>
+				</BaseButton>
 			</main>
 		</div>
 	</div>

src/components/home/navigation.vue

@@ -51,6 +51,9 @@
 		<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
 			<template v-for="(n, nk) in namespaces" :key="n.id">
 				<div class="namespace-title" :class="{'has-menu': n.id > 0}">
+					<!-- FIXME we shouldn't wrap with the clickable area and have another one inside aswell
+						@click should only be used on interactive elements
+					-->
 					<span
 						@click="toggleLists(n.id)"
 						class="menu-label"
@@ -64,13 +67,13 @@
 						<span class="name">
 							{{ namespaceTitles[nk] }}
 						</span>
-						<a
+						<BaseButton
 							class="icon is-small toggle-lists-icon pl-2"
 							:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
 							@click="toggleLists(n.id)"
 						>
 							<icon icon="chevron-down"/>
-						</a>
+						</BaseButton>
 						<span class="count" :class="{'ml-2 mr-0': n.id > 0}">
 							({{ namespaceListsCount[nk] }})
 						</span>
@@ -136,12 +139,13 @@
 										<span class="list-menu-title">
 											{{ getListTitle(l) }}
 										</span>
-										<span
+										<!-- FIXME: we shouldn't use a button inside a link This can be unwrapped by using CSS -->
+										<BaseButton
 											:class="{'is-favorite': l.isFavorite}"
 											@click.prevent.stop="toggleFavoriteList(l)"
 											class="favorite">
 											<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
-										</span>
+										</BaseButton>
 									</a>
 								</router-link>
 								<list-settings-dropdown :list="l" v-if="l.id > 0"/>
@@ -162,6 +166,7 @@ import {useStore} from 'vuex'
 import draggable from 'zhyswan-vuedraggable'
 import {SortableEvent} from 'sortablejs'
 
+import BaseButton from '@/components/base/BaseButton.vue'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
 import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
 import PoweredByLink from '@/components/home/PoweredByLink.vue'