Tech(NcSelect): add input-label or aria-label-combobox when needed

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
nextcloud · Jan 29, 2024 · 94ea200 · 94ea200
1 parent fc0c2bc
commit 94ea200
Show file tree

Hide file tree

Showing 11 changed files with 24 additions and 64 deletions.
diff --git a/src/components/AdminSettings/AllowedGroups.vue b/src/components/AdminSettings/AllowedGroups.vue
@@ -33,13 +33,10 @@
 			{{ t('spreed', 'Users that cannot use Talk anymore will still be listed as participants in their previous conversations and also their chat messages will be kept.') }}
 		</p>
 
-		<label for="allow_groups_use_talk"
-			class="form__label">
-			{{ t('spreed', 'Limit using Talk') }}
-		</label>
 		<div class="form">
 			<NcSelect v-model="allowedGroups"
 				input-id="allow_groups_use_talk"
+				:input-label="t('spreed', 'Limit using Talk')"
 				name="allow_groups_use_talk"
 				class="form__select"
 				:options="groups"
@@ -62,14 +59,10 @@
 				{{ saveLabelAllowedGroups }}
 			</NcButton>
 		</div>
-
-		<label for="allow_groups_start_conversation"
-			class="form__label">
-			{{ t('spreed', 'Limit creating a public and group conversation') }}
-		</label>
 		<div class="form">
 			<NcSelect v-model="canStartConversations"
 				input-id="allow_groups_start_conversation"
+				:input-label="t('spreed', 'Limit creating a public and group conversation')"
 				name="allow_groups_start_conversation"
 				class="form__select"
 				:options="groups"
@@ -93,13 +86,10 @@
 			</NcButton>
 		</div>
 
-		<label for="start_calls"
-			class="form__label">
-			{{ t('spreed', 'Limit starting a call') }}
-		</label>
 		<div class="form">
 			<NcSelect v-model="startCalls"
 				input-id="start_calls"
+				:input-label="t('spreed', 'Limit starting a call')"
 				name="allow_groups_start_calls"
 				class="form__select"
 				:options="startCallOptions"
@@ -270,17 +260,12 @@ export default {
 <style lang="scss" scoped>
 .form {
 	display: flex;
-	align-items: center;
+	align-items: flex-end;
 	gap: 10px;
+	padding-top: 5px;
 
 	&__select {
-		width: 300px;
-	}
-
-	&__label {
-		display: block;
-		margin-top: 10px;
-		padding: 4px 0;
+		min-width: 300px;
 	}
 }
 </style>
diff --git a/src/components/AdminSettings/GeneralSettings.vue b/src/components/AdminSettings/GeneralSettings.vue
@@ -26,13 +26,10 @@
 
 		<h3>{{ t('spreed', 'Default notification settings') }}</h3>
 
-		<label for="default_group_notification_input"
-			class="default-group-notification__label">
-			{{ t('spreed', 'Default group notification') }}
-		</label>
 		<NcSelect v-model="defaultGroupNotification"
+			class="default-group-notification"
 			input-id="default_group_notification_input"
-			class="default-group-notification__select"
+			:input-label="t('spreed', 'Default group notification')"
 			name="default_group_notification"
 			:options="defaultGroupNotificationOptions"
 			:clearable="false"
@@ -158,13 +155,6 @@ h3 {
 }
 
 .default-group-notification {
-	&__select {
-		width: 300px;
-	}
-
-	&__label {
-		display: block;
-		padding: 4px 0;
-	}
+	min-width: 300px !important;
 }
 </style>
diff --git a/src/components/AdminSettings/HostedSignalingServer.vue b/src/components/AdminSettings/HostedSignalingServer.vue
@@ -57,11 +57,9 @@
 				:label="t('spreed', 'Email of the user')"
 				label-visible />
 
-			<label for="hosted_hpb_language_input" class="form__label">
-				{{ t('spreed', 'Language') }}
-			</label>
 			<NcSelect v-model="hostedHPBLanguage"
 				input-id="hosted_hpb_language_input"
+				:input-lable=" t('spreed', 'Language')"
 				class="form__select"
 				name="hosted_hpb_language"
 				:disabled="loading"
@@ -73,11 +71,9 @@
 				track-by="code"
 				no-wrap />
 
-			<label for="hosted_hpb_country_input" class="form__label">
-				{{ t('spreed', 'Country') }}
-			</label>
 			<NcSelect v-model="hostedHPBCountry"
 				input-id="hosted_hpb_country_input"
+				:input-lable=" t('spreed', 'Country')"
 				class="form__select"
 				name="hosted_hpb_country"
 				:disabled="loading"
@@ -281,12 +277,7 @@ export default {
 		}
 
 		&__select {
-			width: 300px;
-		}
-
-		&__label {
-			display: block;
-			padding: 4px 0;
+			min-width: 300px;
 		}
 	}
 }

diff --git a/src/components/AdminSettings/SIPBridge.vue b/src/components/AdminSettings/SIPBridge.vue
@@ -38,11 +38,9 @@
 				{{ t('spreed', 'Signaling server needs to be updated to supported SIP Dial-out feature.') }}
 			</NcNoteCard>
 
