React Best Practices

Chapter 6 · Practice 3 of 4

Move focus deliberately when content changes

From Accessibility

Why it matters

Keyboard and screen reader users follow focus. When content changes and focus does not, they lose their place.

  • Dialogs: when one opens, focus moves into it and stays there until it closes, then returns to the button that opened it.
  • Client-side navigation: move focus to the new page heading or main region so users know the page changed.
  • Custom widgets: use a ref and call focus() in the event handler that opens them.

Avoid

  • Removing focus outlines with outline: none without a visible replacement