From 0ba4ff060ae5a942828f2d8a6063fc2186935324 Mon Sep 17 00:00:00 2001
From: "Jan C. Borchardt" <hey@jancborchardt.net>
Date: Mon, 12 Apr 2021 14:58:26 +0200
Subject: [PATCH] Fix password visibility toggle alt text and hover/focus
 feedback

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
---
 core/css/guest.css                      | 10 ++++++++--
 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 340d3954c9..b072786f66 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 9f0d4f9ba1..c75b6f2c7e 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>