Merge pull request #26521 from nextcloud/design/login-accessibility

nextcloud · Apr 13, 2021 · 23b8e4a · 23b8e4a
2 parents 421914b + bdd5667
commit 23b8e4a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 9 deletions.
diff --git 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;
@@ -334,7 +340,9 @@ button.primary:not(:disabled):hover,
 button.primary:not(:disabled):focus,
 a.primary:not(:disabled):hover,
 a.primary:not(:disabled):focus {
-	color: rgba(255, 255, 255, .8);
+	color: rgba(255, 255, 255, 1);
+	background-image: linear-gradient(40deg, #0082c9 0%, #30b6ff 100%);
+	background-position: initial;
 }
 
 /* Checkboxes - white only for login */

diff --git a/core/js/dist/login.js b/core/js/dist/login.js
diff --git a/core/js/dist/login.js.map b/core/js/dist/login.js.map
diff --git 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>
 

diff --git a/core/src/views/Login.vue b/core/src/views/Login.vue
@@ -46,7 +46,9 @@
 					{{ t('core', 'Forgot password?') }}
 				</a>
 				<br>
-				<a v-if="hasPasswordless" @click.prevent="passwordlessLogin = true">
+				<a v-if="hasPasswordless"
+					href="#"
+					@click.prevent="passwordlessLogin = true">
 					{{ t('core', 'Log in with a device') }}
 				</a>
 			</div>
@@ -61,7 +63,7 @@
 					:is-https="isHttps"
 					:has-public-key-credential="hasPublicKeyCredential"
 					@submit="loading = true" />
-				<a @click.prevent="passwordlessLogin = false">
+				<a @click.prevent="passwordlessLogin = false" href="#">
 					{{ t('core', 'Back') }}
 				</a>
 			</div>