From 5a3d732985d421c82b7215eef4a2118ff4e904dc Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 29 Jul 2024 12:09:59 +0200
Subject: [PATCH] fix(Quote): add conditions for wrapper component

- button was wrapped in a <a> link, which was an a11y issue and false positive trigger when cancelling the reply
- for 'reply to message' variant wrap component in a simple div

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/Quote.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/Quote.vue b/src/components/Quote.vue
index 52959213118..273f18167df 100644
--- a/src/components/Quote.vue
+++ b/src/components/Quote.vue
@@ -9,7 +9,8 @@ components.
 </docs>
 
 <template>
-	<router-link :to="{ hash, params: { skipLeaveWarning: true } }"
+	<component :is="component.tag"
+		:to="component.link"
 		class="quote"
 		:class="{'quote-own-message': isOwnMessageQuoted}"
 		@click.native="handleQuoteClick">
@@ -45,13 +46,14 @@ components.
 		<NcButton v-if="canCancel"
 			class="quote__close"
 			type="tertiary"
+			:title="cancelQuoteLabel"
 			:aria-label="cancelQuoteLabel"
 			@click="handleAbort">
 			<template #icon>
 				<Close :size="20" />
 			</template>
 		</NcButton>
-	</router-link>
+	</component>
 </template>
 
 <script>
@@ -127,6 +129,12 @@ export default {
 	},
 
 	computed: {
+		component() {
+			return this.canCancel
+				? { tag: 'div', link: undefined }
+				: { tag: 'router-link', link: { hash: this.hash, params: { skipLeaveWarning: true } } }
+		},
+
 		isOwnMessageQuoted() {
 			return this.message.actorId === this.$store.getters.getActorId()
 				&& this.message.actorType === this.$store.getters.getActorType()
@@ -215,6 +223,10 @@ export default {
 		},
 
 		handleQuoteClick() {
+			if (this.canCancel) {
+				return
+			}
+
 			if (this.$route.hash === this.hash) {
 				// Already on this message route, just trigger highlight
 				EventBus.emit('focus-message', this.message.id)