From 86942e2c3e210bdcbf7eb16006baa3caea2006cb Mon Sep 17 00:00:00 2001 From: Molecule AI Core-UIUX Date: Sun, 10 May 2026 17:55:49 +0000 Subject: [PATCH] fix(canvas): SearchDialog keyboard focus ring (WCAG 2.4.7) 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 --- canvas/src/components/SearchDialog.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/canvas/src/components/SearchDialog.tsx b/canvas/src/components/SearchDialog.tsx index faea2857..ac6a54eb 100644 --- a/canvas/src/components/SearchDialog.tsx +++ b/canvas/src/components/SearchDialog.tsx @@ -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" }`} >