From 4827d0bf9278ad6e133977558e6751b3659af2e0 Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Sat, 2 Mar 2024 07:54:16 -0800
Subject: [PATCH] Desktop: Fixes #9982: Show focus indicator when navigating
 with keyboard (#9989)

---
 packages/app-desktop/gui/NoteList/style.scss  |  4 ++++
 packages/app-desktop/main.scss                | 19 +++++++++++++++++--
 .../services/noteList/defaultListRenderer.ts  |  2 +-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/app-desktop/gui/NoteList/style.scss b/packages/app-desktop/gui/NoteList/style.scss
index 50fc89a68..6b3e03502 100644
--- a/packages/app-desktop/gui/NoteList/style.scss
+++ b/packages/app-desktop/gui/NoteList/style.scss
@@ -36,6 +36,10 @@
 		width: 2px;
 		height: 2px;
 	}
+
+	&:focus-visible {
+		outline: none;
+	}
 }
 
 .note-list-item-wrapper.-provisional {
diff --git a/packages/app-desktop/main.scss b/packages/app-desktop/main.scss
index 3c199ab58..15bc2d860 100644
--- a/packages/app-desktop/main.scss
+++ b/packages/app-desktop/main.scss
@@ -141,8 +141,23 @@ a {
 	to {transform: rotate(360deg);}
 }
 
-*:focus {
-    outline: none;
+
+*:focus-visible {
+	outline: 1px solid var(--joplin-color-warn);
+}
+
+// The browser-default focus-visible indicator was originally removed for aesthetic
+// reasons. However, this causes accessibility issues.
+//
+// As a comprimise, we disable the focus-visible indicator in cases where the user is
+// probably not navigating with the keyboard. Note that :focus-visible alone is not
+// sufficient because it matches any focused input (https://stackoverflow.com/a/66109577).
+//
+// See https://github.com/laurent22/joplin/issues/9982.
+input:not([type=button]):not([type=checkbox]), select {
+	&:focus-visible {
+		outline: none;
+	}
 }
 
 /* =========================================================================================
diff --git a/packages/lib/services/noteList/defaultListRenderer.ts b/packages/lib/services/noteList/defaultListRenderer.ts
index 49366e096..e77244a36 100644
--- a/packages/lib/services/noteList/defaultListRenderer.ts
+++ b/packages/lib/services/noteList/defaultListRenderer.ts
@@ -57,7 +57,7 @@ const renderer: ListRenderer = {
 			background-color: var(--joplin-selected-color);
 		}
 
-		&:hover {
+		&:hover, :focus-visible > & > .content {
 			background-color: var(--joplin-background-color-hover3);
 		}