Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2026-10-04 10:43:46 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): restore the focus ring on radios, checkboxes, switches, accordions and toasts

Browse Source 
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.
This commit is contained in:
Amruth Pillai
2026-09-29 22:08:10 +02:00
parent 61f481055a
commit eaccd1d5c0
5 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/accordion.tsx
+1 -1
View File
@@ -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}
packages/ui/src/components/checkbox.tsx
+1 -1
View File
@@ -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}
packages/ui/src/components/radio-group.tsx
+1 -1
View File
@@ -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}
packages/ui/src/components/switch.tsx
+2 -2
View File
@@ -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}
packages/ui/src/components/toast.tsx
+3 -3
View File
@@ -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}