fix(ui): Keep focus rings off text fields regardless of role

Search Everywhere's query input carries role="combobox", so the global
focus-ring rule drew an outline inside its frame. Text inputs are now
excluded from that rule, and the selector list uses :where() so its
specificity matches a bare :focus-visible and component focus styles
always take precedence.
Цей коміт міститься в:
l0ng-ai committed 2026-10-27 20:43:51 +08:00
1 джерело 8568ff001b
коміт 9258185517
1 file changed
+11 -2
+11 -2
Переглянути файл
@@ -96,11 +96,13 @@ a:hover {
/* Focus rings mark controls only, as in IDEA: lists, trees, tables, menus, popups and other
focusable containers show focus through their selected row instead of a frame. Text fields
aren't listed: their frame shows focus, and an outline here draws a second box inside it. */
never get one, whatever their role (a search box is a combobox): their frame shows focus, and
an outline here draws a second box inside it. `:where` keeps this at the specificity of a bare
`:focus-visible`, so a component's own focus style always wins. */
:focus-visible {
outline: none;
}
:is(
:where(
button,
a[href],
input:is([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"]),
@@ -115,6 +117,13 @@ a:hover {
[role="combobox"],
[role="slider"],
[role="spinbutton"]
):not(
:where(
input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"]),
textarea,
[contenteditable="true"],
[contenteditable=""]
)
):focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: -2px;