fix(a11y): use role group for ranking lists container

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()
+	})
 })

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`"