Fix logout button not working with tab

Cicada-Software · Nov 24, 2023 · 2a52dcb · 2a52dcb
1 parent 6632091
commit 2a52dcb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 13 deletions.
diff --git a/frontend/static/common.css b/frontend/static/common.css
@@ -85,17 +85,6 @@ a[disabled] {
  border-radius: var(--border-radius);
 }
 
-#logout {
- cursor: pointer;
- padding: 0.4em !important;
- height: min-content;
- transition: background 150ms;
-}
-
-#logout:hover {
- background: var(--medium-gray);
-}
-
 .ci-status[data-status="success"] {
  color: var(--green);
  background: var(--dark-green) !important;

diff --git a/frontend/static/common.js b/frontend/static/common.js
@@ -57,7 +57,9 @@ function refreshTokenLoop() {
  setInterval(refreshToken, 60_000);
 }
 
-const logout = () => {
+const logout = (e) => {
+ if (e.type === "keydown" && e.key !== "Enter") return;
+
  if (confirm("Are you sure you want to log out?")) {
  removeKey("jwt");
  window.location.href = "/login";
@@ -179,7 +181,13 @@ class Navbar extends HTMLElement {
  <a href="/dashboard" id="back" part="back">&#8592; Back</a>
  <slot></slot>
  <span id="version" part="version">${version}</span>
- <img id="logout" src="/static/img/logout.svg" onclick="logout()" />
+ <img
+ id="logout"
+ src="/static/img/logout.svg"
+ onclick="logout(event)"
+ onkeydown="logout(event)"
+ tabindex=0
+ />
 </div>
 
 <style>