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 <[email protected]>
bluesky-social · Nov 1, 2024 · c580f20 · c580f20
1 parent 7111e38
commit c580f20
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git 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
@@ -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}