enh(a11y): New user modal

Signed-off-by: Christopher Ng <[email protected]>

apps/settings/src/views/Users.vue

@@ -83,53 +83,41 @@
 			</template>
 			<template #footer>
 				<NcAppNavigationSettings exclude-click-outside-selectors=".vs__dropdown-menu">
-					<div>
-						<label for="default-quota-multiselect">{{ t('settings', 'Default quota:') }}</label>
-						<NcSelect v-model="defaultQuota"
-							input-id="default-quota-multiselect"
-							:taggable="true"
-							:options="quotaOptions"
-							:create-option="validateQuota"
-							:placeholder="t('settings', 'Select default quota')"
-							:close-on-select="true"
-							@option:selected="setDefaultQuota" />
-					</div>
-					<div>
-						<input id="showLanguages"
-							v-model="showLanguages"
-							type="checkbox"
-							class="checkbox">
-						<label for="showLanguages">{{ t('settings', 'Show Languages') }}</label>
-					</div>
-					<div>
-						<input id="showLastLogin"
-							v-model="showLastLogin"
-							type="checkbox"
-							class="checkbox">
-						<label for="showLastLogin">{{ t('settings', 'Show last login') }}</label>
-					</div>
-					<div>
-						<input id="showUserBackend"
-							v-model="showUserBackend"
-							type="checkbox"
-							class="checkbox">
-						<label for="showUserBackend">{{ t('settings', 'Show user backend') }}</label>
-					</div>
-					<div>
-						<input id="showStoragePath"
-							v-model="showStoragePath"
-							type="checkbox"
-							class="checkbox">
-						<label for="showStoragePath">{{ t('settings', 'Show storage path') }}</label>
-					</div>
-					<div>
-						<input id="sendWelcomeMail"
-							v-model="sendWelcomeMail"
-							:disabled="loadingSendMail"
-							type="checkbox"
-							class="checkbox">
-						<label for="sendWelcomeMail">{{ t('settings', 'Send email to new user') }}</label>
-					</div>
+					<label for="default-quota-select">{{ t('settings', 'Default quota:') }}</label>
+					<NcSelect v-model="defaultQuota"
+						input-id="default-quota-select"
+						:taggable="true"
+						:options="quotaOptions"
+						:create-option="validateQuota"
+						:placeholder="t('settings', 'Select default quota')"
+						:clearable="false"
+						@option:selected="setDefaultQuota" />
+					<NcCheckboxRadioSwitch type="switch"
+						data-test="showLanguages"
+						:checked.sync="showLanguages">
+						{{ t('settings', 'Show languages') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch type="switch"
+						data-test="showLastLogin"
+						:checked.sync="showLastLogin">
+						{{ t('settings', 'Show last login') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch type="switch"
+						data-test="showUserBackend"
+						:checked.sync="showUserBackend">
+						{{ t('settings', 'Show user backend') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch type="switch"
+						data-test="showStoragePath"
+						:checked.sync="showStoragePath">
+						{{ t('settings', 'Show storage path') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch type="switch"
+						data-test="sendWelcomeMail"
+						:checked.sync="sendWelcomeMail"
+						:disabled="loadingSendMail">
+						{{ t('settings', 'Send email to new user') }}
+					</NcCheckboxRadioSwitch>
 				</NcAppNavigationSettings>
 			</template>
 		</NcAppNavigation>
@@ -143,6 +131,9 @@
 </template>
 
 <script>
+import Vue from 'vue'
+import VueLocalStorage from 'vue-localstorage'
+
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
 import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
@@ -151,22 +142,24 @@ import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationI
 import NcAppNavigationNew from '@nextcloud/vue/dist/Components/NcAppNavigationNew.js'
 import NcAppNavigationNewItem from '@nextcloud/vue/dist/Components/NcAppNavigationNewItem.js'
 import NcAppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings.js'
-import axios from '@nextcloud/axios'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
-import { generateUrl } from '@nextcloud/router'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
-import Vue from 'vue'
-import VueLocalStorage from 'vue-localstorage'
+
+import Plus from 'vue-material-design-icons/Plus.vue'
+
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
 
 import GroupListItem from '../components/GroupListItem.vue'
 import UserList from '../components/UserList.vue'
-import Plus from 'vue-material-design-icons/Plus.vue'
 
 Vue.use(VueLocalStorage)
 
 export default {
 	name: 'Users',
 	components: {
+		GroupListItem,
 		NcAppContent,
 		NcAppNavigation,
 		NcAppNavigationCaption,
@@ -175,8 +168,8 @@ export default {
 		NcAppNavigationNew,
 		NcAppNavigationNewItem,
 		NcAppNavigationSettings,
+		NcCheckboxRadioSwitch,
 		NcContent,
-		GroupListItem,
 		NcSelect,
 		Plus,
 		UserList,
@@ -341,11 +334,6 @@ export default {
 	methods: {
 		showNewUserMenu() {
 			this.showConfig.showNewUserForm = true
-			if (this.showConfig.showNewUserForm) {
-				Vue.nextTick(() => {
-					window.newusername.focus()
-				})
-			}
 		},
 		getLocalstorage(key) {
 			// force initialization

dist/core-login.js.LICENSE.txt

@@ -1,5 +1,3 @@
-/*! For license information please see NcPasswordField.js.LICENSE.txt */
-
 /**
  * @copyright 2017 Christoph Wurst <[email protected]>
  *

dist/settings-vue-settings-personal-password.js.LICENSE.txt

@@ -1,5 +1,3 @@
-/*! For license information please see NcPasswordField.js.LICENSE.txt */
-
 /**
  * @copyright 2022 Carl Schwan <[email protected]>
  *

tests/acceptance/features/bootstrap/AppSettingsContext.php

@@ -66,7 +66,7 @@ public static function checkboxInTheSettings($id) {
 	 * @return Locator
 	 */
 	public static function checkboxLabelInTheSettings($id) {
-		return Locator::forThe()->xpath("//label[@for = '$id']")->
+		return Locator::forThe()->css("[data-test=\"$id\"]")->
 			descendantOf(self::appSettingsContent())->
 			describedAs("The label for the $id checkbox in the settings");
 	}

tests/acceptance/features/bootstrap/UsersSettingsContext.php

@@ -34,31 +34,31 @@ class UsersSettingsContext implements Context, ActorAwareInterface {
 	 * @return Locator
 	 */
 	public static function newUserForm() {
-		return Locator::forThe()->id("new-user")->
+		return Locator::forThe()->css('[data-test="form"]')->
 			describedAs("New user form in Users Settings");
 	}
 
 	/**
 	 * @return Locator
 	 */
 	public static function userNameFieldForNewUser() {
-		return Locator::forThe()->field("newusername")->
+		return Locator::forThe()->css('[data-test="username"]')->
 			describedAs("User name field for new user in Users Settings");
 	}
 
 	/**
 	 * @return Locator
 	 */
 	public static function displayNameFieldForNewUser() {
-		return Locator::forThe()->field("newdisplayname")->
+		return Locator::forThe()->css('[data-test="displayName"]')->
 			describedAs("Display name field for new user in Users Settings");
 	}
 
 	/**
 	 * @return Locator
 	 */
 	public static function passwordFieldForNewUser() {
-		return Locator::forThe()->field("newuserpassword")->
+		return Locator::forThe()->css('[data-test="password"]')->
 			describedAs("Password field for new user in Users Settings");
 	}
 
@@ -74,7 +74,7 @@ public static function newUserButton() {
 	 * @return Locator
 	 */
 	public static function createNewUserButton() {
-		return Locator::forThe()->xpath("//form[@id = 'new-user']//button[@type = 'submit']")->
+		return Locator::forThe()->css('[data-test="submit"]')->
 			describedAs("Create user button in Users Settings");
 	}