fix(a11y): labels

src/components/AppNavigation/EditCalendarModal.vue

@@ -49,7 +49,7 @@
 						{{ $t('calendar', 'Default reminder for part-day events') }}
 					</label>
 					<NcSelect
-						id="default-alarm-partday-select"
+						inputId="default-alarm-partday-select"
 						v-model="selectedDefaultAlarmPartDay"
 						:options="defaultAlarmPartDayOptions"
 						:clearable="false"
@@ -62,7 +62,7 @@
 						{{ $t('calendar', 'Default reminder for full-day events') }}
 					</label>
 					<NcSelect
-						id="default-alarm-fullday-select"
+						inputId="default-alarm-fullday-select"
 						v-model="selectedDefaultAlarmFullDay"
 						:options="defaultAlarmFullDayOptions"
 						:clearable="false"

src/components/AppNavigation/EditCalendarModal/SharingSearch.vue

@@ -22,7 +22,7 @@
 			openDirection="above"
 			trackBy="user"
 			label="displayName"
-			:labelOutside="true"
+			:ariaLabelCombobox="$t('calendar', 'Share with users or groups')"
 			@search="findSharee"
 			@option:selected="shareCalendar">
 			<template #no-options>

src/components/AppNavigation/Settings.vue

@@ -96,7 +96,7 @@
 						:disabled="savingSlotDuration"
 						:clearable="false"
 						:inputLabel="$t('calendar', 'Density in Day and Week View')"
-						inputId="value"
+						inputId="settings-slot-duration"
 						label="label" />
 				</NcAppSettingsSection>
 				<NcAppSettingsSection
@@ -108,7 +108,7 @@
 						:disabled="savingDefaultReminderPartDay"
 						:clearable="false"
 						:inputLabel="$t('calendar', 'Default reminder for part-day events')"
-						inputId="value"
+						inputId="settings-reminder-part-day"
 						label="label"
 						@option:selected="changeDefaultReminderPartDay" />
 					<NcSelect
@@ -117,7 +117,7 @@
 						:disabled="savingDefaultReminderFullDay"
 						:clearable="false"
 						:inputLabel="$t('calendar', 'Default reminder for full-day events')"
-						inputId="value"
+						inputId="settings-reminder-full-day"
 						label="label"
 						@option:selected="changeDefaultReminderFullDay" />
 					<NcFormBox>

src/components/AppNavigation/Settings/SettingsImportSection.vue

@@ -27,6 +27,7 @@
 			:accept="supportedFileTypes"
 			:disabled="disableImport"
 			multiple
+			:aria-label="$t('calendar', 'Import calendar file')"
 			@change="processFiles">
 
 		<ImportScreen

src/components/Editor/Alarm/AlarmListItem.vue

@@ -62,6 +62,7 @@
 				:date="alarm.absoluteDate"
 				:timezoneId="alarm.absoluteTimezoneId"
 				:isAllDay="false"
+				:ariaLabel="$t('calendar', 'Alarm date and time')"
 				@change="changeAbsoluteDate"
 				@changeTimezone="changeAbsoluteTimezoneId" />
 		</div>

src/components/Editor/Alarm/AlarmTimeUnitSelect.vue

@@ -10,8 +10,8 @@
 		:options="options"
 		:disabled="disabled"
 		:clearable="false"
-		:labelOutside="true"
-		inputId="unit"
+		:ariaLabelCombobox="$t('calendar', 'Time unit')"
+		inputId="alarm-time-unit"
 		label="label" />
 </template>
 

src/components/Editor/Attachments/AttachmentsList.vue

@@ -9,6 +9,7 @@
 			class="attachments-input"
 			type="file"
 			multiple
+			:aria-label="t('calendar', 'Upload files as attachments')"
 			@change="onLocalAttachmentSelected">
 		<div class="attachments-summary">
 			<div class="attachments-summary-inner">

src/components/Editor/DurationSelector.vue

