Desktop: Fixes #9982: Show focus indicator when navigating with keybo…

…ard (#9989)
laurent22 · Mar 2, 2024 · 4827d0b · 4827d0b
1 parent f0f6590
commit 4827d0b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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);
 		}