From 0acf44778d0ab2a317bcfb3e89aa0292e2d5c2ed Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 28 Mar 2023 13:13:29 +0200
Subject: [PATCH] fix: undo further nesting of interactive items

This is really bad for UX and accessability
---
 .../tasks/partials/singleTaskInProject.vue    | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/tasks/partials/singleTaskInProject.vue b/src/components/tasks/partials/singleTaskInProject.vue
index 96d4bf3e1f..e45ff93674 100644
--- a/src/components/tasks/partials/singleTaskInProject.vue
+++ b/src/components/tasks/partials/singleTaskInProject.vue
@@ -1,9 +1,5 @@
 <template>
-	<router-link
-		:to="taskDetailRoute"
-		:class="{'is-loading': taskService.loading}"
-		class="task loader-container"
-	>
+	<div :class="{'is-loading': taskService.loading}" class="task loader-container">
 		<fancycheckbox
 			:disabled="(isArchived || disabled) && !canMarkAsDone"
 			@update:model-value="markAsDone"
@@ -16,7 +12,8 @@
 			class="mr-1"
 		/>
 
-		<div
+		<router-link
+			:to="taskDetailRoute"
 			:class="{ 'done': task.done, 'show-project': showProject && project !== null}"
 			class="tasktext"
 		>
@@ -96,7 +93,7 @@
 			</span>
 
 			<checklist-summary :task="task"/>
-		</div>
+		</router-link>
 
 		<progress
 			class="progress is-small"
@@ -117,14 +114,14 @@
 
 		<BaseButton
 			:class="{'is-favorite': task.isFavorite}"
-			@click.prevent="toggleFavorite"
+			@click="toggleFavorite"
 			class="favorite"
 		>
 			<icon icon="star" v-if="task.isFavorite"/>
 			<icon :icon="['far', 'star']" v-else/>
 		</BaseButton>
 		<slot />
-	</router-link>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -288,11 +285,7 @@ function hideDeferDueDatePopup(e) {
 	border-radius: $radius;
 	border: 2px solid transparent;
 
-	color: var(--text);
-	transition: color ease $transition-duration;
-
 	&:hover {
-		color: var(--grey-900);
 		background-color: var(--grey-100);
 	}
 
@@ -338,6 +331,15 @@ function hideDeferDueDatePopup(e) {
 
 	}
 
+	a {
+		color: var(--text);
+		transition: color ease $transition-duration;
+
+		&:hover {
+			color: var(--grey-900);
+		}
+	}
+
 	.favorite {
 		opacity: 1;
 		text-align: center;