fix(app): make keyboard focus visible in settings (#12612)

5 files changed, 12 insertions, 5 deletions

diff --git a/packages/ui/src/components/checkbox.css b/packages/ui/src/components/checkbox.css
index b10ebbbd1..8ca73d349 100644
--- a/packages/ui/src/components/checkbox.css
+++ b/packages/ui/src/components/checkbox.css
@@ -79,9 +79,9 @@
     background-color: var(--surface-hover);
   }
 
-  &:focus-within:not([data-readonly]) [data-slot="checkbox-checkbox-control"] {
+  &:not([data-readonly]) [data-slot="checkbox-checkbox-input"]:focus-visible + [data-slot="checkbox-checkbox-control"] {
     border-color: var(--border-focus);
-    box-shadow: 0 0 0 2px var(--surface-focus);
+    box-shadow: var(--shadow-xs-border-focus);
   }
 
   &[data-checked] [data-slot="checkbox-checkbox-control"],
diff --git a/packages/ui/src/components/collapsible.css b/packages/ui/src/components/collapsible.css
index 1f20cf85d..f23746bf1 100644
--- a/packages/ui/src/components/collapsible.css
+++ b/packages/ui/src/components/collapsible.css
@@ -32,6 +32,7 @@
     /* } */
     &:focus-visible {
       outline: none;
+      background-color: var(--surface-raised-base-hover);
     }
     &[data-disabled] {
       cursor: not-allowed;
@@ -70,6 +71,7 @@
       /* } */
       &:focus-visible {
         outline: none;
+        background-color: var(--surface-raised-base-hover);
       }
       &[data-disabled] {
         cursor: not-allowed;
diff --git a/packages/ui/src/components/select.css b/packages/ui/src/components/select.css
index 25dd2eb40..a765850d4 100644
--- a/packages/ui/src/components/select.css
+++ b/packages/ui/src/components/select.css
@@ -82,7 +82,7 @@
         box-shadow: var(--shadow-xs-border-base);
       }
 
-      &:not([data-expanded]):focus {
+      &:not([data-expanded]):not(:focus-visible):focus {
         background-color: transparent;
         box-shadow: none;
       }
diff --git a/packages/ui/src/components/switch.css b/packages/ui/src/components/switch.css
index 89e844732..579930f55 100644
--- a/packages/ui/src/components/switch.css
+++ b/packages/ui/src/components/switch.css
@@ -86,9 +86,9 @@
     background-color: var(--surface-hover);
   }
 
-  &:focus-within:not([data-readonly]) [data-slot="switch-control"] {
+  &:not([data-readonly]) [data-slot="switch-input"]:focus-visible ~ [data-slot="switch-control"] {
     border-color: var(--border-focus);
-    box-shadow: 0 0 0 2px var(--surface-focus);
+    box-shadow: var(--shadow-xs-border-focus);
   }
 
   &[data-checked] [data-slot="switch-control"] {
diff --git a/packages/ui/src/components/tabs.css b/packages/ui/src/components/tabs.css
index 56c3e083f..7668c2976 100644
--- a/packages/ui/src/components/tabs.css
+++ b/packages/ui/src/components/tabs.css
@@ -429,6 +429,11 @@
           background-color: var(--surface-raised-base-hover);
         }
 
+        &:has([data-slot="tabs-trigger"]:focus-visible) {
+          background-color: var(--surface-raised-base-hover);
+          box-shadow: var(--shadow-xs-border-focus);
+        }
+
         &:has([data-selected]) {
           background-color: var(--surface-raised-base-active);
           color: var(--text-strong);