feat: enhance accessibility and styling for form components including Checkbox, Dropdown, Radio, Slider, and Text

src/components/Form/Settings/Dropdown/Dropdown.scss

@@ -1,10 +1,29 @@
 @use 'scss/variables' as *;
+@use 'scss/mixins' as *;
+
+@include keyframes(dropdownSlideIn) {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 
 .dropdown {
   position: relative;
   width: 300px;
   margin-top: 10px;
 
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
   .dropdown-label {
     display: block;
     margin-bottom: 8px;
@@ -25,7 +44,8 @@
     height: 56px;
     padding: 0 16px;
     cursor: pointer;
-    transition: 0.2s ease;
+    transition: all 0.2s ease;
+    outline: none;
 
     @include themed {
       background: t($modal-sidebar);
@@ -37,6 +57,15 @@
         border-color: t($color);
       }
     }
+
+    &:focus-visible {
+      outline: none;
+
+      @include themed {
+        border-color: t($link);
+        box-shadow: 0 0 0 3px t($link);
+      }
+    }
   }
 
   .dropdown-value {
@@ -44,6 +73,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    transition: color 0.2s ease;
   }
 
   .dropdown-arrow {
@@ -68,6 +98,7 @@
     max-height: 250px;
     overflow-y: auto;
     z-index: 100;
+    @include animation(dropdownSlideIn 0.2s ease-out);
 
     @include themed {
       background: t($modal-background);
@@ -75,24 +106,81 @@
       border-radius: t($borderRadius);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      @include themed {
+        background: t($modal-sidebar);
+      }
+    }
+
+    &::-webkit-scrollbar-thumb {
+      @include themed {
+        background: t($modal-sidebarActive);
+        border-radius: 3px;
+      }
+
+      &:hover {
+        @include themed {
+          background: t($color);
+        }
+      }
+    }
   }
 
   .dropdown-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
     padding: 12px 16px;
     cursor: pointer;
-    transition: 0.2s ease;
+    transition: all 0.15s ease;
+    outline: none;
 
     @include themed {
       color: t($color);
 
       &:hover {
         background: t($modal-sidebarActive);
+        padding-left: 20px;
       }
 
       &.selected {
         background: t($modal-sidebar);
         font-weight: 500;
       }
+
+      &.focused {
+        background: t($modal-sidebarActive);
+        border-left: 2px solid t($link);
+      }
+    }
+
+    .dropdown-option-text {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .dropdown-option-check {
+      flex-shrink: 0;
+      font-size: 14px;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      @include themed {
+        background: t($link);
+        color: white;
+      }
     }
   }
 }