@@ -377,6 +377,7 @@ function minutesToISO8601(totalMinutes: number): string {
 			:modelValue="selectedOption"
 			:options="allOptions"
 			:labelOutside="labelOutside"
+			:ariaLabelCombobox="label"
 			:placeholder="label"
 			:clearable="false"
 			@update:modelValue="onOptionChange">
@@ -391,7 +392,7 @@ function minutesToISO8601(totalMinutes: number): string {
 				v-if="showDays"
 				:modelValue="customDays"
 				:options="daysOptions"
-				:labelOutside="true"
+				:ariaLabelCombobox="t('calendar', 'Days')"
 				:placeholder="t('calendar', 'Days')"
 				:clearable="false"
 				class="duration-selector__custom-select"
@@ -405,7 +406,7 @@ function minutesToISO8601(totalMinutes: number): string {
 				v-if="showHours"
 				:modelValue="customHours"
 				:options="hoursOptions"
-				:labelOutside="true"
+				:ariaLabelCombobox="t('calendar', 'Hours')"
 				:placeholder="t('calendar', 'Hours')"
 				:clearable="false"
 				class="duration-selector__custom-select"
@@ -419,7 +420,7 @@ function minutesToISO8601(totalMinutes: number): string {
 				v-if="showMinutes"
 				:modelValue="customMinutes"
 				:options="minutesOptions"
-				:labelOutside="true"
+				:ariaLabelCombobox="t('calendar', 'Minutes')"
 				:placeholder="t('calendar', 'Minutes')"
 				:clearable="false"
 				class="duration-selector__custom-select"

src/components/Editor/FreeBusy/FreeBusy.vue

@@ -20,9 +20,9 @@
 							:options="freeSlots"
 							:placeholder="placeholder"
 							:clearable="false"
-							inputId="slot"
+							:ariaLabelCombobox="$t('calendar', 'Available time slots')"
+							inputId="free-busy-slot-mobile"
 							label="displayStart"
-							:labelOutside="true"
 							:modelValue="selectedSlot"
 							@update:modelValue="setSlotSuggestion">
 							<template #selected-option="{}">
@@ -191,9 +191,9 @@
 								:options="freeSlots"
 								:placeholder="placeholder"
 								:clearable="false"
-								inputId="slot"
+								:ariaLabelCombobox="$t('calendar', 'Available time slots')"
+								inputId="free-busy-slot-desktop"
 								label="displayStart"
-								:labelOutside="true"
 								:modelValue="selectedSlot"
 								:loading="loadingIndicator"
 								:disabled="loadingIndicator"

src/components/Editor/Invitees/InviteesListSearch.vue

@@ -13,8 +13,8 @@
 		:placeholder="placeholder"
 		:class="{ showContent: inputGiven, 'icon-loading': isLoading }"
 		:clearable="false"
-		:labelOutside="true"
-		inputId="uid"
+		:ariaLabelCombobox="$t('calendar', 'Search for attendees')"
+		inputId="invitees-search-uid"
 		label="dropdownName"
 		@search="findAttendees"
 		@option:selected="addAttendee">

src/components/Editor/Properties/PropertySelect.vue

@@ -19,6 +19,10 @@
 		<div
 			class="property-select__input"
 			:class="{ 'property-select__input--readonly': isReadOnly }">
+			<label
+				v-if="!isReadOnly"
+				:for="readableName + '-select-input'"
+				class="property-select__label">{{ readableName }}</label>
 			<NcSelect
 				v-if="!isReadOnly"
 				v-model="selectedValue"
@@ -28,7 +32,7 @@
 				:placeholder="placeholder"
 				:labelOutside="true"
 				:clearable="false"
-				inputId="value"
+				:inputId="readableName + '-select-input'"
 				label="label" />
 			<!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
 			<div v-else>{{ selectedValue.label }}</div>
@@ -86,6 +90,18 @@ export default {
 		// 34px left and right need to be subtracted. See https://github.com/nextcloud/calendar/pull/3361
 		width: calc(100% - 34px - 34px);
 	}
+
+	&__label {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
 }
 
 </style>

src/components/Editor/Properties/PropertySelectMultiple.vue

@@ -16,6 +16,10 @@
 		<div
 			class="property-select-multiple__input"
 			:class="{ 'property-select-multiple__input--readonly': isReadOnly }">
+			<label
+				v-if="!isReadOnly"
+				:for="readableName + '-select-multiple-input'"
+				class="property-select-multiple__label">{{ readableName }}</label>
 			<NcSelect
 				v-if="!isReadOnly"
 				:modelValue="selectionData"
@@ -29,7 +33,7 @@
 				:noWrap="false"
 				:deselectFromDropdown="false"
 				:createOption="(label) => ({ value: label, label })"
-				inputId="label"
+				:inputId="readableName + '-select-multiple-input'"
 				label="label"
 				@option:selecting="tag"
 				@option:deselected="unselectValue">
@@ -181,3 +185,17 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.property-select-multiple__label {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+</style>

src/components/Editor/Properties/PropertyText.vue

@@ -22,6 +22,7 @@
 			<textarea
 				v-if="!isReadOnly && !showLinksClickable"
 				v-autosize="true"
+				:aria-label="readableName"
 				:placeholder="placeholder"
 				:rows="rows"
 				:name="readableName"

src/components/Editor/Properties/PropertyTitleTimePicker.vue

@@ -27,12 +27,14 @@
 						<div class="property-title-time-picker__time-pickers-from-inner__selectors">
 							<DatePicker
 								:date="startDate"
+								:ariaLabel="$t('calendar', 'Start date')"
 								prefix="from"
 								@change="changeStartDate" />
 							<DatePicker
 								v-if="!isAllDay"
 								:date="startDate"
 								type="time"
+								:ariaLabel="$t('calendar', 'Start time')"
 								@change="changeStartTime" />
 						</div>
 						<div v-if="showTimezoneSelect && !isAllDay" class="property-title-time-picker__time-pickers-from-inner__timezone">
@@ -62,12 +64,14 @@
 						<div class="property-title-time-picker__time-pickers-from-inner__selectors">
 							<DatePicker
 								:date="endDate"
+								:ariaLabel="$t('calendar', 'End date')"
 								prefix="to"
 								@change="changeEndDate" />
 							<DatePicker
 								v-if="!isAllDay"
 								:date="endDate"
 								type="time"
+								:ariaLabel="$t('calendar', 'End time')"
 								@change="changeEndTime" />
 						</div>
 						<div v-if="showTimezoneSelect && !isAllDay" class="property-title-time-picker__time-pickers-to-inner__timezone">

src/components/Editor/Repeat/RepeatEndRepeat.vue

@@ -5,22 +5,23 @@
 
 <template>
 	<div class="repeat-option-set repeat-option-set--end">
-		<span class="repeat-option-end__label">{{ $t('calendar', 'End repeat') }}</span>
+		<label for="repeat-end-type-select" class="repeat-option-end__label">{{ $t('calendar', 'End repeat') }}</label>
 		<NcSelect
 			v-model="selectedOption"
 			class="repeat-option-end__end-type-select"
 			:options="options"
 			:searchable="false"
 			:inputOutside="true"
 			:clearable="false"
-			inputId="value"
+			inputId="repeat-end-type-select"
 			label="label" />
 		<DatePicker
 			v-if="isUntil"
 			class="repeat-option-end__until"
 			:min="minimumDate"
 			:date="until"
 			type="date"
+			:ariaLabel="$t('calendar', 'End repeat date')"
 			:appendToBody="true"
 			@change="changeUntil" />
 		<NcTextField

src/components/Editor/Repeat/RepeatFirstLastSelect.vue

@@ -11,7 +11,8 @@
 		:disabled="disabled"
 		:placeholder="$t('calendar', 'first')"
 		:clearable="false"
-		inputId="value"
+		:ariaLabelCombobox="$t('calendar', 'Week occurrence')"
+		inputId="repeat-first-last"
 		label="label" />
 </template>
 

src/components/Editor/Repeat/RepeatFreqSelect.vue

@@ -9,6 +9,7 @@
 		:allowEmpty="false"
 		:options="options"
 		:clearable="false"
+		:ariaLabelCombobox="$t('calendar', 'Repeat frequency')"
 		inputId="freq"
 		label="label" />
 </template>

src/components/Editor/Repeat/RepeatOnTheSelect.vue

@@ -11,7 +11,8 @@
 		:disabled="disabled"
 		:placeholder="$t('calendar', 'Monday')"
 		:clearable="false"
-		inputId="value"
+		:ariaLabelCombobox="$t('calendar', 'Day of week')"
+		inputId="repeat-on-the"
 		label="label" />
 </template>
 

src/components/Editor/Resources/ResourceListSearch.vue

@@ -23,9 +23,9 @@
 			:searchable="true"
 			:max-height="600"
 			:placeholder="placeholder"
-			:labelOutside="true"
+			:ariaLabelCombobox="$t('calendar', 'Search for resources')"
 			:class="{ showContent: inputGiven, 'icon-loading': isLoading }"
-			inputId="email"
+			inputId="resource-search-email"
 			label="displayName"
 			:clearable="false"
 			@search="findResources">

src/components/Editor/Resources/ResourceRoomType.vue

@@ -11,8 +11,8 @@
 				:options="options"
 				:placeholder="placeholder"
 				:clearable="false"
-				:labelOutside="true"
-				inputId="value"
+				:ariaLabelCombobox="$t('calendar', 'Room type')"
+				inputId="resource-room-type"
 				label="label">
 				<template #option="option">
 					<div>{{ option.label !== null ? option.label : "" }}</div>

src/components/Shared/DatePicker.vue

@@ -12,12 +12,11 @@
 	when providing a format as pattern string (and not a one-way function).
 	-->
 	<DateTimePicker
-		id="date-time-picker-input"
+		:ariaLabel="ariaLabel"
 		:min="minimumDate"
 		:max="maximumDate"
 		:modelValue="date"
 		:type="type"
-		:hideLabel="true"
 		class="date-time-picker"
 		:format="formatStr"
 		@blur="onBlur"
@@ -47,6 +46,11 @@ export default {
 			required: true,
 		},
 
+		ariaLabel: {
+			type: String,
+			default: null,
+		},
+
 		prefix: {
 			type: String,
 			default: null,