Skip to content

Rule · Lint

Focus outline removed without a visible replacement

lint/outline-none-no-replacementwarnvoid lintupdated

Why it matters

outline: none / outline-none hides the keyboard focus indicator. Keyboard users lose track of where they are, and it fails WCAG 2.4.7 (Focus Visible).

How to fix it

Pair it with a :focus-visible style (ring, border or shadow), or leave the default outline and only style :focus-visible.

Example

tsx
<input className="outline-none focus-visible:ring-2 focus-visible:ring-(--line-focus) focus-visible:ring-offset-2" />

References

void lint reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.