fix(a11y): give all form fields a proper accessible name

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

@@ -8,7 +8,7 @@ import { test as formTest } from '../support/fixtures/form.ts'
 import { test as appNavigationTest } from '../support/fixtures/navigation.ts'
 import { test as randomUserTest } from '../support/fixtures/random-user.ts'
 import { test as topBarTest } from '../support/fixtures/topBar.ts'
-import { QuestionType } from '../support/sections/QuestionType.ts'
+import { GridSubtype, QuestionType } from '../support/sections/QuestionType.ts'
 import { FormsView } from '../support/sections/TopBarSection.ts'
 
 const test = mergeTests(randomUserTest, appNavigationTest, formTest, topBarTest)
@@ -32,6 +32,9 @@ test.describe('Accessibility: aria attributes on question inputs', () => {
 		const questions = await form.getQuestions()
 		await questions[0].fillTitle('My question')
 		await questions[0].fillDescription('Some context')
+		await expect(questions[0].descriptionInput).toHaveAccessibleName(
+			'Description of question number 1',
+		)
 
 		await topBar.toggleView(FormsView.View)
 
@@ -148,6 +151,9 @@ test.describe('Accessibility: aria attributes on question inputs', () => {
 			page.getByRole('heading', { name: 'My dropdown question' }),
 		).toHaveId('q1_title')
 		await expect(page.locator('#q1_desc')).toContainText('Choose an option')
+		await expect(question.getByRole('combobox')).toHaveAccessibleName(
+			'My dropdown question',
+		)
 	})
 
 	test('Date question with description has aria-labelledby and aria-describedby', async ({
@@ -176,6 +182,9 @@ test.describe('Accessibility: aria attributes on question inputs', () => {
 			page.getByRole('heading', { name: 'My date question' }),
 		).toHaveId('q1_title')
 		await expect(page.locator('#q1_desc')).toContainText('Pick a date')
+		await expect(question.getByRole('textbox')).toHaveAccessibleName(
+			'My date question',
+		)
 	})
 
 	test('Linear scale question with description has aria-labelledby and aria-describedby', async ({
@@ -261,4 +270,27 @@ test.describe('Accessibility: aria attributes on question inputs', () => {
 		).toHaveId('q1_title')
 		await expect(page.locator('#q1_desc')).toContainText('Pick a color')
 	})
+
+	test('Grid cells are named by row and column', async ({
+		appNavigation,
+		form,
+		topBar,
+		page,
+	}) => {
+		await appNavigation.clickNewForm()
+		await form.fillTitle('Test form')
+
+		await form.addQuestion(QuestionType.Grid, GridSubtype.RadioButtons)
+		const questions = await form.getQuestions()
+		await questions[0].fillTitle('Satisfaction')
+		await questions[0].addColumn('Good')
+		await questions[0].addRow('Service')
+
+		await topBar.toggleView(FormsView.View)
+
+		const question = page.getByRole('listitem', { name: /Question number 1/ })
+		await expect(
+			question.getByRole('radio', { name: 'Service, Good' }),
+		).toBeAttached()
+	})
 })

playwright/support/sections/FormSection.ts

@@ -25,6 +25,7 @@ export class FormSection {
 		})
 		this.descriptionField = this.mainContent.getByRole('textbox', {
 			name: 'Description',
+			exact: true,
 		})
 	}
 

src/FormsSettings.vue

@@ -20,6 +20,7 @@
 				multiple
 				:options="availableGroups"
 				:placeholder="t('forms', 'Select groups')"
+				:aria-label-combobox="t('forms', 'Select groups')"
 				class="forms-settings__creation__multiselect"
 				label="displayName"
 				@update:modelValue="onCreationAllowedGroupsChange" />

src/components/OptionInputDialog.vue

@@ -15,7 +15,6 @@
 			<NcTextArea
 				v-model="enteredOptions"
 				:label="t('forms', 'Add multiple options (one per line)')"
-				:placeholder="t('forms', 'Add multiple options (one per line)')"
 				resize="vertical"
 				rows="10" />
 		</div>

src/components/Questions/Question.vue

@@ -130,6 +130,11 @@
 					ref="descriptionField"
 					dir="auto"
 					:value="description"
+					:aria-label="
+						t('forms', 'Description of question number {index}', {
+							index,
+						})
+					"
 					:placeholder="
 						t(
 							'forms',

src/components/Questions/QuestionDate.vue

@@ -92,6 +92,7 @@
 				:disabled="!readOnly"
 				:format="stringify"
 				:placeholder="datetimePickerPlaceholder"
+				:aria-label="text"
 				:showSecond="false"
 				:type="dateTimePickerType"
 				:disabledDate="disabledDates"

src/components/Questions/QuestionDropdown.vue

@@ -40,7 +40,7 @@
 				:options="choices"
 				:searchable="false"
 				label="text"
-				:aria-label-combobox="selectOptionPlaceholder"
+				:aria-label-combobox="text"
 				:aria-errormessage="hasError ? errorId : undefined"
 				:aria-invalid="hasError ? 'true' : undefined"
 				@invalid.prevent="validate"

src/components/Questions/QuestionFile.vue

@@ -39,6 +39,7 @@
 					type="multiselect"
 					:modelValue="maxFileSizeUnit"
 					:options="availableUnits"
+					:aria-label-combobox="t('forms', 'File size unit')"
 					required
 					:clearable="false"
 					:searchable="false"
@@ -68,6 +69,7 @@
 				<NcActionInput
 					key="allowed-file-extensions-multiselect"
 					:label="t('forms', 'Custom file extensions')"
+					:aria-label-combobox="t('forms', 'Custom file extensions')"
 					type="multiselect"
 					multiple
 					taggable

src/components/Questions/QuestionGrid.vue

@@ -46,6 +46,7 @@
 										:modelValue="values[row.id]"
 										:value="column.id.toString()"
 										:name="`${row.id}-answer`"
+										:aria-label="`${row.text}, ${column.text}`"
 										type="radio"
 										@update:modelValue="
 											onChangeCheckboxRadio(row.id, $event)
@@ -61,6 +62,7 @@
 										:modelValue="values[row.id] || []"
 										:value="column.id.toString()"
 										:name="`${row.id}-answer`"
+										:aria-label="`${row.text}, ${column.text}`"
 										type="checkbox"
 										@update:modelValue="
 											onChangeCheckboxRadio(row.id, $event)
@@ -70,6 +72,8 @@
 								<template v-if="questionType === 'number'">
 									<NcInputField
 										type="number"
+										labelOutside
+										:aria-label="`${row.text}, ${column.text}`"
 										:modelValue="plainValues[row.id][column.id]"
 										@update:modelValue="
 											onChangeTextNumber(

src/components/Questions/QuestionLinearScale.vue

@@ -16,6 +16,7 @@
 				type="multiselect"
 				:clearable="false"
 				:label="t('forms', 'Lowest value')"
+				:aria-label-combobox="t('forms', 'Lowest value')"
 				labelOutside
 				:options="[0, 1]"
 				required
@@ -29,6 +30,7 @@
 				type="multiselect"
 				:clearable="false"
 				:label="t('forms', 'Highest value')"
+				:aria-label-combobox="t('forms', 'Highest value')"
 				labelOutside
 				:options="[2, 3, 4, 5, 6, 7, 8, 9, 10]"
 				required
@@ -99,8 +101,8 @@
 				ref="highest"
 				:modelValue="optionsLabelHighest"
 				class="question-linear-scale__label-input"
-				:label="t('forms', 'Label (optional)')"
-				:aria-label="t('forms', 'Label for highest value')"
+				:label="t('forms', 'Label for highest value')"
+				:placeholder="t('forms', 'Label (optional)')"
 				resize="none"
 				@input="resizeLabel('highest')"
 				@blur="onBlur('highest')"

src/components/Questions/QuestionMultiple.vue

@@ -166,6 +166,7 @@
 					class="question__item__pseudoInput" />
 				<input
 					:placeholder="t('forms', 'Other')"
+					:aria-label="t('forms', 'Other')"
 					class="question__input"
 					:disabled="!readOnly"
 					:maxlength="maxStringLengths.optionText"

src/components/SidebarTabs/SettingsSidebarTab.vue

@@ -67,6 +67,7 @@
 		<div v-show="formExpires && !formArchived" class="settings-div--indent">
 			<NcDateTimePicker
 				id="expiresDatetimePicker"
+				:aria-label="t('forms', 'Expiration date')"
 				:clearable="false"
 				:disabled="locked"
 				:disabledDate="notBeforeToday"

src/components/SidebarTabs/SharingSearchDiv.vue

@@ -10,7 +10,7 @@
 			:loading="showLoadingCircle"
 			:disabled="locked || !isCurrentUserOwner"
 			:options="options"
-			:placeholder="t('forms', 'Search for user, group or team …')"
+			:inputLabel="t('forms', 'Search for user, group or team …')"
 			:aria-label-listbox="t('forms', 'Search for user, group or team …')"
 			@search="asyncSearch"
 			@update:modelValue="addShare">

src/components/SidebarTabs/TransferOwnership.vue

@@ -43,7 +43,7 @@
 					class="modal-content__select"
 					:loading="loading"
 					:options="options"
-					:placeholder="t('forms', 'Search for a user')"
+					:inputLabel="t('forms', 'Search for a user')"
 					@search="
 						(query) => asyncSearch(query, [SHARE_TYPES.SHARE_TYPE_USER])
 					">