A designer dislikes focus rings appearing when buttons are clicked with a mouse. What is the best fix?

The :focus-visible option is right. :focus-visible matches only when the browser decides a focus ring should show. That is usually during keyboard navigation, but not when a mouse clicks a button. So mouse users see no ring, and keyboard users still do.

*:focus { outline: none; } is the tempting wrong answer. It removes the ring for everyone, so keyboard users can't see where they are on the page. That fails the focus-visible rule in WCAG (Web Content Accessibility Guidelines). Adding tabindex="-1" and calling blur() are also wrong, because both break focus for keyboard users.