fix: restore keyboard focus indicators on links, tabs, and inputs
commit
6a5dfe4fix: restore keyboard focus indicators on links, tabs, and inputs
Three input rules cleared the default focus outline entirely and relied on a border-color change alone, and nothing gave links, tabs, or clickable rows any focus treatment at all, leaving keyboard navigation with no visible position. A theme-colored focus-visible outline now applies to links, buttons, and form fields alike, and the input rules keep their border-color highlight alongside it instead of suppressing the outline.
Assisted-by: Claude:claude-sonnet-5
Reviews
No reviews of this commit yet — record a verdict below.
Start a review
crates/git-ents-server/src/web/style.css
@@ -69,6 +69,7 @@
}
a { color: var(--color-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-link) 25%, transparent); text-underline-offset: 2px; transition: color .15s, text-decoration-color .15s; }
a:hover { color: var(--color-link-hover); text-decoration-color: currentColor; }
+a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; }
.icon { flex-shrink: 0; fill: currentColor; vertical-align: -0.125em; }
/* Controls that are not wired up yet read as muted and non-interactive. */
@@ -85,7 +86,7 @@
.nav-search { flex: 1; max-width: 24rem; margin: 0 auto; position: relative; display: flex; align-items: center; }
.nav-search .icon { position: absolute; left: .65rem; color: var(--color-text-muted); pointer-events: none; }
.nav-search input { width: 100%; font-family: var(--font-sans); font-size: .82rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .42rem .7rem .42rem 2rem; transition: border-color .15s; }
-.nav-search input:focus { outline: none; border-color: var(--color-accent); }
+.nav-search input:focus { border-color: var(--color-accent); }
.nav-search:has(input:disabled) { opacity: .55; }
.nav-search:has(input:disabled) input { opacity: 1; }
@@ -334,7 +335,7 @@
.filter-search { flex: 1; min-width: 14rem; position: relative; display: flex; align-items: center; }
.filter-search .icon { position: absolute; left: .65rem; color: var(--color-text-muted); }
.filter-search input { width: 100%; font-family: var(--font-sans); font-size: .85rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .42rem .7rem .42rem 2rem; }
-.filter-search input:focus { outline: none; border-color: var(--color-accent); }
+.filter-search input:focus { border-color: var(--color-accent); }
.filter-search:has(input:disabled) { opacity: .55; }
.filter-search:has(input:disabled) input { opacity: 1; }
.chip { font-family: var(--font-mono); font-size: .76rem; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: .2rem .7rem; cursor: default; }
@@ -390,7 +391,7 @@
.edit-form { display: flex; flex-direction: column; gap: .4rem; max-width: 40rem; }
.edit-form label { font-family: var(--font-sans); font-size: .82rem; font-weight: 600; color: var(--color-text-muted); }
.edit-form input, .edit-form textarea, .inline-edit input { font-family: var(--font-mono); font-size: .85rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .42rem .7rem; }
-.edit-form input:focus, .edit-form textarea:focus, .inline-edit input:focus { outline: none; border-color: var(--color-accent); }
+.edit-form input:focus, .edit-form textarea:focus, .inline-edit input:focus { border-color: var(--color-accent); }
.edit-form textarea { resize: vertical; }
.edit-form .btn { align-self: flex-start; }
.inline-edit { display: flex; gap: .5rem; flex: 1; align-items: center; }