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

This commit is contained in:
Joseph Campuzano
2026-02-09 09:12:06 -06:00
committed by GitHub
parent 05355a6b5c
commit 373b2270e7
5 changed files with 12 additions and 5 deletions

View File

@@ -79,9 +79,9 @@
background-color: var(--surface-hover); 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); 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"], &[data-checked] [data-slot="checkbox-checkbox-control"],

View File

@@ -32,6 +32,7 @@
/* } */ /* } */
&:focus-visible { &:focus-visible {
outline: none; outline: none;
background-color: var(--surface-raised-base-hover);
} }
&[data-disabled] { &[data-disabled] {
cursor: not-allowed; cursor: not-allowed;
@@ -70,6 +71,7 @@
/* } */ /* } */
&:focus-visible { &:focus-visible {
outline: none; outline: none;
background-color: var(--surface-raised-base-hover);
} }
&[data-disabled] { &[data-disabled] {
cursor: not-allowed; cursor: not-allowed;

View File

@@ -82,7 +82,7 @@
box-shadow: var(--shadow-xs-border-base); box-shadow: var(--shadow-xs-border-base);
} }
&:not([data-expanded]):focus { &:not([data-expanded]):not(:focus-visible):focus {
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
} }

View File

@@ -86,9 +86,9 @@
background-color: var(--surface-hover); 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); 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"] { &[data-checked] [data-slot="switch-control"] {

View File

@@ -429,6 +429,11 @@
background-color: var(--surface-raised-base-hover); 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]) { &:has([data-selected]) {
background-color: var(--surface-raised-base-active); background-color: var(--surface-raised-base-active);
color: var(--text-strong); color: var(--text-strong);