From 3b9bc5b2f86f203eda408afa3f0bbccdddddde33 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 11 May 2022 01:14:38 +0200
Subject: [PATCH] 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.
---
 cypress/e2e/task/task.spec.ts                 |  6 +--
 src/components/home/TheNavigation.vue         |  4 +-
 src/components/home/contentAuth.vue           |  4 +-
 src/components/home/navigation.vue            | 13 ++++--
 src/components/input/datepicker.vue           | 41 ++++++++++---------
 src/components/input/editor.vue               | 13 +++---
 src/components/input/multiselect.vue          | 15 ++++---
 src/components/list/partials/list-card.vue    | 17 ++++----
 src/components/misc/api-config.vue            |  3 +-
 src/components/misc/card.vue                  |  6 ++-
 src/components/misc/error.vue                 |  3 +-
 src/components/misc/notification.vue          |  1 +
 .../notifications/notifications.vue           |  9 ++--
 .../quick-actions/quick-actions.vue           | 11 +++--
 src/components/tasks/gantt-component.vue      |  7 +++-
 src/components/tasks/partials/attachments.vue | 18 +++++---
 .../tasks/partials/editAssignees.vue          |  7 ++--
 src/components/tasks/partials/editLabels.vue  |  3 +-
 .../tasks/partials/quick-add-magic.vue        |  9 ++--
 .../tasks/partials/relatedTasks.vue           |  9 ++--
 src/components/tasks/partials/reminders.vue   |  7 +++-
 .../tasks/partials/singleTaskInList.vue       | 25 ++++++-----
 src/views/labels/ListLabels.vue               |  8 ++--
 src/views/list/ListList.vue                   | 10 +++--
 src/views/tasks/TaskDetailView.vue            | 12 +++---
 25 files changed, 159 insertions(+), 102 deletions(-)

diff --git a/cypress/e2e/task/task.spec.ts b/cypress/e2e/task/task.spec.ts
index c482c7a78..85ab4ba24 100644
--- a/cypress/e2e/task/task.spec.ts
+++ b/cypress/e2e/task/task.spec.ts
@@ -165,7 +165,7 @@ describe('Task', () => {
 			})
 			cy.visit(`/tasks/${tasks[0].id}`)
 