-			<label for="sip-group-enabled" class="form__label">
-				{{ t('spreed', 'Restrict SIP configuration') }}
-			</label>
 			<NcSelect v-model="sipGroups"
 				input-id="sip-group-enabled"
+				:input-label="t('spreed', 'Restrict SIP configuration')"
 				class="form form__select"
 				:options="groups"
 				:placeholder="t('spreed', 'Enable SIP configuration')"
@@ -255,11 +253,6 @@ export default {
 		&__select {
 			margin-bottom: 12px;
 		}
-
-		&__label {
-			display: block;
-			padding: 4px 0;
-		}
 	}
 }
 

diff --git a/src/components/AdminSettings/TurnServer.vue b/src/components/AdminSettings/TurnServer.vue
@@ -26,7 +26,7 @@
 			name="turn_schemes"
 			:value="schemesOptions.find(i => i.value === schemes)"
 			:disabled="loading"
-			:aria-label="t('spreed', 'TURN server schemes')"
+			:aria-label-combobox="t('spreed', 'TURN server schemes')"
 			:options="schemesOptions"
 			:clearable="false"
 			:searchable="false"
@@ -59,7 +59,7 @@
 			name="turn_protocols"
 			:value="protocolOptions.find(i => i.value === protocols)"
 			:disabled="loading"
-			:aria-label="t('spreed', 'TURN server protocols')"
+			:aria-label-combobox="t('spreed', 'TURN server protocols')"
 			:options="protocolOptions"
 			:clearable="false"
 			:searchable="false"

diff --git a/src/components/ConversationSettings/ExpirationSettings.vue b/src/components/ConversationSettings/ExpirationSettings.vue
@@ -29,10 +29,8 @@
 		</div>
 
 		<template v-if="canModerate">
-			<label for="moderation_settings_message_expiration" class="app-settings-section__label">
-				{{ t('spreed', 'Set message expiration') }}
-			</label>
 			<NcSelect id="moderation_settings_message_expiration"
+				:input-label="t('spreed', 'Set message expiration')"
 				:value="selectedOption"
 				:options="expirationOptions"
 				label="label"
@@ -151,7 +149,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-settings-section__label {
-  display: block;
-}
+
 </style>
diff --git a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
@@ -38,6 +38,7 @@
 					<Plus class="icon" :size="20" />
 					<NcSelect v-model="selectedType"
 						label="displayName"
+						:aria-label-combobox="t('spreed', 'Messaging systems')"
 						:placeholder="newPartPlaceholder"
 						:options="formatedTypes"
 						@input="clickAddPart">

diff --git a/src/components/DialpadPanel.vue b/src/components/DialpadPanel.vue
@@ -46,6 +46,7 @@
 				:options="options"
 				:append-to-body="false"
 				:clearable="false"
+				:aria-label-combobox="t('spreed', 'Select a region')"
 				:placeholder="t('spreed', 'Select a region')"
 				label="dial_and_name"
 				@option:selected="dialCode">

diff --git a/src/components/MediaDevicesSelector.vue b/src/components/MediaDevicesSelector.vue
@@ -33,6 +33,7 @@
 			:input-id="deviceSelectorId"
 			:options="deviceOptions"
 			label="label"
+			:aria-label-combobox="t('spreed', 'Select a device')"
 			:clearable="false"
 			:placeholder="deviceSelectorPlaceholder"
 			:disabled="!enabled || !deviceOptionsAvailable" />

diff --git a/...omponents/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue b/...omponents/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue
@@ -28,7 +28,7 @@
 				<NcSelect v-model="selectedFrom"
 					class="translate-dialog__select"
 					input-id="from"
-					:aria-label="t('spreed', 'Source language to translate from')"
+					:aria-label-combobox="t('spreed', 'Source language to translate from')"
 					:placeholder="t('spreed', 'Translate from')"
 					:options="optionsFrom"
 					no-wrap />
@@ -38,7 +38,7 @@
 				<NcSelect v-model="selectedTo"
 					class="translate-dialog__select"
 					input-id="to"
-					:aria-label="t('spreed', 'Target language to translate into')"
+					:aria-label-combobox="t('spreed', 'Target language to translate into')"
 					:placeholder="t('spreed', 'Translate to')"
 					:options="optionsTo"
 					no-wrap />

diff --git a/src/views/FlowPostToConversation.vue b/src/views/FlowPostToConversation.vue
@@ -2,11 +2,13 @@
 	<div>
 		<NcSelect :value="currentRoom"
 			:options="roomOptions"
+			:aria-label-combobox="t('spreed', 'Select a room')"
 			label="displayName"
 			@input="(newValue) => newValue !== null && $emit('input', JSON.stringify({'m': currentMode.id, 't': newValue.token }))" />
 
 		<NcSelect :value="currentMode"
 			:options="modeOptions"
+			:aria-label-combobox="t('spreed', 'Select a mode')"
 			label="text"
 			@input="(newValue) => newValue !== null && $emit('input', JSON.stringify({'m': newValue.id, 't': currentRoom.token }))" />
 	</div>