From 70a8fe9e9f093d26b680efe11f507829b2081fb6 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.net>
Date: Sat, 16 May 2026 07:06:49 +0000
Subject: fix(a11y): scope focus-visible ring to header items

Add explicit .header-item:focus { outline: none } and
.header-item:focus-visible rules in +layout.svelte so the navbar
matches the dropdown menu's teal rounded ring on keyboard focus and
stops leaking the browser default blue square ring on mouse click.
Same pattern as the Dropdown component's scoped focus-visible rule.
---
 src/routes/+layout.svelte | 10 ++++++++++
 1 file changed, 10 insertions(+)

(limited to 'src')

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 633fdffc..0cfde36d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -397,6 +397,16 @@ $: {
     text-decoration: none;
   }
 
+  .header-item:focus {
+    outline: none;
+  }
+
+  .header-item:focus-visible {
+    outline: 2px solid var(--base0D);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+
   .header-item:active {
     outline: none;
   }
-- 
cgit v1.2.3