Removing the focus outline without replacing it
Stripping `outline: none` without a visible replacement makes the interface unusable for keyboard users.
The wrong way
Removing the default browser outline because it "looks ugly" and not replacing it with anything visible.
button:focus,
button:focus-visible {
outline: none;
}Why
Focus outlines are how keyboard users — and many users with motor disabilities — know where they are on the page. Removing them because they spoil a visual is roughly the equivalent of painting over the lane markings on a highway because they ruin the view. WCAG 2.4.7 (Focus Visible) is a Level AA requirement, not a stretch goal. If the default outline doesn't fit your visual style, build a better one. Never strip it without a replacement.
The right way
Replace the default outline with a custom focus ring using design tokens. Use `:focus-visible` so the ring shows up for keyboard navigation but not on mouse clicks.
button:focus-visible {
outline: 2px solid var(--color-border-focus);
outline-offset: 2px;
}