Merge pull request #484 from nextcloud/revert-427-fix/tabindex_question
Revert "Allow navigation through edit via Tab-Key"
This commit is contained in:
commit
25f3fe0604
|
@ -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
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -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}`"
|
||||||
|
@ -78,7 +75,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"
|
||||||
|
@ -154,15 +151,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()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue