From 755f18eecae34670d560c786903438a06f9d7fc8 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Sat, 4 Nov 2023 21:54:42 +0100
Subject: fix(dav): Make timezone picker label a real label element

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 apps/dav/src/views/Availability.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

(limited to 'apps/dav/src')

diff --git a/apps/dav/src/views/Availability.vue b/apps/dav/src/views/Availability.vue
index 634e33189fb..3b42df1e9df 100644
--- a/apps/dav/src/views/Availability.vue
+++ b/apps/dav/src/views/Availability.vue
@@ -2,11 +2,11 @@
 	<NcSettingsSection :name="$t('dav', 'Availability')"
 		:description="$t('dav', 'If you configure your working hours, other users will see when you are out of office when they book a meeting.')">
 		<div class="time-zone">
-			<strong class="time-zone__heading">
+			<label :for="`vs${timeZonePickerId}__combobox`" class="time-zone__heading">
 				{{ $t('dav', 'Time zone:') }}
-			</strong>
+			</label>
 			<span class="time-zone-text">
-				<NcTimezonePicker v-model="timezone" />
+				<NcTimezonePicker v-model="timezone" :uid="timeZonePickerId" />
 			</span>
 		</div>
 
@@ -78,6 +78,11 @@ export default {
 			automated: loadState('dav', 'user_status_automation') === 'yes',
 		}
 	},
+	computed: {
+		timeZonePickerId() {
+			return `tz-${(Math.random() + 1).toString(36).substring(7)}`
+		},
+	},
 	async mounted() {
 		try {
 			const slotData = await findScheduleInboxAvailability()
@@ -156,12 +161,13 @@ export default {
 }
 .time-zone {
 	padding: 32px 12px 12px 0;
-    display: flex;
-    flex-wrap: wrap;
+	display: flex;
+	flex-wrap: wrap;
 
 	&__heading {
 		margin-right: calc(var(--default-grid-baseline) * 2);
 		line-height: var(--default-clickable-area);
+		font-weight: bold;
 	}
 }
 .grid-table {
-- 
cgit v1.2.3