From e7d7a37a12dd79f12933b3ffa91fe6e0557c4f9e Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Tue, 23 Apr 2024 00:02:27 +0330
Subject: [PATCH] style: add outline for better accessibility

---
 src/components/modal/modal.module.css                    | 5 +++++
 src/components/modals/presets/list/list.module.css       | 8 ++++++++
 src/components/modals/presets/new/new.module.css         | 8 ++++++++
 src/components/modals/share-link/share-link.module.css   | 8 ++++++++
 src/components/modals/shared/shared.module.css           | 4 ++++
 src/components/toolbox/notepad/button/button.module.css  | 4 ++++
 src/components/toolbox/notepad/notepad.module.css        | 4 ++++
 src/components/toolbox/pomodoro/button/button.module.css | 4 ++++
 8 files changed, 45 insertions(+)

diff --git a/src/components/modal/modal.module.css b/src/components/modal/modal.module.css
index 5542b12..f995c57 100644
--- a/src/components/modal/modal.module.css
+++ b/src/components/modal/modal.module.css
@@ -50,7 +50,12 @@
       cursor: pointer;
       background-color: transparent;
       border: none;
+      border-radius: 4px;
       outline: none;
+
+      &:focus-visible {
+        outline: 1px solid var(--color-neutral-950);
+      }
     }
   }
 }
diff --git a/src/components/modals/presets/list/list.module.css b/src/components/modals/presets/list/list.module.css
index 855d727..88eca0a 100644
--- a/src/components/modals/presets/list/list.module.css
+++ b/src/components/modals/presets/list/list.module.css
@@ -34,6 +34,10 @@
       background: transparent;
       border: none;
       outline: none;
+
+      &:focus-visible {
+        outline: 1px solid var(--color-neutral-950);
+      }
     }
 
     & button {
@@ -51,6 +55,10 @@
       border-radius: 4px;
       outline: none;
 
+      &:focus-visible {
+        outline: 1px solid var(--color-neutral-950);
+      }
+
       &.primary {
         font-size: var(--font-xsm);
         color: var(--color-foreground);
diff --git a/src/components/modals/presets/new/new.module.css b/src/components/modals/presets/new/new.module.css
index 33c247b..95df4ff 100644
--- a/src/components/modals/presets/new/new.module.css
+++ b/src/components/modals/presets/new/new.module.css
@@ -31,6 +31,10 @@
       background: transparent;
       border: none;
       outline: none;
+
+      &:focus-visible {
+        outline: 1px solid var(--color-neutral-950);
+      }
     }
 
     & button {
@@ -48,6 +52,10 @@
       border-radius: 4px;
       outline: none;
 
+      &:focus-visible {
+        outline: 1px solid var(--color-neutral-950);
+      }
+
       &:disabled {
         cursor: not-allowed;
       }
diff --git a/src/components/modals/share-link/share-link.module.css b/src/components/modals/share-link/share-link.module.css
index d57d084..a4a7852 100644
--- a/src/components/modals/share-link/share-link.module.css
+++ b/src/components/modals/share-link/share-link.module.css
@@ -31,6 +31,10 @@
     background: transparent;
     border: none;
     outline: none;
+
+    &:focus-visible {
+      outline: 1px solid var(--color-neutral-950);
+    }
   }
 
   & button {
@@ -47,6 +51,10 @@
     outline: none;
     transition: 0.2s;
 
+    &:focus-visible {
+      outline: 1px solid var(--color-neutral-950);
+    }
+
     &:hover {
       background-color: var(--color-neutral-200);
     }
diff --git a/src/components/modals/shared/shared.module.css b/src/components/modals/shared/shared.module.css
index 2cfd0ae..6884d3a 100644
--- a/src/components/modals/shared/shared.module.css
+++ b/src/components/modals/shared/shared.module.css
@@ -51,6 +51,10 @@
     outline: none;
     transition: 0.2s;
 
+    &:focus-visible {
+      outline: 1px solid var(--color-neutral-950);
+    }
+
     &:hover {
       color: var(--color-foreground);
       background-color: var(--color-neutral-300);
diff --git a/src/components/toolbox/notepad/button/button.module.css b/src/components/toolbox/notepad/button/button.module.css
index 0b1e74a..2c1e4c0 100644
--- a/src/components/toolbox/notepad/button/button.module.css
+++ b/src/components/toolbox/notepad/button/button.module.css
@@ -14,6 +14,10 @@
   transition: 0.2s;
   transition-property: border-color, color, background-color;
 
+  &:focus-visible {
+    outline: 1px solid var(--color-neutral-950);
+  }
+
   &.critical {
     color: #f43f5e;
     border-color: #f43f5e;
diff --git a/src/components/toolbox/notepad/notepad.module.css b/src/components/toolbox/notepad/notepad.module.css
index bf90776..6e2385f 100644
--- a/src/components/toolbox/notepad/notepad.module.css
+++ b/src/components/toolbox/notepad/notepad.module.css
@@ -29,6 +29,10 @@
   border-radius: 4px;
   outline: none;
   scroll-padding-bottom: 12px;
+
+  &:focus-visible {
+    outline: 1px solid var(--color-neutral-950);
+  }
 }
 
 .counter {
diff --git a/src/components/toolbox/pomodoro/button/button.module.css b/src/components/toolbox/pomodoro/button/button.module.css
index ad4ecd4..00b2d3b 100644
--- a/src/components/toolbox/pomodoro/button/button.module.css
+++ b/src/components/toolbox/pomodoro/button/button.module.css
@@ -13,6 +13,10 @@
   outline: none;
   transition: 0.2s;
 
+  &:focus-visible {
+    outline: 1px solid var(--color-neutral-950);
+  }
+
   &:hover {
     background-color: var(--color-neutral-200);
   }