From cf3569c16dea69558264e96ddfd406965906e6ca Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 21 Apr 2026 09:45:34 +0200
Subject: [PATCH] fix: switch fields aren't accessible with tab on Safari
 (#45083)

## Problem

Similar to #45064, switch fields aren't accessible with tab on Safari.

Example:
- Open
https://studio-staging-git-gildasgarcia-fe-2998-suggest-e7fb9e-supabase.vercel.app
- Create a new project
- Move through fields with tab, note that you can't focus _High
Availability_

## Solution

- Add a `tabindex="0"` on `<Switch>`
- Add a `tabindex="0"` on `<Toggle>` (was a mistake as we don't actually
use it yet but it will be needed when we do)


## How to test

- Open the staging
- Create a new project
- Move through fields with tab, note that you can focus _High
Availability_

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Switch and Toggle controls now correctly participate in keyboard tab
order, improving focusability and keyboard navigation for accessibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 packages/ui/src/components/shadcn/ui/switch.tsx | 1 +
 packages/ui/src/components/shadcn/ui/toggle.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/ui/src/components/shadcn/ui/switch.tsx b/packages/ui/src/components/shadcn/ui/switch.tsx
index b0c1d23a5bc..0a40f0ed268 100644
--- a/packages/ui/src/components/shadcn/ui/switch.tsx
+++ b/packages/ui/src/components/shadcn/ui/switch.tsx
@@ -50,6 +50,7 @@ const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>,
   ({ className, size, ...props }, ref) => (
     <SwitchPrimitives.Root
       className={cn(switchRootVariants({ size }), className)}
+      tabIndex={0}
       {...props}
       ref={ref}
     >
diff --git a/packages/ui/src/components/shadcn/ui/toggle.tsx b/packages/ui/src/components/shadcn/ui/toggle.tsx
index c60fd746f1c..25b3998df30 100644
--- a/packages/ui/src/components/shadcn/ui/toggle.tsx
+++ b/packages/ui/src/components/shadcn/ui/toggle.tsx
@@ -35,6 +35,7 @@ const Toggle = React.forwardRef<
   <TogglePrimitive.Root
     ref={ref}
     className={cn(toggleVariants({ variant, size, className }))}
+    tabIndex={0}
     {...props}
   />
 ))