From 42f21c21a067de0d758afe32c7a40e78737ccbd2 Mon Sep 17 00:00:00 2001
From: yashgill-10 <yashgill-10@users.noreply.github.com>
Date: Sun, 8 Nov 2026 09:33:29 +0530
Subject: [PATCH] fix(a11y): expose ranking option lists correctly to assistive
 tech

The submit-mode ranking question wrapped two inner lists in a container
with role="list" even though it is not a list itself. Change the outer
container to role="group", keep the named inner lists, and add an
explicit role="list" so WebKit exposes them as lists despite missing
list markers. The ranked list only gets the role while populated to
avoid an empty list role. Add a Playwright regression test asserting
the group, the list names and the explicit roles.

Signed-off-by: yashgill-10 <yashgill-10@users.noreply.github.com>
---
 playwright/e2e/a11y-question-inputs.spec.ts  | 35 ++++++++++++++++++++
 src/components/Questions/QuestionRanking.vue | 15 +++++----
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/playwright/e2e/a11y-question-inputs.spec.ts b/playwright/e2e/a11y-question-inputs.spec.ts
index 5264d23b4..f95b25ee3 100644
--- a/playwright/e2e/a11y-question-inputs.spec.ts
+++ b/playwright/e2e/a11y-question-inputs.spec.ts
@@ -305,4 +305,39 @@ test.describe('Accessibility: aria attributes on question inputs', () => {
 			question.getByRole('radio', { name: 'Service, Good' }),
 		).toBeAttached()
 	})
+
+	test('Ranking question groups two named lists instead of a list of non-items', async ({
+		appNavigation,
+		form,
+		topBar,
+		page,
+	}) => {
+		await appNavigation.clickNewForm()
+		await form.fillTitle('Test form')
+
+		await form.addQuestion(QuestionType.Ranking)
+		const questions = await form.getQuestions()
+		await questions[0].fillTitle('Rank snacks')
+		await questions[0].addAnswer('Pretzels')
+		await questions[0].addAnswer('Popcorn')
+
+		await topBar.toggleView(FormsView.View)
+
+		const question = page.getByRole('listitem', { name: /Question number 1/ })
+		const group = question.getByRole('group', { name: /Rank snacks/ })
+		const unrankedList = group.getByRole('list', {
+			name: 'Unranked options',
+		})
+		const rankedList = group.getByRole('list', { name: 'Your ranking' })
+
+		await expect(unrankedList).toBeVisible()
+		await expect(unrankedList).toHaveAttribute('role', 'list')
+		// The empty ranked list has no role to avoid an empty list role
+		await expect(rankedList).toBeAttached()
+		await expect(rankedList).not.toHaveAttribute('role', 'list')
+
+		await group.getByRole('button', { name: 'Pretzels' }).click()
+		await expect(rankedList).toHaveAttribute('role', 'list')
+		await expect(rankedList).toBeVisible()
+	})
 })
diff --git a/src/components/Questions/QuestionRanking.vue b/src/components/Questions/QuestionRanking.vue
index d2bc758bf..60ab84f6d 100644
--- a/src/components/Questions/QuestionRanking.vue
+++ b/src/components/Questions/QuestionRanking.vue
@@ -30,7 +30,7 @@
 		<div
 			v-if="readOnly"
 			class="question__content"
-			role="list"
+			role="group"
 			:aria-labelledby="titleId"
 			:aria-describedby="description ? descriptionId : undefined"
 			:aria-errormessage="hasError ? errorId : undefined"
@@ -50,7 +50,9 @@
 					<TransitionGroup
 						tag="ul"
 						:name="isRanking ? undefined : 'options-list-transition'"
-						class="sort-target">
+						class="sort-target"
+						role="list"
+						:aria-label="t('forms', 'Unranked options')">
 						<li v-for="option in unrankedOptions" :key="option.id">
 							<button
 								type="button"
@@ -68,7 +70,7 @@
 
 			<!-- Ranked list -->
 			<div class="ranking-ranked">
-				<p class="ranking-section__label">
+				<p :id="`ranking-ranked-label-${id}`" class="ranking-section__label">
 					{{ t('forms', 'Your ranking') }}
 				</p>
 				<Draggable
@@ -84,12 +86,13 @@
 					<TransitionGroup
 						tag="ul"
 						:name="isRanking ? undefined : 'options-list-transition'"
-						class="sort-target">
+						class="sort-target"
+						:role="rankedOptions.length ? 'list' : undefined"
+						:aria-labelledby="`ranking-ranked-label-${id}`">
 						<li
 							v-for="(option, index) in rankedOptions"
 							:key="option.id"
-							class="ranking-item"
-							role="listitem">
+							class="ranking-item">
 							<NcActions
 								:id="`ranking-${option.id}-drag`"
 								:container="`#ranking-${option.id}-drag`"