Fix add user dialog

- Add label instead of placeholder for accessibility - Port to new vue components Signed-off-by: Carl Schwan <[email protected]>
nextcloud · Sep 8, 2022 · 3d0f7eb · 3d0f7eb
1 parent 58706dd
commit 3d0f7eb
Showing 1 changed file with 46 additions and 26 deletions.
diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue
@@ -28,11 +28,12 @@
 				class="modal__content"
 				@submit.prevent="createUser">
 				<h2>{{ t('settings','New user') }}</h2>
-				<input id="newusername"
+				<NcTextField id="newusername"
 					ref="newusername"
-					v-model="newUser.id"
+					:value.sync="newUser.id"
 					:disabled="settings.newUserGenerateUserID"
-					:placeholder="settings.newUserGenerateUserID
+					:labelVisible="true"
+					:label="settings.newUserGenerateUserID
 						? t('settings', 'Will be autogenerated')
 						: t('settings', 'Username')"
 					autocapitalize="none"
@@ -41,39 +42,43 @@
 					class="modal__item"
 					name="username"
 					pattern="[a-zA-Z0-9 _\.@\-']+"
-					required
-					type="text">
-				<input id="newdisplayname"
-					v-model="newUser.displayName"
-					:placeholder="t('settings', 'Display name')"
+					required>
+				</NcTextField>
+				<NcTextField id="newdisplayname"
+					:value.sync="newUser.displayName"
+					:label="t('settings', 'Display name')"
+					:labelVisible="true"
 					autocapitalize="none"
 					autocomplete="off"
 					autocorrect="off"
 					class="modal__item"
-					name="displayname"
-					type="text">
-				<input id="newuserpassword"
+					name="displayname">
+				</NcTextField>
+				<NcPasswordField id="newuserpassword"
 					ref="newuserpassword"
-					v-model="newUser.password"
+					:value.sync="newUser.password"
 					:minlength="minPasswordLength"
-					:placeholder="t('settings', 'Password')"
+					:label="t('settings', 'Password')"
+					:labelVisible="true"
 					:required="newUser.mailAddress===''"
 					autocapitalize="none"
 					autocomplete="new-password"
 					autocorrect="off"
 					class="modal__item"
-					name="password"
-					type="password">
-				<input id="newemail"
-					v-model="newUser.mailAddress"
-					:placeholder="t('settings', 'Email')"
+					name="password">
+				</NcPasswordField>
+				<NcTextField id="newemail"
+					:value.sync="newUser.mailAddress"
+					:label="t('settings', 'Email')"
+					:labelVisible="true"
 					:required="newUser.password==='' || settings.newUserRequireEmail"
 					autocapitalize="none"
 					autocomplete="off"
 					autocorrect="off"
 					class="modal__item"
 					name="email"
 					type="email">
+				</NcTextField>
 				<div class="groups modal__item">
 					<!-- hidden input trick for vanilla html5 form validation -->
 					<input v-if="!settings.isAdmin"
@@ -83,12 +88,15 @@
 						:value="newUser.groups"
 						tabindex="-1"
 						type="text">
+					<label for="groupField">
+						{{ t('settings', 'Add user to group') }}
+					</label>
 					<NcMultiselect v-model="newUser.groups"
+						id="groupField"
 						:close-on-select="false"
 						:disabled="loading.groups||loading.all"
 						:multiple="true"
 						:options="canAddGroups"
-						:placeholder="t('settings', 'Add user to group')"
 						:tag-width="60"
 						:taggable="true"
 						class="multiselect-vue"
@@ -104,11 +112,14 @@
 				</div>
 				<div v-if="subAdminsGroups.length>0 && settings.isAdmin"
 					class="subadmins modal__item">
+					<label for="adminForField">
+						{{ t('settings', 'Set user as admin for') }}
+					</label>
 					<NcMultiselect v-model="newUser.subAdminsGroups"
+						id="adminForField"
 						:close-on-select="false"
 						:multiple="true"
 						:options="subAdminsGroups"
-						:placeholder="t('settings', 'Set user as admin for')"
 						:tag-width="60"
 						class="multiselect-vue"
 						label="name"
@@ -117,21 +128,27 @@
 					</NcMultiselect>
 				</div>
 				<div class="quota modal__item">
+					<label for="quotaField">
+						{{ t('settings', 'Select user quota') }}
+					</label>
 					<NcMultiselect v-model="newUser.quota"
+						:id="quotaField"
 						:allow-empty="false"
 						:options="quotaOptions"
-						:placeholder="t('settings', 'Select user quota')"
 						:taggable="true"
 						class="multiselect-vue"
 						label="label"
 						track-by="id"
 						@tag="validateQuota" />
 				</div>
 				<div v-if="showConfig.showLanguages" class="languages modal__item">
+					<label for="languageField">
+						{{ t('settings', 'Default language') }}
+					</label>
 					<NcMultiselect v-model="newUser.language"
+						id="languageField"
 						:allow-empty="false"
 						:options="languages"
-						:placeholder="t('settings', 'Default language')"
 						class="multiselect-vue"
 						group-label="label"
 						group-values="languages"
@@ -234,9 +251,11 @@
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import InfiniteLoading from 'vue-infinite-loading'
 import Vue from 'vue'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import userRow from './UserList/UserRow'
 
@@ -270,6 +289,8 @@ export default {
 		NcMultiselect,
 		InfiniteLoading,
 		NcButton,
+		NcPasswordField,
+		NcTextField,
 	},
 	props: {
 		users: {
@@ -598,7 +619,6 @@ export default {
 		padding: 20px;
 		flex-direction: column;
 		align-items: center;
-		text-align: center;
 	}
 	.modal__item {
 		margin-bottom: 16px;