Anti-pattern · Accessibility · High
Removed Focus Ring
A removed focus ring is outline: none applied without a replacement indicator, which makes the interface unusable by keyboard.
The tell
outline: none or outline: 0 in the stylesheet with no :focus-visible rule replacing it.
Why it happens
The default browser ring clashes with custom control shapes, so models strip it. Most generated CSS never adds the replacement.
The rule
Replace, never remove: a 2px accent ring at 2px offset, on :focus-visible only.
- Delete every bare outline: none that has no companion :focus-visible rule.
- Add a 2px ring in the accent colour with outline-offset of 2px.
- Scope it to :focus-visible so mouse clicks stay clean.
What is a Removed Focus Ring?
outline: none is the most common accessibility regression in generated code, and it is usually added for the right reason — the default ring is ugly on a rounded control. The fix is not to remove it but to replace it: a 2px offset ring in the accent colour, shown only for :focus-visible. Tab through the page; if you cannot tell where you are, neither can anyone else.
Paste this after your existing prompt to strip the pattern from the result.