Accessible Routing with React


What is focus?

According to the Google Developer's Definition

Focus refers to which control on the screen (an input item such as a field, checkbox, button, or link) currently receives input from the keyboard, and from the clipboard when you paste content.

Technically, focus is a state. But the non-technical defintion as a noun is "the center of interest or activity". The definition as a verb as used in "focus on" is to "pay particular attention to".

When a element gains focus, ALL users should pay attention to it.

Focus Management

Focus management is the practice of making users pay attention to certain elements at certain times to

  1. Prevent confusion
  2. Direct users to newly added content they may not have noticed

single-page application (SPA)

A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.



Just like everything else in programming, it is a good idea to have things be modular, compact, and self-contained. React extends that well-worn idea to how we should think about user interfaces as well. Many of React's core APIs revolve around making it easier to create smaller visual components that can later be composed with other visual components to make larger and more complex visual components...kinda like Russian Matroshka dolls:

React Components Example without Routing


React Routing