sorokin.oleg.edu/learnharness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

fix: kill the UA blue focus outline on question rows (owner round 4)

Browse Source 
Tab/arrow focus on quiz/question option buttons and the don't-know row
showed Chromium's default focus ring — the abandoned look. outline-none
on the row buttons keeps the walk ring (bg-accent/40) as the only focus
indicator, so the appearance is identical before and after Tab.
This commit is contained in:
amosblomqvist
2026-09-18 08:41:36 +03:00
parent ab5d5da9fb
commit 76ea6f5a53
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/question-dock.tsx
+3 -3
View File
@@ -426,7 +426,7 @@ function QuestionDockForm({
data-kbdrow={i} data-kbdrow={i}
onClick={() => toggle(i)} onClick={() => toggle(i)}
className={cn( className={cn(
"flex items-start gap-3 rounded-lg border px-3 py-2 text-left text-sm transition-colors", "flex items-start gap-3 rounded-lg border px-3 py-2 text-left text-sm outline-none transition-colors",
isSel ? "border-primary bg-accent" : "hover:bg-accent/50", isSel ? "border-primary bg-accent" : "hover:bg-accent/50",
i === kbdIdx && !isSel && "ring-1 ring-border bg-accent/40", i === kbdIdx && !isSel && "ring-1 ring-border bg-accent/40",
)} )}
@@ -467,7 +467,7 @@ function QuestionDockForm({
className={cn( className={cn(
// Option-row layout + radio circle (owner); the dashed // Option-row layout + radio circle (owner); the dashed
// outline stays — this is the deliberate non-answer. // outline stays — this is the deliberate non-answer.
"flex items-start gap-3 rounded-lg border border-dashed px-3 py-2 text-left text-sm transition-colors", "flex items-start gap-3 rounded-lg border border-dashed px-3 py-2 text-left text-sm outline-none transition-colors",
sel.dontKnow ? "border-primary text-foreground" : "text-muted-foreground", sel.dontKnow ? "border-primary text-foreground" : "text-muted-foreground",
kbdIdx === optionCount && !sel.dontKnow && "ring-1 ring-border bg-accent/40", kbdIdx === optionCount && !sel.dontKnow && "ring-1 ring-border bg-accent/40",
)} )}
@@ -494,7 +494,7 @@ function QuestionDockForm({
data-kbdrow={optionCount} data-kbdrow={optionCount}
onClick={selectOther} onClick={selectOther}
className={cn( className={cn(
"flex items-start gap-3 rounded-lg border px-3 py-2 text-left text-sm transition-colors", "flex items-start gap-3 rounded-lg border px-3 py-2 text-left text-sm outline-none transition-colors",
sel.otherSelected ? "border-primary bg-accent" : "border-dashed hover:bg-accent/50", sel.otherSelected ? "border-primary bg-accent" : "border-dashed hover:bg-accent/50",
kbdIdx === optionCount && !sel.otherSelected && "ring-1 ring-border bg-accent/40", kbdIdx === optionCount && !sel.otherSelected && "ring-1 ring-border bg-accent/40",
)} )}