From 68c478fd3c4d749d1edbe4ff472ef2d7666676ac Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 2 Jan 2020 15:48:58 +0100
Subject: [PATCH] Make the login button accessible
Makes it focusable and react to keyboard events
---
packages/auth/src/vpu-auth.js | 17 +++++++++++++----
1 file changed, 13 insertions(+), 4 deletions(-)
diff --git a/packages/auth/src/vpu-auth.js b/packages/auth/src/vpu-auth.js
index 00bca56f..26f1e956 100644
--- a/packages/auth/src/vpu-auth.js
+++ b/packages/auth/src/vpu-auth.js
@@ -239,6 +239,7 @@ class VPUAuth extends VPULitElement {
onLoginClicked(e) {
this._kcwrapper.login();
+ e.preventDefault();
}
onLogoutClicked(e) {
@@ -269,6 +270,12 @@ class VPUAuth extends VPULitElement {
display: inline-block;
}
+ a {
+ color: currentColor;
+ cursor: pointer;
+ text-decoration: none;
+ }
+
.dropdown.is-active .dropdown-menu, .dropdown.is-hoverable:hover .dropdown-menu {
display: block;
}
@@ -446,10 +453,12 @@ class VPUAuth extends VPULitElement {
`;
return html`
- <div class="loginbox" @click="${this.onLoginClicked}">
- <div class="icon">${unsafeHTML(loginSVG)}</div>
- <div class="label">${i18n.t('login')}</div>
- </div>
+ <a href="#" @click="${this.onLoginClicked}">
+ <div class="loginbox">
+ <div class="icon">${unsafeHTML(loginSVG)}</div>
+ <div class="label">${i18n.t('login')}</div>
+ </div>
+ </a>
`;
}
--
GitLab