Merge pull request #427 from nextcloud/fix/tabindex_question

Allow navigation through edit via Tab-Key
nextcloud · Jun 16, 2020 · 9587350 · 9587350
2 parents 5b83674 + fd8f1aa
commit 9587350
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 4 deletions.
diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
@@ -25,7 +25,9 @@
 		:class="{ 'question--edit': edit }"
 		:aria-label="t('forms', 'Question number {index}', {index})"
 		class="question"
-		@click="enableEdit">
+		@click="enableEdit"
+		@focusin="onFocusIn"
+		@focusout="onFocusOut">
 		<!-- Drag handle -->
 		<!-- TODO: implement arrow key mapping to reorder question -->
 		<div v-if="!readOnly"
@@ -36,6 +38,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 +48,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 +154,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 +176,34 @@ 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
 		 */

diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
@@ -37,7 +37,10 @@
 		@delete="onDelete">
 		<ul class="question__content">
 			<template v-for="(answer, index) in options">
-				<li v-if="!edit" :key="answer.id" class="question__item">
+				<li v-if="!edit"
+					:key="answer.id"
+					class="question__item"
+					:class="{'question__item--last': (index === options.length-1),}">
 					<!-- Answer radio/checkbox + label -->
 					<!-- TODO: migrate to radio/checkbox component once available -->
 					<input :id="`${id}-answer-${answer.id}`"
@@ -74,7 +77,7 @@
 
 			<li v-if="(edit && !isLastEmpty) || hasNoAnswer" class="question__item">
 				<div class="question__item__pseudoInput" :class="{'question__item__pseudoInput--unique':isUnique}" />
-				<input
+				<input ref="inputNewAnswer"
 					:aria-label="t('forms', 'Add a new answer')"
 					:placeholder="t('forms', 'Add a new answer')"
 					class="question__input"
@@ -150,6 +153,15 @@ 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()
+						}
+					})
+				}
 			}
 		},
 	},