Skip to content

fix(a11y): keep the focus and list structure in the editor #3868

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AndyScherzinger merged 3 commits into from
Nov 11, 2026
Merged

fix(a11y): keep the focus and list structure in the editor #3868

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b4b0270
fix(a11y): focus the title of new questions of every type
AndyScherzinger Nov 4, 2026
3ae82ef
fix(a11y): keep the field of the answer "Other" out of list items
AndyScherzinger Nov 10, 2026
1da5289
fix(a11y): keep the focus on a move button at the top and the end
AndyScherzinger Nov 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions src/components/Questions/Question.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,19 +378,22 @@ export default defineComponent({
}

/**
* Reorder question but keep focus on the button
* Reorder question but keep focus on the button, or on the other move button once the question is the last one
*/
const onMoveDown = (): void => {
emit('moveDown')
nextTick(() => {
buttonDown.value?.$el?.focus()
;(props.canMoveDown ? buttonDown : buttonUp).value?.$el?.focus()
})
}

/**
* Reorder question but keep focus on the button, or on the other move button once the question is the first one
*/
const onMoveUp = (): void => {
emit('moveUp')
nextTick(() => {
buttonUp.value?.$el?.focus()
;(props.canMoveUp ? buttonUp : buttonDown).value?.$el?.focus()
})
}

Expand Down
7 changes: 5 additions & 2 deletions src/components/Questions/QuestionColor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

<template>
<Question
ref="rootElement"
v-bind="questionProps"
:titlePlaceholder="answerType.titlePlaceholder"
:warningInvalid="answerType.warningInvalid"
Expand Down Expand Up @@ -48,7 +49,7 @@
<script lang="ts">
import IconClose from '@material-symbols/svg-400/outlined/close.svg?raw'
import { t } from '@nextcloud/l10n'
import { computed, defineComponent } from 'vue'
import { computed, defineComponent, ref } from 'vue'
import NcButton from '@nextcloud/vue/components/NcButton'
import NcColorPicker from '@nextcloud/vue/components/NcColorPicker'
import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
Expand All @@ -73,7 +74,8 @@ export default defineComponent({
emits: [...QUESTION_EMITS, 'update:values'],

setup(props, { emit }) {
const question = useQuestion(props, { emit })
const rootElement = ref<{ $el?: HTMLElement } | null>(null)
const question = useQuestion(props, { emit, rootElement })
const values = computed(() => {
return props.values as Array<string | null | undefined>
})
Expand Down Expand Up @@ -107,6 +109,7 @@ export default defineComponent({

return {
...question,
rootElement,
IconClose,
t,
colorPickerPlaceholder,
Expand Down
7 changes: 5 additions & 2 deletions src/components/Questions/QuestionDate.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

<template>
<Question
ref="rootElement"
v-bind="questionProps"
:titlePlaceholder="answerType.titlePlaceholder"
:warningInvalid="answerType.warningInvalid"
Expand Down Expand Up @@ -112,7 +113,7 @@
<script lang="ts">
import { t } from '@nextcloud/l10n'
import moment from '@nextcloud/moment'
import { computed, defineComponent } from 'vue'
import { computed, defineComponent, ref } from 'vue'
import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
import NcActionInput from '@nextcloud/vue/components/NcActionInput'
import NcDateTimePicker from '@nextcloud/vue/components/NcDateTimePicker'
Expand Down Expand Up @@ -155,7 +156,8 @@ export default defineComponent({
emits: [...QUESTION_EMITS, 'update:values'],

setup(props, { emit }) {
const question = useQuestion(props, { emit })
const rootElement = ref<{ $el?: HTMLElement } | null>(null)
const question = useQuestion(props, { emit, rootElement })
const values = computed(() => {
return props.values as Array<string | undefined>
})
Expand Down Expand Up @@ -460,6 +462,7 @@ export default defineComponent({

return {
...question,
rootElement,
extraSettingsFormatter: {
stringify: stringifyDate,
parse: parseTimestampToDate,
Expand Down
5 changes: 4 additions & 1 deletion src/components/Questions/QuestionDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

<template>
<Question
ref="rootElement"
v-bind="questionProps"
:titlePlaceholder="answerType.titlePlaceholder"
:warningInvalid="answerType.warningInvalid"
Expand Down Expand Up @@ -144,7 +145,8 @@ export default defineComponent({
emits: [...QUESTION_EMITS, ...QUESTION_MULTIPLE_EMITS, 'update:values'],

setup(props, { emit }) {
const question = useQuestion(props, { emit })
const rootElement = ref<{ $el?: HTMLElement } | null>(null)
const question = useQuestion(props, { emit, rootElement })
const values = computed<Array<number | string>>(() => {
return Array.isArray(props.values) ? props.values : []
})
Expand Down Expand Up @@ -246,6 +248,7 @@ export default defineComponent({

return {
...question,
rootElement,
...questionMultiple,
input,
choices,
Expand Down
5 changes: 4 additions & 1 deletion src/components/Questions/QuestionFile.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

<template>
<Question
ref="rootElement"
v-bind="questionProps"
:titlePlaceholder="answerType.titlePlaceholder"
:warningInvalid="answerType.warningInvalid"
Expand Down Expand Up @@ -237,7 +238,8 @@ export default defineComponent({
emits: [...QUESTION_EMITS, 'update:values'],

setup(props, { emit }) {
const question = useQuestion(props, { emit })
const rootElement = ref<{ $el?: HTMLElement } | null>(null)
const question = useQuestion(props, { emit, rootElement })
const values = computed<UploadedFileValue[]>(() => {
return props.values as UploadedFileValue[]
})
Expand Down Expand Up @@ -512,6 +514,7 @@ export default defineComponent({

return {
...question,
rootElement,
values,
IconChevronLeft,
IconDelete,
Expand Down
5 changes: 4 additions & 1 deletion src/components/Questions/QuestionGrid.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

<template>
<Question
ref="rootElement"
v-bind="questionProps"
:titlePlaceholder="answerType.titlePlaceholder"
:warningInvalid="answerType.warningInvalid"
Expand Down Expand Up @@ -229,7 +230,8 @@ export default defineComponent({
emits: [...QUESTION_EMITS, ...QUESTION_MULTIPLE_EMITS, 'update:values'],

setup(props, { emit }) {
const question = useQuestion(props, { emit })
const rootElement = ref<{ $el?: HTMLElement } | null>(null)
const question = useQuestion(props, { emit, rootElement })
const input = ref<
Array<{
focus?: () => void
Expand Down Expand Up @@ -388,6 +390,7 @@ export default defineComponent({

return {
...question,
rootElement,
...questionMultiple,
columns,
input,
Expand Down
5 changes: 4 additions & 1 deletion src/components/Questions/QuestionLinearScale.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

<template>
<Question
ref="rootElement"
v-bind="questionProps"
:titlePlaceholder="answerType.titlePlaceholder"
:warningInvalid="answerType.warningInvalid"
Expand Down Expand Up @@ -170,7 +171,8 @@ export default defineComponent({
emits: [...QUESTION_EMITS, 'update:values'],

setup(props, { emit }) {
const question = useQuestion(props, { emit })
const rootElement = ref<{ $el?: HTMLElement } | null>(null)
const question = useQuestion(props, { emit, rootElement })
const values = computed<string[]>(() => {
return props.values as string[]
})
Expand Down Expand Up @@ -328,6 +330,7 @@ export default defineComponent({

return {
...question,
rootElement,
IconPencil,
t,
lowest,
Expand Down
5 changes: 4 additions & 1 deletion src/components/Questions/QuestionLong.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

<template>
<Question
ref="rootElement"
v-bind="questionProps"
:titlePlaceholder="answerType.titlePlaceholder"
:warningInvalid="answerType.warningInvalid"
Expand Down Expand Up @@ -59,7 +60,8 @@ export default defineComponent({

setup(props, { emit }) {
const textarea = ref<HTMLTextAreaElement | null>(null)
const question = useQuestion(props, { emit })
const rootElement = ref<{ $el?: HTMLElement } | null>(null)
const question = useQuestion(props, { emit, rootElement })
const values = computed(() => {
return props.values as Array<
string | number | readonly string[] | null | undefined
Expand Down Expand Up @@ -127,6 +129,7 @@ export default defineComponent({

return {
...question,
rootElement,
textarea,
submissionInputPlaceholder,
textareaValue,
Expand Down
4 changes: 2 additions & 2 deletions src/components/Questions/QuestionMultiple.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@
@tabbedOut="checkValidOption" />
</TransitionGroup>
</Draggable>
<li
<div
v-if="allowOtherAnswer"
key="option-add-other"
class="question__item">
Expand All @@ -173,7 +173,7 @@
minlength="1"
type="text"
:readonly="!readOnly" />
</li>
</div>
</template>

<!-- Add multiple options modal -->
Expand Down
5 changes: 4 additions & 1 deletion src/components/Questions/QuestionRanking.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

<template>
<Question
ref="rootElement"
v-bind="questionProps"
:titlePlaceholder="answerType.titlePlaceholder"
:warningInvalid="answerType.warningInvalid"
Expand Down Expand Up @@ -247,7 +248,8 @@ export default defineComponent({
emits: [...QUESTION_EMITS, ...QUESTION_MULTIPLE_EMITS, 'update:values'],

setup(props, { emit }) {
const question = useQuestion(props, { emit })
const rootElement = ref<{ $el?: HTMLElement } | null>(null)
const question = useQuestion(props, { emit, rootElement })
const values = computed<Array<number | string>>(() => {
return Array.isArray(props.values) ? props.values : []
})
Expand Down Expand Up @@ -488,6 +490,7 @@ export default defineComponent({

return {
...question,
rootElement,
...questionMultiple,
buttonOptionDown,
buttonOptionUp,
Expand Down
5 changes: 4 additions & 1 deletion src/components/Questions/QuestionShort.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

<template>
<Question
ref="rootElement"
v-bind="questionProps"
:titlePlaceholder="answerType.titlePlaceholder"
:warningInvalid="answerType.warningInvalid"
Expand Down Expand Up @@ -117,7 +118,8 @@ export default defineComponent({
emits: [...QUESTION_EMITS, 'update:values'],

setup(props, { emit }) {
const question = useQuestion(props, { emit })
const rootElement = ref<{ $el?: HTMLElement } | null>(null)
const question = useQuestion(props, { emit, rootElement })
const input = ref<HTMLInputElement | null>(null)
const regexInput = ref<{
$el: {
Expand Down Expand Up @@ -299,6 +301,7 @@ export default defineComponent({

return {
...question,
rootElement,
IconRegex,
t,
validationTypes,
Expand Down
Loading