From ee254cd562f9e7921487141740cd94abaebfc95c Mon Sep 17 00:00:00 2001
From: Andy Scherzinger <info@andy-scherzinger.de>
Date: Wed, 4 Nov 2026 17:13:08 +0100
Subject: [PATCH 1/3] fix(a11y): focus the title of new questions of every type

Adding a question moves the focus to the title of the new question.
Only checkbox and radio questions handed their root element to
useQuestion, so for all other types the focus stayed on the closed
menu and fell back to the page. Every question component now hands
its root element to useQuestion.

Assisted-by: Claude Code:claude-opus-5-5
Signed-off-by: Andy Scherzinger <info@andy-scherzinger.de>
---
 src/components/Questions/QuestionColor.vue       | 7 +++++--
 src/components/Questions/QuestionDate.vue        | 7 +++++--
 src/components/Questions/QuestionDropdown.vue    | 5 ++++-
 src/components/Questions/QuestionFile.vue        | 5 ++++-
 src/components/Questions/QuestionGrid.vue        | 5 ++++-
 src/components/Questions/QuestionLinearScale.vue | 5 ++++-
 src/components/Questions/QuestionLong.vue        | 5 ++++-
 src/components/Questions/QuestionRanking.vue     | 5 ++++-
 src/components/Questions/QuestionShort.vue       | 5 ++++-
 9 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/components/Questions/QuestionColor.vue b/src/components/Questions/QuestionColor.vue
index 5241f41a7..5b96a86c9 100644
--- a/src/components/Questions/QuestionColor.vue
+++ b/src/components/Questions/QuestionColor.vue
@@ -5,6 +5,7 @@
 
 <template>
 	<Question
+		ref="rootElement"
 		v-bind="questionProps"
 		:titlePlaceholder="answerType.titlePlaceholder"
 		:warningInvalid="answerType.warningInvalid"
@@ -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'
@@ -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>
 		})
