From e290d79c1584a63dff9c01ab5c53932f74489fe8 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 17 Sep 2024 12:30:17 +0200
Subject: [PATCH] feat(navigation): use focus-visible for nav items

(cherry picked from commit 65a2814b2a43384dd6f3d412c8ab8094725d3255)
---
 .../home/ProjectsNavigationItem.vue           | 16 +++++++++++++++-
 .../tasks/partials/SingleTaskInProject.vue    | 12 +++++++++++-
 frontend/src/styles/theme/theme.scss          | 19 +++++++++----------
 3 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/home/ProjectsNavigationItem.vue b/frontend/src/components/home/ProjectsNavigationItem.vue
index 085596d95..c69cf7202 100644
--- a/frontend/src/components/home/ProjectsNavigationItem.vue
+++ b/frontend/src/components/home/ProjectsNavigationItem.vue
@@ -3,7 +3,7 @@
 		class="list-menu loader-container is-loading-small"
 		:class="{'is-loading': isLoading}"
 	>
-		<div>
+		<div class="navigation-item">
 			<BaseButton
 				v-if="canCollapse && childProjects?.length > 0"
 				class="collapse-project-button"
@@ -193,4 +193,18 @@ const childProjects = computed(() => {
 .is-touch .handle.has-color-bubble {
 	display: none !important;
 }
+
+.navigation-item:has(*:focus-visible) {
+	box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
+	background-color: var(--white);
+
+	.favorite, .menu-list-dropdown {
+		opacity: 1;
+	}
+}
+
+.navigation-item a:focus-visible {
+	// The focus ring is already added to the navigation-item, so we don't need to add it again.
+	box-shadow: none;
+}
 </style>
diff --git a/frontend/src/components/tasks/partials/SingleTaskInProject.vue b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
index 3f9c662aa..26d684018 100644
--- a/frontend/src/components/tasks/partials/SingleTaskInProject.vue
+++ b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
@@ -377,7 +377,7 @@ function openTaskDetail(event: MouseEvent | KeyboardEvent) {
 		background-color: var(--grey-100);
 	}
 
-	&:focus-within, &:focus {
+	&:focus-within {
 		box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
 
 		a.task-link {
@@ -385,6 +385,16 @@ function openTaskDetail(event: MouseEvent | KeyboardEvent) {
 		}
 	}
 
+	@supports not selector(:focus-within) {
+		:focus {
+		box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
+
+			a.task-link {
+				box-shadow: none;
+			}
+		}
+	}
+
 	.tasktext,
 	&.tasktext {
 		text-overflow: ellipsis;
diff --git a/frontend/src/styles/theme/theme.scss b/frontend/src/styles/theme/theme.scss
index f993e4e52..9574ccb41 100644
--- a/frontend/src/styles/theme/theme.scss
+++ b/frontend/src/styles/theme/theme.scss
@@ -5,17 +5,16 @@
   outline: none;
 }
 
-:focus {
-  box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
-}
+a, button {
+  &:focus-visible {
+    box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
+  }
 
-:focus:not(:focus-visible) {
-  outline: 0;
-}
-
-:focus-visible,
-:-moz-focusring {
-  box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
+  @supports not selector(:focus-visible) {
+    &:focus {
+      box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
+    }
+  }
 }
 
 :root {