feat(navigation): use focus-visible for nav items

(cherry picked from commit 65a2814b2a43384dd6f3d412c8ab8094725d3255)

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>

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;

frontend/src/styles/theme/theme.scss

@@ -5,17 +5,16 @@
   outline: none;
 }
 
-:focus {
+a, button {
+  &:focus-visible {
     box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
-}
+  }
 
-:focus:not(:focus-visible) {
+  @supports not selector(:focus-visible) {
-  outline: 0;
+    &:focus {
-}
-
-:focus-visible,
-:-moz-focusring {
       box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
+    }
+  }
 }
 
 :root {