style: add outline for better accessibility

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);
+      }
     }
   }
 }

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);

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;
       }

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);
     }

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);

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;

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 {

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);
   }