refactor(ui): update focus-visible ring styles in ResizableHandle for…

… improved accessibility
tszhong0411 · Jan 15, 2025 · 663c5df · 663c5df
1 parent f37d344
commit 663c5df
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/.changeset/tidy-tools-camp.md b/.changeset/tidy-tools-camp.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Update focus-visible ring styles in ResizableHandle for improved accessibility
diff --git a/packages/ui/src/resizable.tsx b/packages/ui/src/resizable.tsx
@@ -31,7 +31,7 @@ const ResizableHandle = (props: ResizableHandleProps) => {
       className={cn(
         'bg-border relative flex w-px items-center justify-center',
         'data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0',
-        'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1',
+        'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
         'after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2',
         '[&[data-panel-group-direction=vertical]>div]:rotate-90',
         className