From a44b6db77dc3302db877ff4d3e939587a27f7dfb Mon Sep 17 00:00:00 2001
From: Nicolas Varrot <contact@nicolasvarrot.fr>
Date: Fri, 13 Feb 2026 14:57:39 +0000
Subject: [PATCH] style: add global focus-visible outline for keyboard
 navigation accessibility

Adds a consistent focus ring (accent-dim color, 2px) on all focusable
elements when navigated via keyboard (:focus-visible). Mouse/touch clicks
no longer show the default browser outline (:focus:not(:focus-visible)).

Elements with existing Tailwind focus:ring-* classes are unaffected since
they already handle their own focus styling.
---
 src/index.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/index.css b/src/index.css
index a7869a0..fc80a36 100644
--- a/src/index.css
+++ b/src/index.css
@@ -44,6 +44,19 @@
   --pc-separator: rgba(255,255,255,0.05);
 }
 
+/* Global focus-visible ring for keyboard navigation (a11y).
+   Elements with Tailwind focus:ring-* already handle their own styling,
+   so we target elements that don't have explicit ring classes. */
+:focus-visible {
+  outline: 2px solid var(--pc-accent-dim);
+  outline-offset: 2px;
+}
+
+/* Remove default outline for mouse/touch users */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
 * {
   scrollbar-width: thin;
   scrollbar-color: var(--pc-scrollbar-thumb) var(--pc-scrollbar-track);