Merge pull request #484 from nextcloud/revert-427-fix/tabindex_question

Revert "Allow navigation through edit via Tab-Key"

src/components/Questions/Question.vue

@@ -25,9 +25,7 @@
 		:class="{ 'question--edit': edit }"
 		:aria-label="t('forms', 'Question number {index}', {index})"
 		class="question"
-		@click="enableEdit"
-		@focusin="onFocusIn"
-		@focusout="onFocusOut">
+		@click="enableEdit">
 		<!-- Drag handle -->
 		<!-- TODO: implement arrow key mapping to reorder question -->
 		<div v-if="!readOnly"
@@ -38,7 +36,6 @@
 		<!-- 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"
@@ -48,11 +45,7 @@
 				:maxlength="maxQuestionLength"
 				required
 				@input="onTitleChange">
-			<h3 v-else
-				class="question__header-title"
-				:tabindex="computedTitleTabIndex"
-				@focus="onTitleFocus"
-				v-text="computedText" />
+			<h3 v-else class="question__header-title" v-text="computedText" />
 			<div v-if="!edit && !questionValid"
 				v-tooltip.auto="warningInvalid"
 				class="question__header-warning icon-error-color"
@@ -154,17 +147,6 @@ 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: {
@@ -176,34 +158,6 @@ 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 & disable resp. edit, if focus jumps to next question (e.g. by tab-navigation)
-		 * @param {Object} event The triggered focusIn/focusOut event
-		 */
-		onFocusIn(event) {
-			if (event.target.closest('.question') !== event.relatedTarget?.closest('.question')) {
-				this.enableEdit()
-			}
-		},
-
-		onFocusOut(event) {
-			if (event.target.closest('.question') !== event.relatedTarget?.closest('.question')) {
-				this.disableEdit()
-			}
-		},
-
 		/**
 		 * Enable the edit mode
 		 */

src/components/Questions/QuestionMultiple.vue

@@ -37,10 +37,7 @@
 		@delete="onDelete">
 		<ul class="question__content">
 			<template v-for="(answer, index) in options">
-				<li v-if="!edit"
-					:key="answer.id"
-					class="question__item"
-					:class="{'question__item--last': (index === options.length-1),}">
+				<li v-if="!edit" :key="answer.id" class="question__item">
 					<!-- Answer radio/checkbox + label -->
 					<!-- TODO: migrate to radio/checkbox component once available -->
 					<input :id="`${id}-answer-${answer.id}`"
@@ -78,7 +75,7 @@
 
 			<li v-if="(edit && !isLastEmpty) || hasNoAnswer" class="question__item">
 				<div class="question__item__pseudoInput" :class="{'question__item__pseudoInput--unique':isUnique}" />
-				<input ref="inputNewAnswer"
+				<input
 					:aria-label="t('forms', 'Add a new answer')"
 					:placeholder="t('forms', 'Add a new answer')"
 					class="question__input"
@@ -154,15 +151,6 @@ export default {
 
 				// update parent
 				this.updateOptions(options)
-			} else {
-				// If edit becomes true by tabbing to last element, focus newAnswer-input
-				if (document.activeElement?.parentNode?.classList.contains('question__item--last')) {
-					this.$nextTick(() => {
-						if (this.$refs.inputNewAnswer) {
-							this.$refs.inputNewAnswer.focus()
-						}
-					})
-				}
 			}
 		},
 	},