diff options
| author | Jan C. Borchardt <hey@jancborchardt.net> | 2021-04-12 15:58:26 +0300 |
|---|---|---|
| committer | Jan C. Borchardt <hey@jancborchardt.net> | 2021-04-12 15:59:31 +0300 |
| commit | dcf044a7a6cbf08fddd3744cb953c8c6cd34f0f5 (patch) | |
| tree | 2faa518508526a56ca51bed3b83d8155e685d88f | |
| parent | 4be2e1601e80a09aebac57eabb0aaf60e744362e (diff) | |
Fix password visibility toggle alt text and hover/focus feedback
Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
| -rw-r--r-- | core/css/guest.css | 10 | ||||
| -rw-r--r-- | core/src/components/login/LoginForm.vue | 2 |
2 files changed, 9 insertions, 3 deletions
diff --git a/core/css/guest.css b/core/css/guest.css index 340d3954c95..b072786f663 100644 --- a/core/css/guest.css +++ b/core/css/guest.css @@ -285,8 +285,14 @@ input[type='password'].password-with-toggle, input[type='text'].password-with-to } .toggle-password { position: absolute; - top: 17px; - right: 20px; + top: 1px; + right: 5px; + padding: 14px; + height: 16px; +} +.toggle-password:hover, +.toggle-password:focus { + opacity: .6; } input.login { width: 260px; diff --git a/core/src/components/login/LoginForm.vue b/core/src/components/login/LoginForm.vue index 9f0d4f9ba1c..c75b6f2c7ea 100644 --- a/core/src/components/login/LoginForm.vue +++ b/core/src/components/login/LoginForm.vue @@ -82,7 +82,7 @@ <label for="password" class="infield">{{ t('Password') }}</label> <a href="#" class="toggle-password" @click.stop.prevent="togglePassword"> - <img :src="toggleIcon"> + <img :src="toggleIcon" :alt="t('core', 'Toggle password visibility')"> </a> </p> |