Focus Management

Focus management is the practice of deliberately controlling and indicating which interactive element the user is currently on — essential for keyboard navigation. When a user presses Tab, focus moves to the next interactive element in order; as it does, a visual indicator (usually a ring or outline) shows where they are.

In a Design System, focus management is a component concern. Every button, input, link needs a visible focus indicator and sensible tab order. The discipline:

Visible indication: Never remove the focus outline without replacing it with something clearer. outline: none; with no alternate breaks keyboard navigation. The browser's default blue outline is fine if your design system hasn't defined a better one.
Logical tab order: Focus should move in reading order (left to right, top to bottom). Use the native DOM order; don't re-order with CSS or tabindex unless you have a good reason.
Trap prevention: Modal dialogs often "trap" focus so keyboard users can't tab out of them. This is intentional and good. But if focus gets trapped unexpectedly elsewhere, it's a bug.
Focus restoration: If a user opens a modal, closes it, focus should return to the button that opened it.

More advanced: focus management within components. A Menu component manages focus — when open, arrow keys move focus between items, not Tab. The component handles this with JavaScript, listening for keydown events and calling .focus() on the appropriate item. This is necessary for WAI-ARIA widgets to feel native to screen reader and keyboard users.

Testing focus management requires both automated and manual testing. Tools like axe-core can catch missing focus indicators. But only manual testing with a keyboard (or a keyboard simulator) catches confusing focus order or broken component focus.

Related: Focus indicator · Keyboard navigation · WAI-ARIA · WCAG · Accessible design