diff options
| author | tusooa <tusooa@kazv.moe> | 2023-01-21 01:28:43 -0500 |
|---|---|---|
| committer | tusooa <tusooa@kazv.moe> | 2023-01-21 01:28:43 -0500 |
| commit | 72cb9e8bdbd41b66f72f8dd0dcd52cc04c7a2245 (patch) | |
| tree | 89eefbc46533aac8c7af1c490a2228fccaa1b44a /src/components/settings_modal/tabs/profile_tab.vue | |
| parent | 6235af4592c52a657415ffae772bd83ec106bc13 (diff) | |
Make all emoji inputs screen-reader-friendly
Diffstat (limited to 'src/components/settings_modal/tabs/profile_tab.vue')
| -rw-r--r-- | src/components/settings_modal/tabs/profile_tab.vue | 46 |
1 files changed, 29 insertions, 17 deletions
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue index 642d54ca..54704dad 100644 --- a/src/components/settings_modal/tabs/profile_tab.vue +++ b/src/components/settings_modal/tabs/profile_tab.vue @@ -8,11 +8,14 @@ enable-emoji-picker :suggest="emojiSuggestor" > - <input - id="username" - v-model="newName" - class="name-changer" - > + <template #default="inputProps"> + <input + id="username" + v-model="newName" + class="name-changer" + v-bind="propsToNative(inputProps)" + > + </template> </EmojiInput> <p>{{ $t('settings.bio') }}</p> <EmojiInput @@ -20,10 +23,13 @@ enable-emoji-picker :suggest="emojiUserSuggestor" > - <textarea - v-model="newBio" - class="bio resize-height" - /> + <template #default="inputProps"> + <textarea + v-model="newBio" + class="bio resize-height" + v-bind="propsToNative(inputProps)" + /> + </template> </EmojiInput> <p v-if="role === 'admin' || role === 'moderator'"> <Checkbox v-model="showRole"> @@ -48,10 +54,13 @@ hide-emoji-button :suggest="userSuggestor" > - <input - v-model="newFields[i].name" - :placeholder="$t('settings.profile_fields.name')" - > + <template #default="inputProps"> + <input + v-model="newFields[i].name" + :placeholder="$t('settings.profile_fields.name')" + v-bind="propsToNative(inputProps)" + > + </template> </EmojiInput> <EmojiInput v-model="newFields[i].value" @@ -59,10 +68,13 @@ hide-emoji-button :suggest="userSuggestor" > - <input - v-model="newFields[i].value" - :placeholder="$t('settings.profile_fields.value')" - > + <template #default="inputProps"> + <input + v-model="newFields[i].value" + :placeholder="$t('settings.profile_fields.value')" + v-bind="propsToNative(inputProps)" + > + </template> </EmojiInput> <button class="delete-field button-unstyled -hover-highlight" |