From eaccd1d5c080e97adb30909e13bdfd5309002293 Mon Sep 17 00:00:00 2001
From: Amruth Pillai <im.amruth@gmail.com>
Date: Tue, 29 Sep 2026 22:08:10 +0200
Subject: [PATCH] fix(ui): restore the focus ring on radios, checkboxes,
 switches, accordions and toasts

These controls set outline-none, which overrides the global :focus-visible
accent ring, so keyboard users saw no focus indicator. Toast buttons also
set focus-visible:outline-accent, which only changes the colour and left
the outline style at none. The radio now transitions only border-color so
the ring doesn't fade in from the text colour.
---
 packages/ui/src/components/accordion.tsx   | 2 +-
 packages/ui/src/components/checkbox.tsx    | 2 +-
 packages/ui/src/components/radio-group.tsx | 2 +-
 packages/ui/src/components/switch.tsx      | 4 ++--
 packages/ui/src/components/toast.tsx       | 6 +++---
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/components/accordion.tsx b/packages/ui/src/components/accordion.tsx
index d124a1936..1b7e49518 100644
--- a/packages/ui/src/components/accordion.tsx
+++ b/packages/ui/src/components/accordion.tsx
@@ -22,7 +22,7 @@ function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.
 			<AccordionPrimitive.Trigger
 				data-slot="accordion-trigger"
 				className={cn(
-					"group/accordion-trigger relative flex flex-1 items-center justify-between gap-2 rounded-md py-2.5 text-start font-medium text-ink text-sm outline-none aria-disabled:pointer-events-none aria-disabled:text-ink-3 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:text-ink-3",
+					"group/accordion-trigger relative flex flex-1 items-center justify-between gap-2 rounded-md py-2.5 text-start font-medium text-ink text-sm aria-disabled:pointer-events-none aria-disabled:text-ink-3 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:text-ink-3",
 					className,
 				)}
 				{...props}
diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
index a042cbdf6..7dcbb0874 100644
--- a/packages/ui/src/components/checkbox.tsx
+++ b/packages/ui/src/components/checkbox.tsx
@@ -7,7 +7,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
 		<CheckboxPrimitive.Root
 			data-slot="checkbox"
 			className={cn(
-				"peer touch-target relative flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border-[1.5px] border-line-2 bg-raised outline-none transition-[background-color,border-color] duration-quick aria-invalid:border-danger data-disabled:cursor-not-allowed data-checked:border-accent data-indeterminate:border-accent data-checked:bg-accent data-indeterminate:bg-accent data-checked:text-on-accent data-indeterminate:text-on-accent data-disabled:opacity-50",
+				"peer touch-target relative flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border-[1.5px] border-line-2 bg-raised transition-[background-color,border-color] duration-quick aria-invalid:border-danger data-disabled:cursor-not-allowed data-checked:border-accent data-indeterminate:border-accent data-checked:bg-accent data-indeterminate:bg-accent data-checked:text-on-accent data-indeterminate:text-on-accent data-disabled:opacity-50",
 				className,
 			)}
 			{...props}
