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/misc/api-config.vue

@@ -27,7 +27,7 @@
 				<span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span>
 			</i18n-t>
 			<br/>
-			<a @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</a>
+			<BaseButton @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</BaseButton>
 		</div>
 
 		<message variant="success" v-if="successMsg !== '' && errorMsg === ''" class="mt-2">
@@ -48,6 +48,7 @@ import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
 import {success} from '@/message'
 
 import Message from '@/components/misc/message.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
 
 const props = defineProps({
 	configureOpen: {

src/components/misc/card.vue

@@ -4,7 +4,7 @@
 			<p class="card-header-title">
 				{{ title }}
 			</p>
-			<a
+			<BaseButton
 				v-if="hasClose"
 				class="card-header-icon"
 				:aria-label="$t('misc.close')"
@@ -14,7 +14,7 @@
 				<span class="icon">
 					<icon :icon="closeIcon"/>
 				</span>
-			</a>
+			</BaseButton>
 		</header>
 		<div class="card-content loader-container" :class="{'p-0': !padding, 'is-loading': loading}">
 			<div :class="{'content': hasContent}">
@@ -25,6 +25,8 @@
 </template>
 
 <script setup lang="ts">
+import BaseButton from '@/components/base/BaseButton.vue'
+
 defineProps({
 	title: {
 		type: String,

src/components/misc/error.vue

@@ -1,7 +1,7 @@
 <template>
 	<message variant="danger">
 		<i18n-t keypath="loadingError.failed">
-			<a @click="reload">{{ $t('loadingError.tryAgain') }}</a>
+			<BaseButton @click="reload">{{ $t('loadingError.tryAgain') }}</BaseButton>
 			<a href="https://vikunja.io/contact/" rel="noreferrer noopener nofollow" target="_blank">{{ $t('loadingError.contact') }}</a>
 		</i18n-t>
 	</message>
@@ -9,6 +9,7 @@
 
 <script lang="ts" setup>
 import Message from '@/components/misc/message.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
 
 function reload() {
 	window.location.reload()

src/components/misc/notification.vue

@@ -1,6 +1,7 @@
 <template>
 	<notifications position="bottom left" :max="2" class="global-notification">
 		<template #body="{ item, close }">
+			<!-- FIXME: overlay whole notification with button and add event listener on that button instead -->
 			<div
 				:class="[
 					'vue-notification-template',