✂️ #5: accessibility supported

str0yka · Nov 20, 2023 · 84b591f · 84b591f
1 parent aaacf49
commit 84b591f
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/client/src/components/common/buttons/Button/Button.tsx b/client/src/components/common/buttons/Button/Button.tsx
@@ -10,8 +10,7 @@ export const Button: React.FC<ButtonProps> = ({ children, ...props }) => (
       'min-h-[32px] min-w-[32px] rounded bg-blue-400 px-4 py-1 font-medium text-neutral-50 transition-transform',
       'hover:bg-blue-500',
       'active:scale-95',
-      'focus-within:outline-offset-2',
-      'focus-visible:outline focus-visible:outline-4 focus-visible:outline-blue-400',
+      'focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 focus-visible:outline-blue-400',
       'dark:text-neutral-950',
     )}
     {...props}

diff --git a/client/src/components/common/buttons/IconButton/IconButton.tsx b/client/src/components/common/buttons/IconButton/IconButton.tsx
@@ -14,13 +14,15 @@ export const IconButton: React.FC<IconButtonProps> = ({
     className={cn(
       'rounded border border-neutral-950/20 p-2 transition-transform',
       'enabled:hover:bg-neutral-950/10 enabled:active:scale-95',
+      'focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2',
       'dark:border-neutral-50/10 dark:text-neutral-50',
       {
-        neutral: 'dark:bg-neutral-800 dark:enabled:hover:bg-neutral-700',
-        primary: 'bg-blue-400 enabled:hover:bg-blue-500',
-        success: 'bg-green-400 enabled:hover:bg-green-500',
-        error: 'bg-red-400 enabled:hover:bg-red-500',
-        warning: 'bg-orange-400 enabled:hover:bg-orange-500',
+        neutral:
+          'focus-visible:outline-blue-400 dark:bg-neutral-800 dark:enabled:hover:bg-neutral-700',
+        primary: 'bg-blue-400 focus-visible:outline-blue-400 enabled:hover:bg-blue-500',
+        success: 'bg-green-400 focus-visible:outline-green-400 enabled:hover:bg-green-500',
+        error: 'bg-red-400 focus-visible:outline-red-400 enabled:hover:bg-red-500',
+        warning: 'bg-orange-400 focus-visible:outline-orange-400 enabled:hover:bg-orange-500',
       }[color],
     )}
     {...props}

diff --git a/client/src/index.css b/client/src/index.css
@@ -3,6 +3,7 @@
 @tailwind utilities;
 
 * {
+  outline: none;
   font-family:
     Inter,
     system-ui,