a11y/focus-visible

Why

Keyboard users see where they are only through the focus indicator. outline: none on :focus with nothing in its place leaves them lost on the page.

Fix

Style :focus-visible instead of removing focus styles: button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }. If the design needs no ring for mouse clicks, :focus:not(:focus-visible) { outline: none; } is acceptable. With Tailwind, pair outline-none with a focus-visible:ring-* or focus-visible:outline-* class.

Examples

/* bad */
button:focus { outline: none; }
/* good */
button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

Sources

• WCAG 2.2, Understanding SC 2.4.7 Focus Visible
• MDN, the :focus-visible pseudo-class
• Tailwind CSS, outline-style (outline-hidden and outline-none)

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/focus-visible