-			cy.get('.task-view .details.content.description .editor a')
+			cy.get('.task-view .details.content.description .editor button')
 				.click()
 			cy.get('.task-view .details.content.description .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
 				.type('{selectall}New Description')
@@ -297,7 +297,7 @@ describe('Task', () => {
 			cy.visit(`/tasks/${tasks[0].id}`)
 
 			cy.get('.task-view .column.assignees .multiselect .input-wrapper span.assignee')
-				.get('a.remove-assignee')
+				.get('.remove-assignee')
 				.click()
 
 			cy.get('.global-notification')
@@ -402,7 +402,7 @@ describe('Task', () => {
 				.contains('Due Date')
 				.get('.date-input .datepicker .show')
 				.click()
-			cy.get('.datepicker .datepicker-popup a')
+			cy.get('.datepicker .datepicker-popup button')
 				.contains('Tomorrow')
 				.click()
 			cy.get('[data-cy="closeDatepicker"]')
diff --git a/src/components/home/TheNavigation.vue b/src/components/home/TheNavigation.vue
index 824fd1ffa..a507e2083 100644
--- a/src/components/home/TheNavigation.vue
+++ b/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">
diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index a0b3204cf..e92bc89c2 100644
--- a/src/components/home/contentAuth.vue
+++ b/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>
diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index d79f002da..628998f0a 100644
--- a/src/components/home/navigation.vue
+++ b/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'
diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index 27a35d486..df7ce4737 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -1,18 +1,16 @@
 <template>
 	<div class="datepicker" :class="{'disabled': disabled}">
-		<a @click.stop="toggleDatePopup" class="show">
-			<template v-if="date === null">
-				{{ chooseDateLabel }}
-			</template>
-			<template v-else>
-				{{ formatDateShort(date) }}
-			</template>
-		</a>
+		<BaseButton @click.stop="toggleDatePopup" class="show">
+			{{ date === null ? chooseDateLabel : formatDateShort(date) }}
+		</BaseButton>
 
 		<transition name="fade">
 			<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
 
-				<a @click.stop="() => setDate('today')" v-if="(new Date()).getHours() < 21">
+				<BaseButton
+					v-if="(new Date()).getHours() < 21"
+					@click.stop="setDate('today')"
+				>
 					<span class="icon">
 						<icon :icon="['far', 'calendar-alt']"/>
 					</span>
@@ -24,8 +22,8 @@
 							{{ getWeekdayFromStringInterval('today') }}
 						</span>
 					</span>
-				</a>
-				<a @click.stop="() => setDate('tomorrow')">
+				</BaseButton>
+				<BaseButton @click.stop="() => setDate('tomorrow')">
 					<span class="icon">
 						<icon :icon="['far', 'sun']"/>
 					</span>
@@ -37,8 +35,8 @@
 							{{ getWeekdayFromStringInterval('tomorrow') }}
 						</span>
 					</span>
-				</a>
-				<a @click.stop="() => setDate('nextMonday')">
+				</BaseButton>
+				<BaseButton @click.stop="() => setDate('nextMonday')">
 					<span class="icon">
 						<icon icon="coffee"/>
 					</span>
@@ -50,8 +48,8 @@
 							{{ getWeekdayFromStringInterval('nextMonday') }}
 						</span>
 					</span>
-				</a>
-				<a @click.stop="() => setDate('thisWeekend')">
+				</BaseButton>
+				<BaseButton @click.stop="() => setDate('thisWeekend')">
 					<span class="icon">
 						<icon icon="cocktail"/>
 					</span>
@@ -63,8 +61,8 @@
 							{{ getWeekdayFromStringInterval('thisWeekend') }}
 						</span>
 					</span>
-				</a>
-				<a @click.stop="() => setDate('laterThisWeek')">
+				</BaseButton>
+				<BaseButton @click.stop="() => setDate('laterThisWeek')">
 					<span class="icon">
 						<icon icon="chess-knight"/>
 					</span>
@@ -76,8 +74,8 @@
 							{{ getWeekdayFromStringInterval('laterThisWeek') }}
 						</span>
 					</span>
-				</a>
-				<a @click.stop="() => setDate('nextWeek')">
+				</BaseButton>
+				<BaseButton @click.stop="() => setDate('nextWeek')">
 					<span class="icon">
 						<icon icon="forward"/>
 					</span>
@@ -89,7 +87,7 @@
 							{{ getWeekdayFromStringInterval('nextWeek') }}
 						</span>
 					</span>
-				</a>
+				</BaseButton>
 
 				<flat-pickr
 					:config="flatPickerConfig"
@@ -117,6 +115,8 @@ import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 import {i18n} from '@/i18n'
 
+import BaseButton from '@/components/base/BaseButton.vue'
+
 import {format} from 'date-fns'
 import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
@@ -134,6 +134,7 @@ export default defineComponent({
 	},
 	components: {
 		flatPickr,
+		BaseButton,
 	},
 	props: {
 		modelValue: {
diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index d7a24943e..f523ba2ec 100644
--- a/src/components/input/editor.vue
+++ b/src/components/input/editor.vue
@@ -16,23 +16,23 @@
 		<p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText">
 			{{ emptyText }}
 			<template v-if="isEditEnabled">
-				<a @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</a>.
+				<BaseButton @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</BaseButton>.
 			</template>
 		</p>
 
 		<ul class="actions d-print-none" v-if="bottomActions.length > 0">
 			<li v-if="isEditEnabled && !showPreviewText && showSave">
-				<a v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
-				<a v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</a>
+				<BaseButton v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
+				<BaseButton v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</BaseButton>
 			</li>
 			<li v-for="(action, k) in bottomActions" :key="k">
-				<a @click="action.action">{{ action.title }}</a>
+				<BaseButton @click="action.action">{{ action.title }}</BaseButton>
 			</li>
 		</ul>
 		<template v-else-if="isEditEnabled && showSave">
 			<ul v-if="showEditButton" class="actions d-print-none">
 				<li>
-					<a @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
+					<BaseButton @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
 				</li>
 			</ul>
 			<x-button
@@ -62,10 +62,13 @@ import AttachmentService from '../../services/attachment'
 import {findCheckboxesInText} from '../../helpers/checklistFromText'
 import {createRandomID} from '@/helpers/randomId'
 
+import BaseButton from '@/components/base/BaseButton.vue'
+
 export default defineComponent({
 	name: 'editor',
 	components: {
 		VueEasymde,
+		BaseButton,
 	},
 	props: {
 		modelValue: {
diff --git a/src/components/input/multiselect.vue b/src/components/input/multiselect.vue
index 047153b2a..2525217f4 100644
--- a/src/components/input/multiselect.vue
+++ b/src/components/input/multiselect.vue
@@ -15,7 +15,7 @@
 						<slot name="tag" :item="item">
 						<span :key="`item${key}`" class="tag ml-2 mt-2">
 							{{ label !== '' ? item[label] : item }}
-							<a @click="() => remove(item)" class="delete is-small"></a>
+							<BaseButton @click="() => remove(item)" class="delete is-small"></BaseButton>
 						</span>
 						</slot>
 					</template>
@@ -37,7 +37,7 @@
 
 		<transition name="fade">
 			<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
-				<button
+				<BaseButton
 					class="is-fullwidth"
 					v-for="(data, key) in filteredSearchResults"
 					:key="key"
@@ -54,9 +54,9 @@
 					<span class="hint-text">
 						{{ selectPlaceholder }}
 					</span>
-				</button>
+				</BaseButton>
 
-				<button
+				<BaseButton
 					v-if="creatableAvailable"
 					class="is-fullwidth"
 					:ref="`result-${filteredSearchResults.length}`"
@@ -75,7 +75,7 @@
 					<span class="hint-text">
 						{{ createPlaceholder }}
 					</span>
-				</button>
+				</BaseButton>
 			</div>
 		</transition>
 
@@ -87,8 +87,13 @@ import {defineComponent} from 'vue'
 import {i18n} from '@/i18n'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 
+import BaseButton from '@/components/base/BaseButton.vue'
+
 export default defineComponent({
 	name: 'multiselect',
+	components: {
+		BaseButton,
+	},
 	data() {
 		return {
 			query: '',
diff --git a/src/components/list/partials/list-card.vue b/src/components/list/partials/list-card.vue
index f3fda09c1..fa69c8e04 100644
--- a/src/components/list/partials/list-card.vue
+++ b/src/components/list/partials/list-card.vue
@@ -18,15 +18,16 @@
 			:style="{'background-image': background !== null ? `url(${background})` : false}"></div>
 		<div class="list-content">
 			<div class="is-archived-container">
-			<span class="is-archived" v-if="list.isArchived">
-				{{ $t('namespace.archived') }}
-			</span>
-				<span
+				<span class="is-archived" v-if="list.isArchived">
+					{{ $t('namespace.archived') }}
+				</span>
+				<BaseButton
 					:class="{'is-favorite': list.isFavorite, 'is-archived': list.isArchived}"
 					@click.stop="toggleFavoriteList(list)"
-					class="favorite">
-				<icon :icon="list.isFavorite ? 'star' : ['far', 'star']"/>
-			</span>
+					class="favorite"
+				>
+					<icon :icon="list.isFavorite ? 'star' : ['far', 'star']"/>
+				</BaseButton>
 			</div>
 			<div class="title">{{ list.title }}</div>
 		</div>
@@ -43,6 +44,8 @@ import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 import ListModel from '@/models/list'
 
+import BaseButton from '@/components/base/BaseButton.vue'
+
 const background = ref<string | null>(null)
 const backgroundLoading = ref(false)
 const blurHashUrl = ref('')
diff --git a/src/components/misc/api-config.vue b/src/components/misc/api-config.vue
index d07aa68a9..df910e845 100644
--- a/src/components/misc/api-config.vue
+++ b/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: {
diff --git a/src/components/misc/card.vue b/src/components/misc/card.vue
index f74e4cc55..47ec9cdea 100644
--- a/src/components/misc/card.vue
+++ b/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,
diff --git a/src/components/misc/error.vue b/src/components/misc/error.vue
index 35661cea0..0015f0919 100644
--- a/src/components/misc/error.vue
+++ b/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()
diff --git a/src/components/misc/notification.vue b/src/components/misc/notification.vue
index 18b66ebbe..8154ee5c8 100644
--- a/src/components/misc/notification.vue
+++ b/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',
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index a332765ea..08f318c51 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,10 +1,10 @@
 <template>
 	<div class="notifications">
 		<div class="is-flex is-justify-content-center">
-			<a @click.stop="showNotifications = !showNotifications" class="trigger-button">
+			<BaseButton @click.stop="showNotifications = !showNotifications" class="trigger-button">
 				<span class="unread-indicator" v-if="unreadNotifications > 0"></span>
 				<icon icon="bell"/>
-			</a>
+			</BaseButton>
 		</div>
 
 		<transition name="fade">
@@ -26,9 +26,9 @@
 							<span class="has-text-weight-bold mr-1" v-if="n.notification.doer">
 								{{ n.notification.doer.getDisplayName() }}
 							</span>
-							<a @click="() => to(n, index)()">
+							<BaseButton @click="() => to(n, index)()">
 								{{ n.toText(userInfo) }}
-							</a>
+							</BaseButton>
 						</div>
 						<span class="created" v-tooltip="formatDate(n.created)">
 							{{ formatDateSince(n.created) }}
@@ -50,6 +50,7 @@
 import {computed, onMounted, onUnmounted, ref} from 'vue'
 
 import NotificationService from '@/services/notification'
+import BaseButton from '@/components/base/BaseButton.vue'
 import User from '@/components/misc/user.vue'
 import names from '@/models/constants/notificationNames.json'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index fd26e35ff..5949e8c1b 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -32,7 +32,7 @@
 						{{ r.title }}
 					</span>
 					<div class="result-items">
-						<button
+						<BaseButton
 							v-for="(i, key) in r.items"
 							:key="key"
 							:ref="`result-${k}_${key}`"
@@ -44,7 +44,7 @@
 							:class="{'is-strikethrough': i.done}"
 						>
 							{{ i.title }}
-						</button>
+						</BaseButton>
 					</div>
 				</div>
 			</div>
@@ -63,6 +63,8 @@ import TeamModel from '@/models/team'
 
 import {CURRENT_LIST, LOADING, LOADING_MODULE, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
 import ListModel from '@/models/list'
+
+import BaseButton from '@/components/base/BaseButton.vue'
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
 import {getHistory} from '@/modules/listHistory'
 import {parseTaskText, PrefixMode} from '@/modules/parseTaskText'
@@ -86,7 +88,10 @@ const SEARCH_MODE_TEAMS = 'teams'
 
 export default defineComponent({
 	name: 'quick-actions',
-	components: {QuickAddMagic},
+	components: {
+		BaseButton,
+		QuickAddMagic,
+	},
 	data() {
 		return {
 			query: '',
diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue
index cb2298cfe..803f26f4f 100644
--- a/src/components/tasks/gantt-component.vue
+++ b/src/components/tasks/gantt-component.vue
@@ -96,9 +96,10 @@
 					</span>
 					<priority-label :priority="t.priority" :done="t.done"/>
 					<!-- using the key here forces vue to use the updated version model and not the response returned by the api -->
-					<a @click="editTask(theTasks[k])" class="edit-toggle">
+					<!-- FIXME: add label -->
+					<BaseButton @click="editTask(theTasks[k])" class="edit-toggle">
 						<icon icon="pen"/>
-					</a>
+					</BaseButton>
 				</VueDragResize>
 			</div>
 			<template v-if="showTaskswithoutDates">
@@ -184,12 +185,14 @@ import TaskCollectionService from '../../services/taskCollection'
 import {mapState} from 'vuex'
 import Rights from '../../models/constants/rights.json'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 
 export default defineComponent({
 	name: 'GanttChart',
 	components: {
+		BaseButton,
 		FilterPopup,
 		PriorityLabel,
 		EditTask,
diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index 1972c73d9..ef174f9c6 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -26,6 +26,9 @@
 		</progress>
 
 		<div class="files" v-if="attachments.length > 0">
+			<!-- FIXME: don't use a for element that wraps other links / buttons
+				Instead: overlay element with button that is inside.
+			-->
 			<a
 				class="attachment"
 				v-for="a in attachments"
@@ -53,25 +56,25 @@
 						</span>
 					</p>
 					<p>
-						<a
+						<BaseButton
 							@click.prevent.stop="downloadAttachment(a)"
 							v-tooltip="$t('task.attachment.downloadTooltip')"
 						>
 							{{ $t('misc.download') }}
-						</a>
-						<a
+						</BaseButton>
+						<BaseButton
 							@click.stop="copyUrl(a)"
 							v-tooltip="$t('task.attachment.copyUrlTooltip')"
 						>
 							{{ $t('task.attachment.copyUrl') }}
-						</a>
-						<a
+						</BaseButton>
+						<BaseButton
 							@click.prevent.stop="() => {attachmentToDelete = a; showDeleteModal = true}"
 							v-if="editEnabled"
 							v-tooltip="$t('task.attachment.deleteTooltip')"
 						>
 							{{ $t('misc.delete') }}
-						</a>
+						</BaseButton>
 					</p>
 				</div>
 			</a>
@@ -148,9 +151,12 @@ import {mapState} from 'vuex'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { uploadFiles, generateAttachmentUrl } from '@/helpers/attachments'
 
+import BaseButton from '@/components/base/BaseButton'
+
 export default defineComponent({
 	name: 'attachments',
 	components: {
+		BaseButton,
 		User,
 	},
 	data() {
diff --git a/src/components/tasks/partials/editAssignees.vue b/src/components/tasks/partials/editAssignees.vue
index 13de683aa..3d2dc6d2a 100644
--- a/src/components/tasks/partials/editAssignees.vue
+++ b/src/components/tasks/partials/editAssignees.vue
@@ -18,9 +18,9 @@
 			<template #tag="{item: user}">
 				<span class="assignee">
 					<user :avatar-size="32" :show-username="false" :user="user"/>
-					<a @click="removeAssignee(user)" class="remove-assignee" v-if="!disabled">
+					<BaseButton @click="removeAssignee(user)" class="remove-assignee" v-if="!disabled">
 						<icon icon="times"/>
-					</a>
+					</BaseButton>
 				</span>
 			</template>
 		</Multiselect>
@@ -34,6 +34,7 @@ import {useI18n} from 'vue-i18n'
 
 import User from '@/components/misc/user.vue'
 import Multiselect from '@/components/input/multiselect.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
 
 import {includesById} from '@/helpers/utils'
 import UserModel from '@/models/user'
@@ -95,7 +96,7 @@ async function removeAssignee(user: UserModel) {
 	success({message: t('task.assignee.unassignSuccess')})
 }
 
-async function findUser(query) {
+async function findUser(query: string) {
 	if (query === '') {
 		clearAllFoundUsers()
 		return
diff --git a/src/components/tasks/partials/editLabels.vue b/src/components/tasks/partials/editLabels.vue
index 051f8b9ae..74b2d6e4a 100644
--- a/src/components/tasks/partials/editLabels.vue
+++ b/src/components/tasks/partials/editLabels.vue
@@ -19,7 +19,7 @@
 				:style="{'background': label.hexColor, 'color': label.textColor}"
 				class="tag">
 				<span>{{ label.title }}</span>
-				<button type="button" v-cy="'taskDetail.removeLabel'" @click="removeLabel(label)" class="delete is-small" />
+				<BaseButton v-cy="'taskDetail.removeLabel'" @click="removeLabel(label)" class="delete is-small" />
 			</span>
 		</template>
 		<template #searchResult="{option}">
@@ -47,6 +47,7 @@ import LabelModel from '@/models/label'
 import LabelTaskService from '@/services/labelTask'
 import {success} from '@/message'
 
+import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
 
 const props = defineProps({
diff --git a/src/components/tasks/partials/quick-add-magic.vue b/src/components/tasks/partials/quick-add-magic.vue
index 1177c7ee2..ab9f2c5a1 100644
--- a/src/components/tasks/partials/quick-add-magic.vue
+++ b/src/components/tasks/partials/quick-add-magic.vue
@@ -2,7 +2,7 @@
 	<div v-if="available">
 		<p class="help has-text-grey">
 			{{ $t('task.quickAddMagic.hint') }}.
-			<a @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</a>
+			<BaseButton @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</BaseButton>
 		</p>
 		<modal
 			@close="() => visible = false"
@@ -86,13 +86,16 @@
 </template>
 
 <script setup lang="ts">
+import {ref, computed} from 'vue'
+
+import BaseButton from '@/components/base/BaseButton.vue'
+
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {PREFIXES} from '@/modules/parseTaskText'
-import {ref, computed} from 'vue'
 
 const visible = ref(false)
 const mode = ref(getQuickAddMagicMode())
 
 const available = computed(() => mode.value !== 'disabled')
-const prefixes = computed(() =>PREFIXES[mode.value])
+const prefixes = computed(() => PREFIXES[mode.value])
 </script>
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 5129eeadc..859f80939 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -103,12 +103,13 @@
 						</span>
 						{{ t.title }}
 					</router-link>
-					<a
+					<BaseButton
+						v-if="editEnabled"
 						@click="() => {showDeleteModal = true; relationToDelete = {relationKind: rts.kind, otherTaskId: t.id}}"
 						class="remove"
-						v-if="editEnabled">
+					>
 						<icon icon="trash-alt"/>
-					</a>
+					</BaseButton>
 				</div>
 			</div>
 		</div>
@@ -145,6 +146,7 @@ import TaskRelationService from '../../../services/taskRelation'
 import relationKinds from '../../../models/constants/relationKinds'
 import TaskRelationModel from '../../../models/taskRelation'
 
+import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
 
 export default defineComponent({
@@ -166,6 +168,7 @@ export default defineComponent({
 		}
 	},
 	components: {
+		BaseButton,
 		Multiselect,
 	},
 	props: {
diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue
index df5c31e9a..929587f0d 100644
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@@ -11,9 +11,9 @@
 				:disabled="disabled"
 				@close-on-change="() => addReminderDate(index)"
 			/>
-			<a @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
+			<BaseButton @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
 				<icon icon="times"></icon>
-			</a>
+			</BaseButton>
 		</div>
 		<div class="reminder-input" v-if="!disabled">
 			<Datepicker
@@ -28,10 +28,13 @@
 <script setup lang="ts">
 import {PropType, ref, onMounted, watch} from 'vue'
 
+import BaseButton from '@/components/base/BaseButton.vue'
 import Datepicker from '@/components/input/datepicker.vue'
 
 type Reminder = Date | string
 
+
+
 const props = defineProps({
 	modelValue: {
 		type: Array as PropType<Reminder[]>,
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index e9cc0de29..2e40e6f47 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -39,17 +39,20 @@
 				:user="a"
 				v-for="(a, i) in task.assignees"
 			/>
-			<time
-				:datetime="formatISO(task.dueDate)"
-				:class="{'overdue': task.dueDate <= new Date() && !task.done}"
-				class="is-italic"
-				@click.prevent.stop="showDefer = !showDefer"
+			<BaseButton
 				v-if="+new Date(task.dueDate) > 0"
+				@click.prevent.stop="showDefer = !showDefer"
 				v-tooltip="formatDate(task.dueDate)"
-				:aria-expanded="showDefer ? 'true' : 'false'"
 			>
-				- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
-			</time>
+				<time
+					:datetime="formatISO(task.dueDate)"
+					:class="{'overdue': task.dueDate <= new Date() && !task.done}"
+					class="is-italic"
+					:aria-expanded="showDefer ? 'true' : 'false'"
+				>
+					- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
+				</time>
+			</BaseButton>
 			<transition name="fade">
 				<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task" ref="deferDueDate"/>
 			</transition>
@@ -80,13 +83,13 @@
 			v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})">
 			{{ $store.getters['lists/getListById'](task.listId).title }}
 		</router-link>
-		<a
+		<BaseButton
 			:class="{'is-favorite': task.isFavorite}"
 			@click="toggleFavorite"
 			class="favorite">
 			<icon icon="star" v-if="task.isFavorite"/>
 			<icon :icon="['far', 'star']" v-else/>
-		</a>
+		</BaseButton>
 		<slot></slot>
 	</div>
 </template>
@@ -99,6 +102,7 @@ import PriorityLabel from './priorityLabel'
 import TaskService from '../../../services/task'
 import Labels from './labels'
 import User from '../../misc/user'
+import BaseButton from '@/components/base/BaseButton.vue'
 import Fancycheckbox from '../../input/fancycheckbox'
 import DeferTask from './defer-task'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
@@ -115,6 +119,7 @@ export default defineComponent({
 		}
 	},
 	components: {
+		BaseButton,
 		ChecklistSummary,
 		DeferTask,
 		Fancycheckbox,
diff --git a/src/views/labels/ListLabels.vue b/src/views/labels/ListLabels.vue
index 57fa7c4db..e321a6e0e 100644
--- a/src/views/labels/ListLabels.vue
+++ b/src/views/labels/ListLabels.vue
@@ -32,13 +32,13 @@
 						v-tooltip.bottom="$t('label.edit.forbidden')">
 						{{ l.title }}
 					</span>
-					<a
+					<BaseButton
 						:style="{'color': l.textColor}"
 						@click="editLabel(l)"
 						v-else>
 						{{ l.title }}
-					</a>
-					<a @click="showDeleteDialoge(l)" class="delete is-small" v-if="userInfo.id === l.createdBy.id"></a>
+					</BaseButton>
+					<BaseButton @click="showDeleteDialoge(l)" class="delete is-small" v-if="userInfo.id === l.createdBy.id" />
 				</span>
 			</div>
 			<div class="column is-4" v-if="isLabelEdit">
@@ -116,12 +116,14 @@ import {mapState} from 'vuex'
 import LabelModel from '../../models/label'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 
+import BaseButton from '@/components/base/BaseButton.vue'
 import AsyncEditor from '@/components/input/AsyncEditor'
 import ColorPicker from '@/components/input/colorPicker'
 
 export default defineComponent({
 	name: 'ListLabels',
 	components: {
+		BaseButton,
 		ColorPicker,
 		editor: AsyncEditor,
 	},
diff --git a/src/views/list/ListList.vue b/src/views/list/ListList.vue
index 69d055ea9..898e7e418 100644
--- a/src/views/list/ListList.vue
+++ b/src/views/list/ListList.vue
@@ -65,9 +65,9 @@
 
 			<nothing v-if="ctaVisible && tasks.length === 0 && !loading">
 				{{ $t('list.list.empty') }}
-				<a @click="focusNewTaskInput()">
+				<BaseButton @click="focusNewTaskInput()">
 					{{ $t('list.list.newTaskCta') }}
-				</a>
+				</BaseButton>
 			</nothing>
 
 			<div class="tasks-container" :class="{ 'has-task-edit-open': isTaskEdit }">
@@ -99,13 +99,13 @@
 									<span class="icon handle">
 										<icon icon="grip-lines"/>
 									</span>
-									<div
+									<BaseButton
 										@click="editTask(t.id)"
 										class="icon settings"
 										v-if="!list.isArchived"
 									>
 										<icon icon="pencil-alt"/>
-									</div>
+									</BaseButton>
 								</template>
 							</single-task-in-list>
 						</template>
@@ -134,6 +134,7 @@
 <script lang="ts">
 import { ref, toRef, defineComponent } from 'vue'
 
+import BaseButton from '@/components/base/BaseButton.vue'
 import ListWrapper from './ListWrapper.vue'
 import EditTask from '@/components/tasks/edit-task'
 import AddTask from '@/components/tasks/add-task'
@@ -190,6 +191,7 @@ export default defineComponent({
 		}
 	},
 	components: {
+		BaseButton,
 		ListWrapper,
 		Nothing,
 		FilterPopup,
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 38c5ccd32..05af56346 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -59,14 +59,14 @@
 										:disabled="taskService.loading || !canWrite"
 										ref="dueDate"
 									/>
-									<a
+									<BaseButton
 										@click="() => {task.dueDate = null;saveTask()}"
 										v-if="task.dueDate && canWrite"
 										class="remove">
 										<span class="icon is-small">
 											<icon icon="times"></icon>
 										</span>
-									</a>
+									</BaseButton>
 								</div>
 							</div>
 						</transition>
@@ -99,7 +99,7 @@
 										:disabled="taskService.loading || !canWrite"
 										ref="startDate"
 									/>
-									<a
+									<BaseButton
 										@click="() => {task.startDate = null;saveTask()}"
 										v-if="task.startDate && canWrite"
 										class="remove"
@@ -107,7 +107,7 @@
 										<span class="icon is-small">
 											<icon icon="times"></icon>
 										</span>
-									</a>
+									</BaseButton>
 								</div>
 							</div>
 						</transition>
@@ -126,14 +126,14 @@
 										:disabled="taskService.loading || !canWrite"
 										ref="endDate"
 									/>
-									<a
+									<BaseButton
 										@click="() => {task.endDate = null;saveTask()}"
 										v-if="task.endDate && canWrite"
 										class="remove">
 										<span class="icon is-small">
 											<icon icon="times"></icon>
 										</span>
-									</a>
+									</BaseButton>
 								</div>
 							</div>
 						</transition>