diff options
| author | Grigorii K. Shartsev <me@shgk.me> | 2023-10-19 14:18:50 +0200 |
|---|---|---|
| committer | Ferdinand Thiessen <opensource@fthiessen.de> | 2023-10-20 20:31:56 +0200 |
| commit | 91543677613af0aac4d988ea0a99899b1d5039a6 (patch) | |
| tree | 592751cde6d39cb99502422fff5fab56c1acf366 /apps | |
| parent | 4a85113cac921957c9184461b663a725c4cce800 (diff) | |
| download | nextcloud-server-91543677613af0aac4d988ea0a99899b1d5039a6.tar.gz nextcloud-server-91543677613af0aac4d988ea0a99899b1d5039a6.zip | |
fix(settings): fix ids and aria-labels in personal emails
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/settings/src/components/PersonalInfo/EmailSection/Email.vue | 25 | ||||
| -rw-r--r-- | apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue | 3 |
2 files changed, 15 insertions, 13 deletions
diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue index 9edf5a8b0df..1fff440c50e 100644 --- a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue +++ b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue @@ -23,13 +23,14 @@ <template> <div> <div class="email"> - <input :id="inputId" + <input :id="inputIdWithDefault" ref="email" type="email" autocomplete="email" + :aria-label="inputPlaceholder" :placeholder="inputPlaceholder" :value="email" - :aria-describedby="helperText ? `${inputId}-helper-text` : undefined" + :aria-describedby="helperText ? `${inputIdWithDefault}-helper-text` : undefined" autocapitalize="none" spellcheck="false" @input="onEmailChange"> @@ -73,7 +74,7 @@ </div> <p v-if="helperText" - :id="`${inputId}-helper-text`" + :id="`${inputIdWithDefault}-helper-text`" class="email__helper-text-message email__helper-text-message--error"> <AlertCircle class="email__helper-text-message__icon" :size="18" /> {{ helperText }} @@ -144,6 +145,11 @@ export default { type: Number, default: VERIFICATION_ENUM.NOT_VERIFIED, }, + inputId: { + type: String, + required: false, + default: '', + }, }, data() { @@ -194,18 +200,13 @@ export default { return !this.initialEmail }, - inputId() { - if (this.primary) { - return 'email' - } - return `email-${this.index}` + inputIdWithDefault() { + return this.inputId || `account-property-email--${this.index}` }, inputPlaceholder() { - if (this.primary) { - return t('settings', 'Your email address') - } - return t('settings', 'Additional email address {index}', { index: this.index + 1 }) + // Primary email has implicit linked <label> + return !this.primary ? t('settings', 'Additional email address {index}', { index: this.index + 1 }) : undefined }, isNotificationEmail() { diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue index 980af3e62b0..c977ef54e96 100644 --- a/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue +++ b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue @@ -32,7 +32,8 @@ @add-additional="onAddAdditionalEmail" /> <template v-if="displayNameChangeSupported"> - <Email :primary="true" + <Email :input-id="inputId" + :primary="true" :scope.sync="primaryEmail.scope" :email.sync="primaryEmail.value" :active-notification-email.sync="notificationEmail" |