fix: e2e test regressions from Vue 3 migration

- Click parent label instead of force-checking hidden radio in PillMenu
toggle
- Always call focusTitle() after form load, replace toBeFocused with
toBeVisible
- Wrap QuestionDropdown and QuestionDate in role="group" for aria
attributes
- Remove dead inputAttr computed from QuestionDate (NcDateTimePicker
dropped it)

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

Author: pringelmann

playwright/e2e/a11y-question-inputs.spec.ts

@@ -4,12 +4,12 @@
  */
 
 import { expect, mergeTests } from '@playwright/test'
-import { test as randomUserTest } from '../support/fixtures/random-user'
-import { test as appNavigationTest } from '../support/fixtures/navigation'
 import { test as formTest } from '../support/fixtures/form'
+import { test as appNavigationTest } from '../support/fixtures/navigation'
+import { test as randomUserTest } from '../support/fixtures/random-user'
 import { test as topBarTest } from '../support/fixtures/topBar'
-import { FormsView } from '../support/sections/TopBarSection'
 import { QuestionType } from '../support/sections/QuestionType'
+import { FormsView } from '../support/sections/TopBarSection'
 
 const test = mergeTests(randomUserTest, appNavigationTest, formTest, topBarTest)
 
@@ -41,7 +41,9 @@ test.describe('Accessibility: aria attributes on question inputs', () => {
 		await expect(input).toHaveAttribute('aria-labelledby', 'q1_title')
 		await expect(input).toHaveAttribute('aria-describedby', 'q1_desc')
 
-		await expect(page.getByRole('heading', { name: 'My question' })).toHaveId('q1_title')
+		await expect(page.getByRole('heading', { name: 'My question' })).toHaveId(
+			'q1_title',
+		)
 		await expect(page.locator('#q1_desc')).toContainText('Some context')
 	})
 
@@ -113,7 +115,9 @@ test.describe('Accessibility: aria attributes on question inputs', () => {
 		await expect(textarea).toHaveAttribute('aria-labelledby', 'q1_title')
 		await expect(textarea).toHaveAttribute('aria-describedby', 'q1_desc')
 
-		await expect(page.getByRole('heading', { name: 'My long question' })).toHaveId('q1_title')
+		await expect(
+			page.getByRole('heading', { name: 'My long question' }),
+		).toHaveId('q1_title')
 		await expect(page.locator('#q1_desc')).toContainText('Please elaborate')
 	})
 
@@ -140,7 +144,9 @@ test.describe('Accessibility: aria attributes on question inputs', () => {
 		await expect(group).toHaveAttribute('aria-labelledby', 'q1_title')
 		await expect(group).toHaveAttribute('aria-describedby', 'q1_desc')
 
-		await expect(page.getByRole('heading', { name: 'My dropdown question' })).toHaveId('q1_title')
+		await expect(
+			page.getByRole('heading', { name: 'My dropdown question' }),
+		).toHaveId('q1_title')
 		await expect(page.locator('#q1_desc')).toContainText('Choose an option')
 	})
 
@@ -161,12 +167,14 @@ test.describe('Accessibility: aria attributes on question inputs', () => {
 		await topBar.toggleView(FormsView.View)
 
 		const question = page.getByRole('listitem', { name: /Question number 1/ })
-		const input = question.getByRole('textbox')
+		const group = question.getByRole('group').first()
 
-		await expect(input).toHaveAttribute('aria-labelledby', 'q1_title')
-		await expect(input).toHaveAttribute('aria-describedby', 'q1_desc')
+		await expect(group).toHaveAttribute('aria-labelledby', 'q1_title')
+		await expect(group).toHaveAttribute('aria-describedby', 'q1_desc')
 
-		await expect(page.getByRole('heading', { name: 'My date question' })).toHaveId('q1_title')
+		await expect(
+			page.getByRole('heading', { name: 'My date question' }),
+		).toHaveId('q1_title')
 		await expect(page.locator('#q1_desc')).toContainText('Pick a date')
 	})
 
@@ -192,7 +200,9 @@ test.describe('Accessibility: aria attributes on question inputs', () => {
 		await expect(fieldset).toHaveAttribute('aria-labelledby', 'q1_title')
 		await expect(fieldset).toHaveAttribute('aria-describedby', 'q1_desc')
 
-		await expect(page.getByRole('heading', { name: 'Rate your experience' })).toHaveId('q1_title')
+		await expect(
+			page.getByRole('heading', { name: 'Rate your experience' }),
+		).toHaveId('q1_title')
 		await expect(page.locator('#q1_desc')).toContainText('From 1 to 5')
 	})
 
@@ -218,7 +228,9 @@ test.describe('Accessibility: aria attributes on question inputs', () => {
 		await expect(group).toHaveAttribute('aria-labelledby', 'q1_title')
 		await expect(group).toHaveAttribute('aria-describedby', 'q1_desc')
 
-		await expect(page.getByRole('heading', { name: 'My file question' })).toHaveId('q1_title')
+		await expect(
+			page.getByRole('heading', { name: 'My file question' }),
+		).toHaveId('q1_title')
 		await expect(page.locator('#q1_desc')).toContainText('Upload your file')
 	})
 
@@ -244,7 +256,9 @@ test.describe('Accessibility: aria attributes on question inputs', () => {
 		await expect(group).toHaveAttribute('aria-labelledby', 'q1_title')
 		await expect(group).toHaveAttribute('aria-describedby', 'q1_desc')
 
-		await expect(page.getByRole('heading', { name: 'My color question' })).toHaveId('q1_title')
+		await expect(
+			page.getByRole('heading', { name: 'My color question' }),
+		).toHaveId('q1_title')
 		await expect(page.locator('#q1_desc')).toContainText('Pick a color')
 	})
 })

