From 4dc04b661d2fc3544f78fadaae5718544227823d Mon Sep 17 00:00:00 2001
From: Jonas Rittershofer <jotoeri@users.noreply.github.com>
Date: Fri, 29 May 2020 13:20:01 +0200
Subject: [PATCH] Allow navigation through edit via Tab-Key

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
---
 src/components/Questions/Question.vue | 30 ++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
index 1ea8711..269ed57 100644
--- a/src/components/Questions/Question.vue
+++ b/src/components/Questions/Question.vue
@@ -36,6 +36,7 @@
 		<!-- Header -->
 		<div class="question__header">
 			<input v-if="edit || !text"
+				ref="titleInput"
 				:placeholder="titlePlaceholder"
 				:aria-label="t('forms', 'Title of question number {index}', {index})"
 				:value="text"
@@ -45,7 +46,11 @@
 				:maxlength="maxQuestionLength"
 				required
 				@input="onTitleChange">
-			<h3 v-else class="question__header-title" v-text="computedText" />
+			<h3 v-else
+				class="question__header-title"
+				:tabindex="computedTitleTabIndex"
+				@focus="onTitleFocus"
+				v-text="computedText" />
 			<div v-if="!edit && !questionValid"
 				v-tooltip.auto="warningInvalid"
 				class="question__header-warning icon-error-color"
@@ -147,6 +152,17 @@ export default {
 		questionValid() {
 			return this.text && this.contentValid
 		},
+
+		/**
+		 * Only allow tabbing the title when necessary for edit.
+		 * @returns {Number}
+		 */
+		computedTitleTabIndex() {
+			if (!this.readOnly) {
+				return 0
+			}
+			return -1
+		},
 	},
 
 	methods: {
@@ -158,6 +174,18 @@ export default {
 			this.$emit('update:mandatory', mandatory)
 		},
 
+		/**
+		 * Allow edit-navigation through Tab-Key
+		 */
+		onTitleFocus() {
+			if (!this.readOnly) {
+				this.enableEdit()
+				this.$nextTick(() => {
+					this.$refs.titleInput.focus()
+				})
+			}
+		},
+
 		/**
 		 * Enable the edit mode
 		 */