What is :focus-visible and when does it apply?

What is :focus-visible and when does it apply?

• A. It applies only to mouse focus.
• B. It is a vendor-prefixed feature.
• C. It applies when focus is visible due to keyboard navigation; avoids showing focus outlines on mouse interactions.
• D. It applies to all focus states regardless of input method.

Answer: (C)

:focus-visible is a CSS selector that matches elements whose focus should be visibly indicated to the user. It kicks in when the user’s input method makes focus visible—typically when navigating with the keyboard (like pressing Tab or arrow keys)—and it avoids showing the focus outline during mouse interactions. This lets keyboard users see where focus is, while keeping mouse clicks from producing distracting outlines. Why this is the best choice: it captures the behavior designers want—visible focus indicators for keyboard users, but not for mouse clicks. It’s not about vendor prefixes, and it doesn’t apply to every focus state—only when the focus should be visible. A common pattern is to combine it with a general focus style, so keyboard navigation shows a clear ring or outline, while mouse actions don’t show it unnecessarily. In practice, you might style like: button:focus-visible { outline: 2px solid blue; } and rely on the default or "no outline" styles for non-keyboard interactions.

:focus-visible is a CSS selector that matches elements whose focus should be visibly indicated to the user. It kicks in when the user’s input method makes focus visible—typically when navigating with the keyboard (like pressing Tab or arrow keys)—and it avoids showing the focus outline during mouse interactions. This lets keyboard users see where focus is, while keeping mouse clicks from producing distracting outlines.

Why this is the best choice: it captures the behavior designers want—visible focus indicators for keyboard users, but not for mouse clicks. It’s not about vendor prefixes, and it doesn’t apply to every focus state—only when the focus should be visible. A common pattern is to combine it with a general focus style, so keyboard navigation shows a clear ring or outline, while mouse actions don’t show it unnecessarily.

In practice, you might style like: button:focus-visible { outline: 2px solid blue; } and rely on the default or "no outline" styles for non-keyboard interactions.