Comparison
:focus-visiblevsTab order
:focus-visible
the outline appears when you tab to the button and not when you click it.
A pseudo-class matching only when the browser judges a focus indicator should be shown, which in practice means keyboard focus rather than mouse clicks. It resolves the old argument that led designers to remove focus outlines entirely and made keyboard use impossible. Removing the default outline is only acceptable if something with sufficient contrast replaces it.
Full entry →Tab order
you tabbed through the form and the order jumped around because a CSS grid had reordered the fields visually.
The sequence in which focusable elements receive focus, which follows DOM order, not visual order. `tabindex="0"` puts a non-focusable element into that order and `-1` makes it focusable only by script; any positive value jumps the queue and reliably breaks it. Flexbox `order` and grid placement change what you see without changing the order you tab through, which is the most common way this goes wrong.
Full entry →