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>
2024-11-02 00:18:19 +01:00
parent 7111e38cd4
commit c580f20b53
2 changed files with 12 additions and 2 deletions
@@ -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}