[CB-5023] Add vizualization for focus on switchers (#3677)

* dbeaver/pro#4862 adds focus on switches

* fixes border radius

* less border-radius

* applies hack with borders and position to save border radius and offset

* removes variable

* fix: applies focus only for tab

* removes focus on ESC button

* removes onkeydown

* cleanup

---------

Co-authored-by: Evgenia <139753579+EvgeniaBzzz@users.noreply.github.com>

webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.module.css

@@ -5,46 +5,72 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-.switchControl {
-  composes: theme-switch from global;
-}
 
-.disabled {
-  composes: theme-switch--disabled mdc-switch--disabled from global;
-}
+@layer components {
+  .field {
+    --dbv-kit-control-outline-offset: -8px;
+    position: relative;
 
-.checked {
-  composes: theme-switch--checked mdc-switch--checked from global;
-}
+    &::before {
+      content: '';
+      position: absolute;
+      top: var(--dbv-kit-control-outline-offset);
+      left: var(--dbv-kit-control-outline-offset);
+      right: var(--dbv-kit-control-outline-offset);
+      bottom: var(--dbv-kit-control-outline-offset);
+      border-radius: var(--dbv-kit-control-border-radius);
+      border: var(--dbv-kit-control-outline-width) solid transparent;
 
-.switchControlTrack {
-  composes: theme-switch__track from global;
-}
+      pointer-events: none;
+    }
 
-.switchInput {
-  composes: theme-switch_native-control from global;
-}
+    &:has(.switchInput:focus-visible)::before {
+      border-color: var(--dbv-kit-control-outline-color);
+      border-width: var(--dbv-kit-control-outline-width);
+    }
+  }
 
-.switchControlUnderlay {
-  composes: theme-switch__thumb-underlay from global;
-}
+  .switchControl {
+    composes: theme-switch from global;
+  }
 
-.switchControlThumb {
-  composes: theme-switch__thumb from global;
-}
+  .disabled {
+    composes: theme-switch--disabled mdc-switch--disabled from global;
+  }
 
-.switchBody {
-  display: flex;
-  align-items: center;
-  composes: theme-typography--body1 from global;
+  .checked {
+    composes: theme-switch--checked mdc-switch--checked from global;
+  }
 
-  & .fieldLabel {
-    cursor: pointer;
-    user-select: none;
-    display: block;
-    padding-left: 18px;
-    min-width: 50px;
-    white-space: pre-wrap;
-    font-weight: 500;
+  .switchControlTrack {
+    composes: theme-switch__track from global;
+  }
+
+  .switchInput {
+    composes: theme-switch_native-control from global;
+  }
+
+  .switchControlUnderlay {
+    composes: theme-switch__thumb-underlay from global;
+  }
+
+  .switchControlThumb {
+    composes: theme-switch__thumb from global;
+  }
+
+  .switchBody {
+    display: flex;
+    align-items: center;
+    composes: theme-typography--body1 from global;
+
+    & .fieldLabel {
+      cursor: pointer;
+      user-select: none;
+      display: block;
+      padding-left: 18px;
+      min-width: 50px;
+      white-space: pre-wrap;
+      font-weight: 500;
+    }
   }
 }

webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx

@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2024 DBeaver Corp and others
+ * Copyright (C) 2020-2025 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -73,7 +73,7 @@ export const Switch: SwitchType = observer(function Switch({
   }
 
   return (
-    <Field title={rest.title}>
+    <Field title={rest.title} className={s(styles, { field: true }, className)}>
       <div className={styles['switchBody']}>
         <div className={s(styles, { switchControl: true, disabled: disabled, checked: checkboxState.checked })}>
           <div className={styles['switchControlTrack']} />