From 35c2b4e4223085535cb193d827c53ea20c1679ae Mon Sep 17 00:00:00 2001
From: Julien Oculi <xdrz.jot.sr@gmail.com>
Date: Wed, 14 Feb 2024 11:13:07 +0100
Subject: [PATCH] feat(ui): :wheelchair: use border instead of outline for
 focus visible

---
 components/Header.css | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/components/Header.css b/components/Header.css
index 2e714a0..791af1b 100644
--- a/components/Header.css
+++ b/components/Header.css
@@ -42,6 +42,7 @@ header nav {
 		& > a {
 			display: inline-block;
 			text-decoration: none;
+			outline: none;
 		}
 
 		& > * {
@@ -49,10 +50,9 @@ header nav {
 		}
 	}
 
-	& > li:hover {
-		border: var(--_border-size) solid currentColor;
-	}
-
+	& > li:hover,
+	& > li:has(a:focus-visible),
+	& > li:has(summary:focus-visible),
 	& > li:has(details[open]) {
 		border: var(--_border-size) solid currentColor;
 	}
@@ -65,6 +65,7 @@ header details {
 		display: flex;
 		gap: var(--_gap);
 		list-style: none;
+		outline: none;
 
 		&::after {
 			display: inline-block;
@@ -98,7 +99,8 @@ header details {
 		border: none;
 	}
 
-	& li:hover {
+	& li:hover,
+	& li:has(a:focus-visible) {
 		background-color: var(--_translucent);
 	}
 
@@ -106,6 +108,7 @@ header details {
 		text-decoration: none;
 		padding: var(--_gap) calc(var(--_gap) + 0.24rem);
 		display: inline-block;
+		outline: none;
 	}
 }