molecule-ai/molecule-core
39
0
Fork 2
Code Issues 38 Pull Requests 28 Actions 5 Packages Projects Releases Wiki Activity

fix(canvas): SearchDialog keyboard focus ring (WCAG 2.4.7)

Browse Source 
Add roving tabindex to result option buttons so keyboard users
see a visible focus ring on the currently selected item. Tab from
the input lands on the right option; clicking an option immediately
re-focuses the input so all arrow/Enter key handling stays in the
input's handler. Applies focus-visible ring (accent) to the selected
listbox option.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Molecule AI · core-uiux 2026-05-10 17:55:49 +00:00 committed by Molecule AI Core-FE
parent 58d1fb2f88
commit 86942e2c3e
1 changed files with 3 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
canvas/src/components/SearchDialog.tsx
View File

@ -144,8 +144,10 @@ export function SearchDialog() {
id={`search-result-${node.id}`}
role="option"
aria-selected={index === focusedIndex}
tabIndex={index === focusedIndex ? 0 : -1}
onClick={() => handleSelect(node.id)}
className={`w-full px-4 py-2.5 flex items-center gap-3 text-left transition-colors ${
onFocus={() => { setFocusedIndex(index); inputRef.current?.focus(); }}
className={`w-full px-4 py-2.5 flex items-center gap-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-surface ${
index === focusedIndex ? "bg-surface-card/60" : "hover:bg-surface-card/40"
}`}
>