Keyboard and Focus in Dynamic Chat UIs
Explore how to manage keyboard focus and accessibility in dynamic chat UIs where content streams live. Learn to keep focus stable during text generation, ensure predictable keyboard navigation, properly handle Stop and Regenerate controls, and prevent keyboard traps. This lesson helps you create accessible interfaces that announce updates without disrupting typing or navigation, improving user experience in generative chat features.
Live regions solve what gets announced. The remaining gap is where keyboard focus actually sits while all of this is happening. A common failure in streaming chat UIs starts mid-sentence. The user is typing in the composer, presses Enter to send, and the transcript begins to stream tokens, but focus jumps into the transcript or onto a newly inserted element. Now Tab no longer reaches the Stop control predictably, and Shift+Tab does not return to the input because the transcript keeps adding focusable nodes.
That symptom comes from mixing two responsibilities. Content updates can happen continuously, but focus should stay owned by the place where the user is acting. A dynamic update must not move focus unless the user asked for navigation, such as tabbing to a control or clicking into the transcript.
Focus ownership as a state contract
Once the UI streams, the only way to keep it operable is to treat focus behavior as an explicit contract tied to state, not as a side effect of rerendering. While generating, the composer remains the default focus owner because keystrokes ...