diff --git a/packages/ui/src/components/radio-group.tsx b/packages/ui/src/components/radio-group.tsx
index 7f6625092..86493d64c 100644
--- a/packages/ui/src/components/radio-group.tsx
+++ b/packages/ui/src/components/radio-group.tsx
@@ -12,7 +12,7 @@ function RadioGroupItem({ className, ...props }: Radio.Root.Props) {
 		<Radio.Root
 			data-slot="radio-group-item"
 			className={cn(
-				"peer flex size-[18px] shrink-0 items-center justify-center rounded-full border-[1.5px] border-line-2 bg-raised outline-none transition-colors duration-quick data-disabled:cursor-not-allowed data-checked:border-accent data-disabled:opacity-50",
+				"peer flex size-[18px] shrink-0 items-center justify-center rounded-full border-[1.5px] border-line-2 bg-raised transition-[border-color] duration-quick data-disabled:cursor-not-allowed data-checked:border-accent data-disabled:opacity-50",
 				className,
 			)}
 			{...props}
diff --git a/packages/ui/src/components/switch.tsx b/packages/ui/src/components/switch.tsx
index 659515552..e584fd74a 100644
--- a/packages/ui/src/components/switch.tsx
+++ b/packages/ui/src/components/switch.tsx
@@ -28,7 +28,7 @@ function Switch({ className, size = "default", ...props }: SwitchProps) {
 			data-slot="switch"
 			data-size={size}
 			className={cn(
-				"group/switch peer touch-target relative inline-flex shrink-0 rounded-full outline-none data-disabled:cursor-not-allowed",
+				"group/switch peer touch-target relative inline-flex shrink-0 rounded-full data-disabled:cursor-not-allowed",
 				className,
 			)}
 			{...props}
@@ -56,7 +56,7 @@ function SwitchRow({ className, label, description, size = "default", ...props }
 			aria-labelledby={labelId}
 			aria-describedby={description ? descriptionId : undefined}
 			className={cn(
-				"group/switch flex w-full items-center justify-between gap-4 rounded-md py-2 text-start outline-none data-disabled:cursor-not-allowed",
+				"group/switch flex w-full items-center justify-between gap-4 rounded-md py-2 text-start data-disabled:cursor-not-allowed",
 				className,
 			)}
 			{...props}
diff --git a/packages/ui/src/components/toast.tsx b/packages/ui/src/components/toast.tsx
index 2c3258581..45cfe80cf 100644
--- a/packages/ui/src/components/toast.tsx
+++ b/packages/ui/src/components/toast.tsx
@@ -35,7 +35,7 @@ function Toast({ className, ...props }: ToastPrimitive.Root.Props) {
 		<ToastPrimitive.Root
 			data-slot="toast"
 			className={cn(
-				"group/toast pointer-events-auto flex w-fit max-w-[min(560px,100%)] select-none items-center rounded-lg bg-ink text-bg shadow-e3 outline-none transition-[opacity,translate,transform] duration-emphasized ease-enter [grid-area:1/1] focus-visible:outline-accent data-[swipe-direction=right]:data-ending-style:translate-x-[calc(var(--toast-swipe-movement-x)+100%)] data-[swipe-direction=down]:data-ending-style:translate-y-[calc(var(--toast-swipe-movement-y)+100%)] data-[swipe-direction=right]:data-ending-style:translate-y-0 data-ending-style:translate-y-2.5 data-limited:translate-y-2.5 data-starting-style:translate-y-2.5 data-ending-style:opacity-0 data-limited:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--d3)*0.7)] data-limited:duration-[calc(var(--d3)*0.7)]",
+				"group/toast pointer-events-auto flex w-fit max-w-[min(560px,100%)] select-none items-center rounded-lg bg-ink text-bg shadow-e3 transition-[opacity,translate,transform] duration-emphasized ease-enter [grid-area:1/1] data-[swipe-direction=right]:data-ending-style:translate-x-[calc(var(--toast-swipe-movement-x)+100%)] data-[swipe-direction=down]:data-ending-style:translate-y-[calc(var(--toast-swipe-movement-y)+100%)] data-[swipe-direction=right]:data-ending-style:translate-y-0 data-ending-style:translate-y-2.5 data-limited:translate-y-2.5 data-starting-style:translate-y-2.5 data-ending-style:opacity-0 data-limited:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--d3)*0.7)] data-limited:duration-[calc(var(--d3)*0.7)]",
 				className,
 			)}
 			{...props}
@@ -79,7 +79,7 @@ function ToastAction({ className, ...props }: ToastPrimitive.Action.Props) {
 		<ToastPrimitive.Action
 			data-slot="toast-action"
 			className={cn(
-				"-my-1 shrink-0 rounded-sm px-1 py-1 font-semibold text-sm underline underline-offset-3 outline-none transition-opacity hover:opacity-80 focus-visible:outline-accent",
+				"-my-1 shrink-0 rounded-sm px-1 py-1 font-semibold text-sm underline underline-offset-3 transition-opacity hover:opacity-80",
 				className,
 			)}
 			{...props}
@@ -93,7 +93,7 @@ function ToastClose({ className, children, ...props }: ToastPrimitive.Close.Prop
 			data-slot="toast-close"
 			aria-label="Close"
 			className={cn(
-				"-me-2 inline-flex size-7 shrink-0 items-center justify-center rounded-sm opacity-70 outline-none transition-opacity hover:opacity-100 focus-visible:outline-accent",
+				"-me-2 inline-flex size-7 shrink-0 items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100",
 				className,
 			)}
 			{...props}