Removing default focus styling requires an alternative
Aliases: focus-visible · outline none · custom focus style · focus replacement
What it is
A custom focus indicator is a visible, functionally equivalent replacement when browser or platform focus appearance is removed. A default outline may not fit a brand, but it performs the basic task of locating the next keyboard target. Setting outline: none is not cosmetic cleanup: without a replacement it deletes an interaction state. The alternative must appear for keyboard focus, not merely after mouse clicks, hovering, or a component’s loosely defined “active” state.
Why it happens
Default rendering is applied broadly across native elements and system settings. Custom styling is often dispersed among resets, component libraries, and local rules, so links, third-party controls, embeds, dynamically created elements, and exceptional states are easily missed. A subtler error confuses :focus with :focus-visible: pointer-click policy may differ, but focus reached through keyboard movement cannot disappear. Once default behavior is overridden, the product assumes responsibility for preserving visibility across components, themes, and input modes.
Studying it
Use static scanning to locate outline removal and focus overrides, then run keyboard end-to-end tests across component types, routes, and state combinations. Include native and custom controls, dialogs, validation errors, re-enabled fields, asynchronous inserts, dark themes, forced colors, and zoom. A scan confirms a declaration, not its rendered replacement; testers must recognize every target without a mouse. Focus regressions are especially likely when a library adds a component or upgrades a dependency.
Where it stops holding
Mouse and keyboard interaction need not share identical focus appearance; pointer-click focus can have a different policy if it does not erase the keyboard path. Nonfocusable elements should not receive fake rings. If a platform-native control already has a reliable, appropriate indicator, retaining it is often better than gratuitous redraw. Customization is not an aesthetic obligation; it is an engineering commitment justified only when equivalent capability can be maintained.
Applying it
- Prohibit outline removal without a linked keyboard-visible replacement in resets and component rules.
- Treat focus appearance as a component contract; test links, buttons, inputs, composites, and embedded controls, not only primary buttons.
- Verify keyboard navigation and pointer click separately, ensuring the latter’s visual policy cannot affect the former.
- Run keyboard regression under browsers, themes, forced colors, zoom, and dynamic-state changes. A component returning to no visible indicator should block release.