Merge pull request #36650 from nextcloud/enh/a11y-admin-delegation-select

Author: Pytal

apps/settings/lib/Settings/Admin/Delegation.php

@@ -82,9 +82,11 @@ private function initSettingState(): void {
 				$settings = array_merge(
 					$settings,
 					array_map(function (IDelegatedSettings $setting) use ($section) {
+						$sectionName = $section->getName() . ($setting->getName() !== null ? ' - ' . $setting->getName() : '');
 						return [
 							'class' => get_class($setting),
-							'sectionName' => $section->getName() . ($setting->getName() !== null ? ' - ' . $setting->getName() : ''),
+							'sectionName' => $sectionName,
+							'id' => mb_strtolower(str_replace(' ', '-', $sectionName)),
 							'priority' => $section->getPriority(),
 						];
 					}, $sectionSettings)

apps/settings/src/components/AdminDelegating.vue

@@ -4,7 +4,7 @@
 		:doc-url="authorizedSettingsDocLink">
 		<div class="setting-list">
 			<div v-for="setting in availableSettings" :key="setting.class">
-				<h3>{{ setting.sectionName }}</h3>
+				<label :for="setting.id">{{ setting.sectionName }}</label>
 				<GroupSelect :available-groups="availableGroups" :authorized-groups="authorizedGroups" :setting="setting" />
 			</div>
 		</div>
@@ -32,3 +32,12 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+label {
+	display: block;
+	font-size: 16px;
+	margin: 12px 0;
+	color: var(--color-text-light);
+}
+</style>

apps/settings/src/components/AdminDelegation/GroupSelect.vue

@@ -1,17 +1,16 @@
 <template>
-	<NcMultiselect v-model="selected"
-		class="group-multiselect"
+	<NcSelect :input-id="setting.id"
+		v-model="selected"
+		class="group-select"
 		:placeholder="t('settings', 'None')"
-		track-by="gid"
 		label="displayName"
 		:options="availableGroups"
-		open-direction="bottom"
 		:multiple="true"
-		:allow-empty="true" />
+		:close-on-select="false" />
 </template>
 
 <script>
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import { generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
@@ -20,7 +19,7 @@ import logger from '../../logger'
 export default {
 	name: 'GroupSelect',
 	components: {
-		NcMultiselect,
+		NcSelect,
 	},
 	props: {
 		availableGroups: {
@@ -67,8 +66,7 @@ export default {
 </script>
 
 <style lang="scss">
-.group-multiselect {
+.group-select {
 	width: 100%;
-	margin-right: 0;
 }
 </style>