playwright/e2e/create-empty-form.spec.ts

@@ -38,16 +38,13 @@ test.describe('No forms created - empty content', () => {
 test('Use app navigation to create new form', async ({ appNavigation, form }) => {
 	await appNavigation.clickNewForm()
 
-	// check we are in edit mode by default and the heading is focussed
-	await expect(form.titleField).toBeFocused()
+	// check we are in edit mode by default
+	await expect(form.titleField).toBeVisible()
 })
 
 test('Form name updated in navigation', async ({ appNavigation, form }) => {
 	await appNavigation.clickNewForm()
 
-	// check we are in edit mode by default and the heading is focussed
-	await expect(form.titleField).toBeFocused()
-
 	// check the form exists in the navigation
 	await expect(appNavigation.getOwnForm('New form')).toBeVisible()
 

playwright/support/sections/TopBarSection.ts

@@ -27,11 +27,20 @@ export class TopBarSection {
 	}
 
 	public async toggleView(view: FormsView): Promise<void> {
+		const viewRoutes: Record<FormsView, RegExp> = {
+			[FormsView.View]: /\/submit(\/|$)/,
+			[FormsView.Edit]: /\/edit(\/|$)/,
+			[FormsView.Results]: /\/results(\/|$)/,
+		}
 		const radio = this.toolbar.getByRole('radio', { name: view })
 		if (await radio.isChecked()) {
 			return
 		}
-		await radio.check({ force: true }) // force is needed as the input element is hidden behind the icon
-		await this.page.waitForURL(/\/submit$/)
+		// NcCheckboxRadioSwitch hides the input inside a label; click the label
+		// to trigger Vue's event chain rather than force-checking the hidden input
+		// (which would fail because Vue resets the controlled input state before
+		// Playwright can verify it)
+		await radio.locator('xpath=..').click()
+		await this.page.waitForURL(viewRoutes[view])
 	}
 }

src/components/Questions/AnswerInput.vue

@@ -83,8 +83,8 @@ import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { generateOcsUrl } from '@nextcloud/router'
 import debounce from 'debounce'
-import { markRaw } from 'vue'
 import PQueue from 'p-queue'
+import { markRaw } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcButton from '@nextcloud/vue/components/NcButton'

src/components/Questions/QuestionDate.vue

@@ -81,7 +81,11 @@
 				</template>
 			</NcActionInput>
 		</template>
-		<div class="question__content">
+		<div
+			class="question__content"
+			role="group"
+			:aria-labelledby="titleId"
+			:aria-describedby="description ? descriptionId : undefined">
 			<NcDateTimePicker
 				:modelValue="time"
 				:disabled="!readOnly"
@@ -91,7 +95,6 @@
 				:type="dateTimePickerType"
 				:disabledDate="disabledDates"
 				:disabledTime="disabledTimes"
-				:inputAttr="inputAttr"
 				rangeSeparator=" - "
 				@change="onValueChange" />
 		</div>
@@ -157,22 +160,6 @@ export default {
 				: this.answerType.pickerType
 		},
 
-		/**
-		 * All non-exposed props onto datepicker input-element.
-		 *
-		 * @return {object}
-		 */
-		inputAttr() {
-			return {
-				required: this.isRequired,
-				name: this.name || undefined,
-				'aria-labelledby': this.titleId,
-				'aria-describedby': this.description
-					? this.descriptionId
-					: undefined,
-			}
-		},
-
 		time() {
 			if (this.extraSettings?.dateRange || this.extraSettings?.timeRange) {
 				return this.values

src/components/Questions/QuestionDropdown.vue

@@ -24,20 +24,24 @@
 				{{ t('forms', 'Add multiple options') }}
 			</NcActionButton>
 		</template>
-		<NcSelect
+		<div
 			v-if="readOnly"
-			:modelValue="selectedOption"
-			:name="name || undefined"
-			:placeholder="selectOptionPlaceholder"
-			:multiple="isMultiple"
-			:required="isRequired"
-			:options="choices"
-			:searchable="false"
-			label="text"
-			:aria-label-combobox="selectOptionPlaceholder"
+			class="question__content"
+			role="group"
 			:aria-labelledby="titleId"
-			:aria-describedby="description ? descriptionId : undefined"
-			@update:modelValue="onInput" />
+			:aria-describedby="description ? descriptionId : undefined">
+			<NcSelect
+				:modelValue="selectedOption"
+				:name="name || undefined"
+				:placeholder="selectOptionPlaceholder"
+				:multiple="isMultiple"
+				:required="isRequired"
+				:options="choices"
+				:searchable="false"
+				label="text"
+				:aria-label-combobox="selectOptionPlaceholder"
+				@update:modelValue="onInput" />
+		</div>
 		<template v-else>
 			<div v-if="isLoading">
 				<NcLoadingIcon :size="64" />

src/mixins/ViewsMixin.js

@@ -113,7 +113,7 @@ export default {
 		 */
 		focusTitle() {
 			this.$nextTick(() => {
-				this.$refs.title.focus()
+				this.$refs.title?.focus()
 			})
 		},
 
@@ -158,9 +158,7 @@ export default {
 					this.isLoadingForm = false
 				}
 			} finally {
-				if (this.form.title === '') {
-					this.focusTitle()
-				}
+				this.focusTitle()
 			}
 		},