From f8fda606ab6493699894cfaf90ef0b36b3c55a89 Mon Sep 17 00:00:00 2001
From: Borisenko Andrew <seigiard@gmail.com>
Date: Fri, 25 Oct 2024 12:31:12 +0200
Subject: [PATCH] Allow Switch has outline on focus

Right now Switch does not have an outline on focus. It's not good from points of accessibility and keyboard navigation.

I add `_focusVisible` styles copied from `button` recipe and it looks good
---
 packages/panda/src/theme/recipes/switch.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/panda/src/theme/recipes/switch.ts b/packages/panda/src/theme/recipes/switch.ts
index 9fab6b1d..a0658afe 100644
--- a/packages/panda/src/theme/recipes/switch.ts
+++ b/packages/panda/src/theme/recipes/switch.ts
@@ -25,6 +25,11 @@ export const switchRecipe = defineSlotRecipe({
       _checked: {
         background: 'colorPalette.default',
       },
+      _focusVisible: {
+        outline: '2px solid',
+        outlineColor: 'colorPalette.default',
+        outlineOffset: '2px',
+      },
     },
     label: {
       color: 'fg.default',