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

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"],

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;

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

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"] {

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