enh(a11y): Always visible user management labels

Signed-off-by: Christopher Ng <chrng8@gmail.com>

diff --git a/apps/settings/src/components/Users/UserRow.vue b/apps/settings/src/components/Users/UserRow.vue
index 40e130732d85175a9c8907ba6eef1dedd6f70160..9ba28c856997492f1b17bf11454a7927d1272fcd 100644 (file)
--- a/apps/settings/src/components/Users/UserRow.vue
+++ b/apps/settings/src/components/Users/UserRow.vue
@@ -39,24 +39,19 @@
                <td class="row__cell row__cell--displayname"
                        :data-test="user.id">
                        <template v-if="idState.editing && user.backendCapabilities.setDisplayName">
-                               <label class="hidden-visually"
-                                       :for="'displayName' + uniqueId">
-                                       {{ t('settings', 'Edit display name') }}
-                               </label>
-                               <NcTextField :id="'displayName' + uniqueId"
-                                       ref="displayNameField"
+                               <NcTextField ref="displayNameField"
                                        data-test="displayNameField"
-                                       :show-trailing-button="true"
                                        class="user-row-text-field"
                                        :class="{ 'icon-loading-small': idState.loading.displayName }"
+                                       :show-trailing-button="true"
                                        :disabled="idState.loading.displayName || isLoadingField"
+                                       :label="t('settings', 'Change display name')"
                                        trailing-button-icon="arrowRight"
                                        :value.sync="idState.editedDisplayName"
                                        autocapitalize="off"
                                        autocomplete="off"
                                        autocorrect="off"
                                        spellcheck="false"
-                                       type="text"
                                        @trailing-button-click="updateDisplayName" />
                        </template>
                        <template v-else>
@@ -71,18 +66,13 @@
                <td class="row__cell"
                        :class="{ 'row__cell--obfuscated': hasObfuscated }">
                        <template v-if="idState.editing && settings.canChangePassword && user.backendCapabilities.setPassword">
-                               <label class="hidden-visually"
-                                       :for="'password' + uniqueId">
-                                       {{ t('settings', 'Add new password') }}
-                               </label>
-                               <NcTextField :id="'password' + uniqueId"
-                                       :show-trailing-button="true"
-                                       class="user-row-text-field"
+                               <NcTextField class="user-row-text-field"
                                        :class="{'icon-loading-small': idState.loading.password}"
+                                       :show-trailing-button="true"
                                        :disabled="idState.loading.password || isLoadingField"
                                        :minlength="minPasswordLength"
                                        maxlength="469"
-                                       :placeholder="t('settings', 'Add new password')"
+                                       :label="t('settings', 'Add new password')"
                                        trailing-button-icon="arrowRight"
                                        :value.sync="idState.editedPassword"
                                        autocapitalize="off"
@@ -100,16 +90,11 @@
 
                <td class="row__cell">
                        <template v-if="idState.editing">
-                               <label class="hidden-visually"
-                                       :for="'mailAddress' + uniqueId">
-                                       {{ t('settings', 'Add new email address') }}
-                               </label>
-                               <NcTextField :id="'mailAddress' + uniqueId"
-                                       :show-trailing-button="true"
-                                       class="user-row-text-field"
+                               <NcTextField class="user-row-text-field"
                                        :class="{'icon-loading-small': idState.loading.mailAddress}"
+                                       :show-trailing-button="true"
                                        :disabled="idState.loading.mailAddress || isLoadingField"
-                                       :placeholder="t('settings', 'Add new email address')"
+                                       :label="t('settings', 'Add new email address')"
                                        trailing-button-icon="arrowRight"
                                        :value.sync="idState.editedMail"
                                        autocapitalize="off"
@@ -927,6 +912,12 @@ export default {
                                height: 48px !important;
                        }
 
+                       .input-field__input {
+                               &:placeholder-shown:not(:focus) + .input-field__label {
+                                       inset-block-start: 16px !important;
+                               }
+                       }
+
                        .button-vue--icon-only {
                                height: 44px !important;
                        }