From c580f20b5311914c3ecdd3a84f7ae13f8881f3a7 Mon Sep 17 00:00:00 2001
From: Yaël Guilloux <yael.guilloux@gmail.com>
Date: Sat, 2 Nov 2024 00:18:19 +0100
Subject: Improve focus-visible outlines in navigation (#6061)

* feat add focus_visible atom

* feat use focus_visible atom in Button.tsx style

* Tweak

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
---
 src/alf/atoms.ts                   | 5 ++++-
 src/view/shell/desktop/LeftNav.tsx | 9 ++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts
index 434420a97..fe8cf9a78 100644
--- a/src/alf/atoms.ts
+++ b/src/alf/atoms.ts
@@ -1,4 +1,4 @@
-import {Platform, StyleSheet, ViewStyle} from 'react-native'
+import {Platform, StyleProp, StyleSheet, ViewStyle} from 'react-native'
 
 import * as tokens from '#/alf/tokens'
 import {native, web} from '#/alf/util/platform'
@@ -887,6 +887,9 @@ export const atoms = {
   user_select_all: {
     userSelect: 'all',
   },
+  outline_inset_1: {
+    outlineOffset: '-1px',
+  } as StyleProp<ViewStyle>,
 
   /*
    * Text decoration
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index 1a9ce2005..de3a8190d 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -185,7 +185,14 @@ function NavItem({count, href, icon, iconFilled, label}: NavItemProps) {
 
   return (
     <PressableWithHover
-      style={[a.flex_row, a.align_center, a.p_md, a.rounded_sm, a.gap_sm]}
+      style={[
+        a.flex_row,
+        a.align_center,
+        a.p_md,
+        a.rounded_sm,
+        a.gap_sm,
+        a.outline_inset_1,
+      ]}
       hoverStyle={t.atoms.bg_contrast_25}
       // @ts-ignore the function signature differs on web -prf
       onPress={onPressWrapped}
-- 
cgit 1.4.1