Just current state, not yet usable

package-lock.json

@@ -11689,6 +11689,11 @@
 			"integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
 			"dev": true
 		},
+		"tabbable": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-4.0.0.tgz",
+			"integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ=="
+		},
 		"table": {
 			"version": "5.4.6",
 			"resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",

package.json

@@ -42,7 +42,8 @@
 		"v-clipboard": "^2.2.3",
 		"vue": "^2.6.11",
 		"vue-router": "^3.3.4",
-		"vuedraggable": "^2.23.2"
+		"vuedraggable": "^2.23.2",
+		"tabbable": "^4.0.0"
 	},
 	"browserslist": [
 		"extends @nextcloud/browserslist-config"

src/components/Questions/AnswerInput.vue

@@ -15,7 +15,7 @@
 			@keydown.enter.prevent="addNewEntry">
 
 		<!-- Delete answer -->
-		<Actions>
+		<Actions @keydown.tab.exact.prevent="onActionsTab">
 			<ActionButton icon="icon-close" @click="deleteEntry">
 				{{ t('forms', 'Delete answer') }}
 			</ActionButton>
@@ -79,6 +79,11 @@ export default {
 			this.$refs.input.focus()
 		},
 
+		onActionsTab(event) {
+			console.debug('keydownTab')
+			// this.$emit('focus-next', event.target)
+		},
+
 		/**
 		 * Option changed, processing the data
 		 */

src/components/Questions/Question.vue

@@ -46,7 +46,7 @@
 				:maxlength="maxQuestionLength"
 				required
 				@input="onTitleChange"
-				@keydown.shift.tab.capture="nextDisableEdit">
+				@keydown.shift.tab.prevent="onTitleShiftTab">
 			<h3 v-else
 				class="question__header-title"
 				:tabindex="computedTitleTabIndex"
@@ -56,7 +56,10 @@
 				v-tooltip.auto="warningInvalid"
 				class="question__header-warning icon-error-color"
 				tabindex="0" />
-			<Actions v-if="!readOnly" class="question__header-menu" :force-menu="true">
+			<Actions v-if="!readOnly"
+				class="question__header-menu"
+				:force-menu="true"
+				@keydown.tab.exact.prevent="onActionsTab">
 				<ActionCheckbox :checked="mandatory"
 					@update:checked="onMandatoryChange">
 					{{ t('forms', 'Required') }}
@@ -167,6 +170,16 @@ export default {
 	},
 
 	methods: {
+		onTitleShiftTab(event) {
+			console.debug('this', event.target)
+			this.$emit('focus-prev', event.target)
+			this.disableEdit()
+		},
+		onActionsTab(event) {
+			console.debug('actionsTab', event)
+			this.$emit('focus-next', event.target)
+		},
+
 		onTitleChange({ target }) {
 			this.$emit('update:text', target.value)
 		},
@@ -179,12 +192,9 @@ export default {
 		 * Allow edit-navigation through Tab-Key
 		 */
 		onTitleFocus() {
-			console.debug('On Title focus', this.$refs)
 			if (!this.readOnly) {
 				this.enableEdit()
-				console.debug('Store NextTick')
 				this.$nextTick(() => {
-					console.debug('NextTick!')
 					this.$refs.titleInput.focus()
 				})
 			}
@@ -210,18 +220,6 @@ export default {
 			}
 		},
 
-		nextDisableEdit(event) {
-			console.debug('nextDisable')
-			console.debug(event)
-			// event.preventDefault()
-			// this.disableEdit()
-			this.$nextTick(() => {
-				console.debug('Later!')
-			})
-			console.debug('trigger')
-			// this.disableEdit()
-		},
-
 		/**
 		 * Delete this question
 		 */

src/components/Questions/QuestionLong.vue

@@ -32,7 +32,9 @@
 		:warning-invalid="answerType.warningInvalid"
 		@update:text="onTitleChange"
 		@update:mandatory="onMandatoryChange"
-		@delete="onDelete">
+		@delete="onDelete"
+		@focus-prev="onFocusPrev"
+		@focus-next="FocusNextOutside">
 		<div class="question__content">
 			<textarea ref="textarea"
 				:aria-label="t('forms', 'A long answer for the question “{text}”', { text })"

src/components/Questions/QuestionMultiple.vue

@@ -34,7 +34,9 @@
 		:shift-drag-handle="shiftDragHandle"
 		@update:text="onTitleChange"
 		@update:mandatory="onMandatoryChange"
-		@delete="onDelete">
+		@delete="onDelete"
+		@focus-prev="onFocusPrev"
+		@focus-next="onFocusNext">
 		<ul class="question__content">
 			<template v-for="(answer, index) in options">
 				<li v-if="!edit"
@@ -72,7 +74,8 @@
 					:max-option-length="maxStringLengths.optionText"
 					@add="addNewEntry"
 					@delete="deleteOption"
-					@update:answer="updateAnswer" />
+					@update:answer="updateAnswer"
+					@focus-next="onFocusNext" />
 			</template>
 
 			<li v-if="(edit && !isLastEmpty) || hasNoAnswer" class="question__item">

src/components/Questions/QuestionShort.vue

@@ -32,7 +32,10 @@
 		:warning-invalid="answerType.warningInvalid"
 		@update:text="onTitleChange"
 		@update:mandatory="onMandatoryChange"
-		@delete="onDelete">
+		@delete="onDelete"
+		@focus-prev="onFocusPrev"
+		@focus-next="FocusNextOutside"
+		@keydown.tab.exact="onKeydownTab">
 		<div class="question__content">
 			<input ref="input"
 				:aria-label="t('forms', 'A short answer for the question “{text}”', { text })"

src/mixins/QuestionMixin.js

@@ -22,6 +22,7 @@ import { debounce } from 'debounce'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
+import tabbable from 'tabbable'
 
 import Question from '../components/Questions/Question'
 
@@ -201,5 +202,22 @@ export default {
 				this.edit = false
 			}
 		},
+
+		onFocusPrev(elem) {
+			console.debug('TabPrev Mixin', elem)
+			this.$emit('focus-prev', elem)
+		},
+		onFocusNext(elem) {
+			console.debug('TabNext', elem)
+			this.$emit('focus-next', elem)
+		},
+		FocusNextOutside(elem) {
+			console.debug('focusnextoutside', elem)
+			this.$emit('focus-next', elem)
+			this.disableEdit()
+		},
+		onKeydownTab(event) {
+			console.debug('keydownTab')
+		},
 	},
 }

