From a7bd9dad24edfa8eabf1ba6617361d6ffeb2256f Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 19 Sep 2024 13:01:18 +0200
Subject: [PATCH] feat(task): use focus-visible for task focus styles

---
 .../tasks/partials/SingleTaskInProject.vue         | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/tasks/partials/SingleTaskInProject.vue b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
index e08908747..63aac98d9 100644
--- a/frontend/src/components/tasks/partials/SingleTaskInProject.vue
+++ b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
@@ -378,7 +378,7 @@ function openTaskDetail(event: MouseEvent | KeyboardEvent) {
 		background-color: var(--grey-100);
 	}
 
-	&:focus-within {
+	&:has(*:focus-visible) {
 		box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
 
 		a.task-link {
@@ -388,7 +388,7 @@ function openTaskDetail(event: MouseEvent | KeyboardEvent) {
 
 	@supports not selector(:focus-within) {
 		:focus {
-		box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
+			box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
 
 			a.task-link {
 				box-shadow: none;
@@ -412,6 +412,15 @@ function openTaskDetail(event: MouseEvent | KeyboardEvent) {
 		.dueDate {
 			display: inline-block;
 			margin-left: 5px;
+
+			&:focus-visible {
+				box-shadow: none;
+
+				time {
+					box-shadow: 0 0 0 1px hsla(var(--primary-hsl), 0.5);
+					border-radius: 3px;
+				}
+			}
 		}
 
 		.overdue {
@@ -457,6 +466,7 @@ function openTaskDetail(event: MouseEvent | KeyboardEvent) {
 		text-align: center;
 		width: 27px;
 		transition: opacity $transition, color $transition;
+		border-radius: $radius;
 
 		&:hover {
 			color: var(--warning);