Accessibility/CSS: Add missing focus indicators

vdavid · vdavid · commit 1792216b9181 · 2026-03-18T13:19:25.000+01:00
- Add `:focus` rules with `border-color` + `box-shadow` to `SearchDialog` inputs (`.name-input`, `.filter-select`, `.filter-input`) and `CommandPalette` search input - Change `.name-input` from `border: none` to `border: 1px solid transparent` so the focus border is visible - Document focus indicator pattern in `design-system.md`: standard input pattern, element-type table, `:focus` vs `:focus-visible` rationale - Update app rule #6 to reference the new focus indicators section
diff --git a/apps/desktop/src/lib/command-palette/CommandPalette.svelte b/apps/desktop/src/lib/command-palette/CommandPalette.svelte
@@ -231,6 +231,11 @@
         flex-shrink: 0;
     }
 
+    .search-input:focus {
+        border-bottom-color: var(--color-accent);
+        box-shadow: var(--shadow-focus);
+    }
+
     .search-input::placeholder {
         color: var(--color-text-tertiary);
     }
diff --git a/apps/desktop/src/lib/search/SearchDialog.svelte b/apps/desktop/src/lib/search/SearchDialog.svelte
@@ -866,13 +866,18 @@
     .name-input {
         flex: 1;
         font-size: var(--font-size-md);
-        border: none;
+        border: 1px solid transparent;
         background: transparent;
         color: var(--color-text-primary);
         outline: none;
         min-width: 0;
     }
 
+    .name-input:focus {
+        border-color: var(--color-accent);
+        box-shadow: var(--shadow-focus);
+    }
+
     .name-input::placeholder {
         color: var(--color-text-tertiary);
     }
@@ -985,6 +990,11 @@
         outline: none;
     }
 
+    .filter-select:focus {
+        border-color: var(--color-accent);
+        box-shadow: var(--shadow-focus);
+    }
+
     .filter-input {
         font-size: var(--font-size-sm);
         /* stylelint-disable-next-line declaration-property-value-disallowed-list */
@@ -996,6 +1006,11 @@
         outline: none;
     }
 
+    .filter-input:focus {
+        border-color: var(--color-accent);
+        box-shadow: var(--shadow-focus);
+    }
+
     .size-input {
         width: 70px;
     }
diff --git a/docs/design-system.md b/docs/design-system.md
@@ -336,6 +336,26 @@ opacity fade.
 
 ## Component patterns
 
+### Focus indicators (app)
+
+Every interactive element needs a visible focus indicator. This is a keyboard-driven app, so all focus must be visible
+(use `:focus`, not `:focus-visible`, for inputs).
+
+| Element type | How focus is handled |
+|---|---|
+| Buttons | Global `button:focus-visible` rule in `app.css` — automatic, no per-component work needed |
+| Inputs, selects, textareas | Each component provides its own `:focus` rule: `border-color: var(--color-accent); box-shadow: var(--shadow-focus);` |
+| File list containers (BriefList, FullList) | Cursor/selection highlight serves as the focus indicator. `outline: none` is intentional |
+| Non-interactive containers (`<div>` without tabindex, or tabindex=-1) | May use `outline: none` freely — no focus indicator needed |
+
+**Standard pattern for inputs:** Set `outline: none` on the base selector, then pair it with a `:focus` rule that
+applies `border-color: var(--color-accent)` and `box-shadow: var(--shadow-focus)`. If the element has `border: none`,
+add `border: 1px solid transparent` to the base so the border-color change is visible on focus.
+
+**Why `:focus` instead of `:focus-visible`:** Browsers only apply `:focus-visible` to keyboard-initiated focus, hiding
+the ring on click. In a keyboard-first file manager, users constantly switch between mouse and keyboard mid-action —
+hiding the indicator on click would make the currently focused element invisible when they reach for the keyboard.
+
 ### File list (app — the primary surface)
 
 The file list is what users see 90% of the time. Every other component is secondary.
@@ -535,7 +555,7 @@ Auto-dismiss after 4 seconds. Close button on hover.
 3. All spacing via `--spacing-*` tokens. Never use arbitrary px values.
 4. Accent color is dynamic — never assume it's blue. Derive hover/subtle variants with `color-mix()`.
 5. Transitions default to `var(--transition-base)`. Only `--transition-fast` or `--transition-slow` with justification.
-6. Focus ring on every interactive element via `:focus-visible`. No bare `outline: none`.
+6. Focus indicator on every interactive element. No bare `outline: none` — see "Focus indicators" under Component patterns.
 7. `prefers-reduced-motion` wraps all non-essential animation.
 8. Scrollbars stay native. Never style `::-webkit-scrollbar`.
 

Original file line number	Diff line number	Diff line change
`@@ -231,6 +231,11 @@`
`231`	`231`	`flex-shrink: 0;`
`232`	`232`	`}`
`233`	`233`
	`234`	`+ .search-input:focus {`
	`235`	`+ border-bottom-color: var(--color-accent);`
	`236`	`+ box-shadow: var(--shadow-focus);`
	`237`	`+ }`
	`238`	`+`
`234`	`239`	`.search-input::placeholder {`
`235`	`240`	`color: var(--color-text-tertiary);`
`236`	`241`	`}`