Revert "Allow navigation through edit via Tab-Key"

This commit is contained in:
John Molakvoæ 2020-06-22 15:28:21 +02:00 committed by GitHub
parent 31cd45d582
commit 704abc930f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 62 deletions

View file

@ -25,9 +25,7 @@
:class="{ 'question--edit': edit }" :class="{ 'question--edit': edit }"
:aria-label="t('forms', 'Question number {index}', {index})" :aria-label="t('forms', 'Question number {index}', {index})"
class="question" class="question"
@click="enableEdit" @click="enableEdit">
@focusin="onFocusIn"
@focusout="onFocusOut">
<!-- Drag handle --> <!-- Drag handle -->
<!-- TODO: implement arrow key mapping to reorder question --> <!-- TODO: implement arrow key mapping to reorder question -->
<div v-if="!readOnly" <div v-if="!readOnly"
@ -38,7 +36,6 @@
<!-- Header --> <!-- Header -->
<div class="question__header"> <div class="question__header">
<input v-if="edit || !text" <input v-if="edit || !text"
ref="titleInput"
:placeholder="titlePlaceholder" :placeholder="titlePlaceholder"
:aria-label="t('forms', 'Title of question number {index}', {index})" :aria-label="t('forms', 'Title of question number {index}', {index})"
:value="text" :value="text"
@ -48,11 +45,7 @@
:maxlength="maxQuestionLength" :maxlength="maxQuestionLength"
required required
@input="onTitleChange"> @input="onTitleChange">
<h3 v-else <h3 v-else class="question__header-title" v-text="computedText" />
class="question__header-title"
:tabindex="computedTitleTabIndex"
@focus="onTitleFocus"
v-text="computedText" />
<div v-if="!edit && !questionValid" <div v-if="!edit && !questionValid"
v-tooltip.auto="warningInvalid" v-tooltip.auto="warningInvalid"
class="question__header-warning icon-error-color" class="question__header-warning icon-error-color"
@ -154,17 +147,6 @@ export default {
questionValid() { questionValid() {
return this.text && this.contentValid 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: { methods: {
@ -176,34 +158,6 @@ export default {
this.$emit('update:mandatory', mandatory) 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 * Enable the edit mode
*/ */

View file

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