src/views/Create.vue

@@ -94,7 +94,9 @@
 					:index="index + 1"
 					:max-string-lengths="maxStringLengths"
 					v-bind.sync="question"
-					@delete="deleteQuestion(question)" />
+					@delete="deleteQuestion(question)"
+					@focus-prev="onFocusPrev"
+					@focus-next="onFocusNext" />
 			</Draggable>
 
 			<!-- Add new questions toolbar -->
@@ -126,6 +128,7 @@ import { loadState } from '@nextcloud/initial-state'
 import { showError } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
 import debounce from 'debounce'
+import tabbable from 'tabbable'
 import Draggable from 'vuedraggable'
 
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
@@ -230,6 +233,22 @@ export default {
 	},
 
 	methods: {
+		onFocusPrev(elem) {
+			console.debug('Create tabPrev', elem)
+			const tabelements = tabbable(this.$el)
+			console.debug(tabelements)
+			const ind = tabelements.findIndex(tabbableElement => tabbableElement === elem)
+			console.debug(tabelements[ind - 1])
+			tabelements[ind - 1].focus()
+		},
+		onFocusNext(elem) {
+			console.debug('Create tabNext', elem)
+			const tabelements = tabbable(this.$el)
+			console.debug(tabelements)
+			const ind = tabelements.findIndex(tabbableElement => tabbableElement === elem)
+			console.debug(tabelements[ind + 1])
+			tabelements[ind + 1].focus()
+		},
 		/**
 		 * Fetch the full form data and update parent
 		 *