From 92ec156c2506d6689fe0c91cc2cbee3d97c00ccd Mon Sep 17 00:00:00 2001
From: JezerM <amyuki4@icloud.com>
Date: Mon, 26 Jul 2021 23:24:15 -0600
Subject: [PATCH] Improved keyboard navigation

---
 themes/gruvbox/js/accounts.js | 40 ++++++++++++++++++++++-------------
 themes/gruvbox/js/sessions.js | 38 +++++++++++++++++++++------------
 2 files changed, 49 insertions(+), 29 deletions(-)

diff --git a/themes/gruvbox/js/accounts.js b/themes/gruvbox/js/accounts.js
index bce9f0e..ef307ac 100644
--- a/themes/gruvbox/js/accounts.js
+++ b/themes/gruvbox/js/accounts.js
@@ -54,22 +54,31 @@ class Accounts {
     }
   }
 
+	_setKeydown() {
+		var dropdown = this._accountsList.querySelector(".dropdown")
+		dropdown.addEventListener("keydown", (ev) => {
+			if (ev.keyCode == 27) {
+				dropdown.classList.add("hide")
+				this._accountsButton.focus()
+			}
+		})
+	}
+
   _setButton() {
-    var dropdown = this._accountsList.querySelector(".dropdown")
-    this._accountsButton.addEventListener("click", (ev) => {
-      ev.stopPropagation()
-      if (dropdown.classList.contains("hide")) {
-        dropdown.classList.remove("hide")
-      } else {
-        dropdown.classList.add("hide")
-      }
-    })
-    var screen = document.querySelector("#screen")
-    screen.addEventListener("click", (ev) => {
-      if (ev.target != dropdown) {
-        dropdown.classList.add("hide")
-      }
-    })
+		var dropdown = this._accountsList.querySelector(".dropdown")
+		document.querySelector("#screen").addEventListener("click", (ev) => {
+			if (ev.target == this._accountsButton || ev.target.parentElement == this._accountsButton) {
+				dropdown.classList.toggle("hide")
+			} else
+			if (ev.target != this._accountsList && ev.target.closest(".dropdown") == null) {
+				dropdown.classList.add("hide")
+			}
+		})
+		document.querySelector("#screen").addEventListener("focusin", (ev) => {
+			if (!dropdown.contains(document.activeElement) && document.activeElement != this._accountsButton) {
+				dropdown.classList.add("hide")
+			}
+		})
   }
 
   _updateDefaults(userObject) {
@@ -86,6 +95,7 @@ class Accounts {
     this._updateOnStartup()
     this._setAccountList()
     this._setButton()
+		this._setKeydown()
   }
 
 }
diff --git a/themes/gruvbox/js/sessions.js b/themes/gruvbox/js/sessions.js
index 2555659..86adcf3 100644
--- a/themes/gruvbox/js/sessions.js
+++ b/themes/gruvbox/js/sessions.js
@@ -50,22 +50,31 @@ class Sessions {
     }
   }
 
+	_setKeydown() {
+		var dropdown = this._sessionList.querySelector(".dropdown")
+		dropdown.addEventListener("keydown", (ev) => {
+			if (ev.keyCode == 27) {
+				dropdown.classList.add("hide")
+				this._sessionsButton.focus()
+			}
+		})
+	}
+
   _setButton() {
     var dropdown = this._sessionList.querySelector(".dropdown")
-    this._sessionsButton.addEventListener("click", (ev) => {
-      ev.stopPropagation()
-      if (dropdown.classList.contains("hide")) {
-        dropdown.classList.remove("hide")
-      } else {
-        dropdown.classList.add("hide")
-      }
-    })
-    var screen = document.querySelector("#screen")
-    screen.addEventListener("click", (ev) => {
-      if (ev.target != dropdown) {
-        dropdown.classList.add("hide")
-      }
-    })
+		document.querySelector("#screen").addEventListener("click", (ev) => {
+			if (ev.target == this._sessionsButton || ev.target.parentElement == this._sessionsButton) {
+				dropdown.classList.toggle("hide")
+			} else
+			if (ev.target != dropdown && ev.target.closest(".dropdown") == null) {
+				dropdown.classList.add("hide")
+			}
+		})
+		document.querySelector("#screen").addEventListener("focusin", (ev) => {
+			if (!dropdown.contains(document.activeElement) && document.activeElement != this._sessionsButton) {
+				dropdown.classList.add("hide")
+			}
+		})
 
   }
 
@@ -80,5 +89,6 @@ class Sessions {
     this._updateOnStartup()
     this._setSessionList()
     this._setButton()
+		this._setKeydown()
   }
 }