Improved: Focus and show password buttons (#4205)

* CSS + JS

* fixed the quotes

3 files changed, 31 insertions, 13 deletions

diff --git a/p/scripts/extra.js b/p/scripts/extra.js
index ec98b41bb..00a460917 100644
--- a/p/scripts/extra.js
+++ b/p/scripts/extra.js
@@ -98,20 +98,28 @@ function init_crypto_form() {
 }
 // </crypto form (Web login)>
 
+function showPW(ev) {
+	if (ev.buttons || ev.key == ' ' || ev.key.toUpperCase() == 'ENTER') {
+		const passwordField = document.getElementById(this.getAttribute('data-toggle'));
+		passwordField.setAttribute('type', 'text');
+		this.classList.add('active');
+	}
+	return false;
+}
+
+function hidePW() {
+	const passwordField = document.getElementById(this.getAttribute('data-toggle'));
+	passwordField.setAttribute('type', 'password');
+	this.classList.remove('active');
+	return false;
+}
+
 function init_password_observers() {
-	document.querySelectorAll('.toggle-password').forEach(function (a) {
-		a.onmousedown = function (ev) {
-			const passwordField = document.getElementById(this.getAttribute('data-toggle'));
-			passwordField.setAttribute('type', 'text');
-			this.classList.add('active');
-			return false;
-		};
-		a.onmouseup = function (ev) {
-			const passwordField = document.getElementById(this.getAttribute('data-toggle'));
-			passwordField.setAttribute('type', 'password');
-			this.classList.remove('active');
-			return false;
-		};
+	document.querySelectorAll('.toggle-password').forEach(function (btn) {
+		btn.addEventListener('mousedown', showPW);
+		btn.addEventListener('keydown', showPW);
+		btn.addEventListener('mouseup', hidePW);
+		btn.addEventListener('keyup', hidePW);
 	});
 }
 
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index fb151b116..bea287653 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -281,6 +281,11 @@ a.btn {
 	font-weight: bold;
 }
 
+.btn:focus-visible,
+input[type="checkbox"]:focus-visible {
+	outline: 2px solid #ccc;
+}
+
 /*=== Navigation */
 .nav-list .nav-header,
 .nav-list .item {
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index 511d8948d..696dd4e3c 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -281,6 +281,11 @@ a.btn {
 	font-weight: bold;
 }
 
+.btn:focus-visible,
+input[type="checkbox"]:focus-visible {
+	outline: 2px solid #ccc;
+}
+
 /*=== Navigation */
 .nav-list .nav-header,
 .nav-list .item {