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 interactive variants (reply to message, edit Message) wrap component in a simple div

Signed-off-by: Maksim Sukharev <[email protected]>

src/components/Quote.vue

@@ -9,9 +9,9 @@ components.
 </docs>
 
 <template>
-	<router-link :to="{ hash, params: { skipLeaveWarning: true } }"
-		class="quote"
-		:class="{'quote-own-message': isOwnMessageQuoted}"
+	<component :is="component.tag"
+		:to="component.link"
+		:class="['quote', { 'quote-own-message': isOwnMessageQuoted }]"
 		@click.native="handleQuoteClick">
 		<div class="quote__main">
 			<div v-if="message.id"
@@ -45,13 +45,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 +128,12 @@ export default {
 	},
 
 	computed: {
+		component() {
+			return this.canCancel || this.editMessage
+				? { 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 +222,10 @@ export default {
 		},
 
 		handleQuoteClick() {
+			if (this.canCancel || this.editMessage) {
+				return
+			}
+
 			if (this.$route.hash === this.hash) {
 				// Already on this message route, just trigger highlight
 				EventBus.emit('focus-message', this.message.id)