@@ -107,6 +109,7 @@ export default defineComponent({
 
 		return {
 			...question,
+			rootElement,
 			IconClose,
 			t,
 			colorPickerPlaceholder,
diff --git a/src/components/Questions/QuestionDate.vue b/src/components/Questions/QuestionDate.vue
index 0d8707011..2c6671631 100644
--- a/src/components/Questions/QuestionDate.vue
+++ b/src/components/Questions/QuestionDate.vue
@@ -5,6 +5,7 @@
 
 <template>
 	<Question
+		ref="rootElement"
 		v-bind="questionProps"
 		:titlePlaceholder="answerType.titlePlaceholder"
 		:warningInvalid="answerType.warningInvalid"
@@ -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'
@@ -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>
 		})
@@ -460,6 +462,7 @@ export default defineComponent({
 
 		return {
 			...question,
+			rootElement,
 			extraSettingsFormatter: {
 				stringify: stringifyDate,
 				parse: parseTimestampToDate,
diff --git a/src/components/Questions/QuestionDropdown.vue b/src/components/Questions/QuestionDropdown.vue
index a22aea366..1b3eee327 100644
--- a/src/components/Questions/QuestionDropdown.vue
+++ b/src/components/Questions/QuestionDropdown.vue
@@ -5,6 +5,7 @@
 
 <template>
 	<Question
+		ref="rootElement"
 		v-bind="questionProps"
 		:titlePlaceholder="answerType.titlePlaceholder"
 		:warningInvalid="answerType.warningInvalid"
@@ -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 : []
 		})
@@ -246,6 +248,7 @@ export default defineComponent({
 
 		return {
 			...question,
+			rootElement,
 			...questionMultiple,
 			input,
 			choices,
diff --git a/src/components/Questions/QuestionFile.vue b/src/components/Questions/QuestionFile.vue
index 8d2245da0..2f39ef537 100644
--- a/src/components/Questions/QuestionFile.vue
+++ b/src/components/Questions/QuestionFile.vue
@@ -5,6 +5,7 @@
 
 <template>
 	<Question
+		ref="rootElement"
 		v-bind="questionProps"
 		:titlePlaceholder="answerType.titlePlaceholder"
 		:warningInvalid="answerType.warningInvalid"
@@ -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[]
 		})
@@ -512,6 +514,7 @@ export default defineComponent({
 
 		return {
 			...question,
+			rootElement,
 			values,
 			IconChevronLeft,
 			IconDelete,
diff --git a/src/components/Questions/QuestionGrid.vue b/src/components/Questions/QuestionGrid.vue
index c85810ec4..5d5db5db6 100644
--- a/src/components/Questions/QuestionGrid.vue
+++ b/src/components/Questions/QuestionGrid.vue
@@ -5,6 +5,7 @@
 
 <template>
 	<Question
+		ref="rootElement"
 		v-bind="questionProps"
 		:titlePlaceholder="answerType.titlePlaceholder"
 		:warningInvalid="answerType.warningInvalid"
@@ -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
@@ -388,6 +390,7 @@ export default defineComponent({
 
 		return {
 			...question,
+			rootElement,
 			...questionMultiple,
 			columns,
 			input,
diff --git a/src/components/Questions/QuestionLinearScale.vue b/src/components/Questions/QuestionLinearScale.vue
index 44c04c68d..059df0f8c 100644
--- a/src/components/Questions/QuestionLinearScale.vue
+++ b/src/components/Questions/QuestionLinearScale.vue
@@ -5,6 +5,7 @@
 
 <template>
 	<Question
+		ref="rootElement"
 		v-bind="questionProps"
 		:titlePlaceholder="answerType.titlePlaceholder"
 		:warningInvalid="answerType.warningInvalid"
@@ -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[]
 		})
@@ -328,6 +330,7 @@ export default defineComponent({
 
 		return {
 			...question,
+			rootElement,
 			IconPencil,
 			t,
 			lowest,
diff --git a/src/components/Questions/QuestionLong.vue b/src/components/Questions/QuestionLong.vue
index 507e4b51b..a2c391a59 100644
--- a/src/components/Questions/QuestionLong.vue
+++ b/src/components/Questions/QuestionLong.vue
@@ -5,6 +5,7 @@
 
 <template>
 	<Question
+		ref="rootElement"
 		v-bind="questionProps"
 		:titlePlaceholder="answerType.titlePlaceholder"
 		:warningInvalid="answerType.warningInvalid"
@@ -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
@@ -127,6 +129,7 @@ export default defineComponent({
 
 		return {
 			...question,
+			rootElement,
 			textarea,
 			submissionInputPlaceholder,
 			textareaValue,
diff --git a/src/components/Questions/QuestionRanking.vue b/src/components/Questions/QuestionRanking.vue
index 60ab84f6d..148a2c63b 100644
--- a/src/components/Questions/QuestionRanking.vue
+++ b/src/components/Questions/QuestionRanking.vue
@@ -5,6 +5,7 @@
 
 <template>
 	<Question
+		ref="rootElement"
 		v-bind="questionProps"
 		:titlePlaceholder="answerType.titlePlaceholder"
 		:warningInvalid="answerType.warningInvalid"
@@ -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 : []
 		})
@@ -488,6 +490,7 @@ export default defineComponent({
 
 		return {
 			...question,
+			rootElement,
 			...questionMultiple,
 			buttonOptionDown,
 			buttonOptionUp,
diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue
index a1c5a5462..5cc03468f 100644
--- a/src/components/Questions/QuestionShort.vue
+++ b/src/components/Questions/QuestionShort.vue
@@ -5,6 +5,7 @@
 
 <template>
 	<Question
+		ref="rootElement"
 		v-bind="questionProps"
 		:titlePlaceholder="answerType.titlePlaceholder"
 		:warningInvalid="answerType.warningInvalid"
@@ -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: {
@@ -299,6 +301,7 @@ export default defineComponent({
 
 		return {
 			...question,
+			rootElement,
 			IconRegex,
 			t,
 			validationTypes,

From 0dd09892077e3c8440008459ded143a03cf4149e Mon Sep 17 00:00:00 2001
From: Andy Scherzinger <info@andy-scherzinger.de>
Date: Tue, 10 Nov 2026 08:58:09 +0100
Subject: [PATCH 2/3] fix(a11y): keep the field of the answer "Other" out of
 list items

In the editor, the field of the answer "Other" was a list item after the
list of the options, outside of any list. Assistive technologies only
expect list items within a list, so it is a plain element now.

Assisted-by: Claude Code:claude-opus-5-5
Signed-off-by: Andy Scherzinger <info@andy-scherzinger.de>
---
 src/components/Questions/QuestionMultiple.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index de0ab2f5b..e5c8a968a 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -156,7 +156,7 @@
 						@tabbedOut="checkValidOption" />
 				</TransitionGroup>
 			</Draggable>
-			<li
+			<div
 				v-if="allowOtherAnswer"
 				key="option-add-other"
 				class="question__item">
@@ -173,7 +173,7 @@
 					minlength="1"
 					type="text"
 					:readonly="!readOnly" />
-			</li>
+			</div>
 		</template>
 
 		<!-- Add multiple options modal -->

From ce3708669bf07698f8f2b9e9ae779f76070763d4 Mon Sep 17 00:00:00 2001
From: Andy Scherzinger <info@andy-scherzinger.de>
Date: Tue, 10 Nov 2026 21:43:02 +0100
Subject: [PATCH 3/3] fix(a11y): keep the focus on a move button at the top and
 the end

Moving a question up keeps the focus on its "Move question up" button.
Once the question is the first one, that button is disabled, so the
focus fell back to the page and the next Tab started at the top. The
same happened with "Move question down" for the last question.

Move the focus to the other move button of the question in that case.

Assisted-by: Claude Code:claude-opus-5-5
Signed-off-by: Andy Scherzinger <info@andy-scherzinger.de>
---
 src/components/Questions/Question.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
index 353fad731..7a1e1309e 100644
--- a/src/components/Questions/Question.vue
+++ b/src/components/Questions/Question.vue
@@ -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()
 			})
 		}