chrome issue with :focus-visible? (shows focus-visible styles on normal mouse focus)

Question

Accordingly to the example on https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible (under basic example), clicking the input with the placeholder ":focus-visible only" with my mouse should not show the orange outline styles – but it does. Caniuse.com tells me, my chrome version supports :focus-visible.

Any hints?

Safari

Answer 1

The working draft spec states that browsers manufacturers are free to choose their own criteria for matching :focus-visible as opposed to just regular old :focus, but the spec does recommend several suggestions to be used as a starting point, including this:

Any element which supports keyboard input (such as an input element...) should always match :focus-visible when focused.

To me, this says that ALL input elements should always match :focus-visible.

In the example that you referenced, you'll notice that the button behavior is as expected. If you click the button with a mouse, it does not match :focus-visible, but if you select it with keyboard navigation, then it does.

Revanche

Ah now I understand why my inputs are still showing an outline even though I'm using this example: css-tricks.com/the-focus-visible-trick – Englishman

Did something change? In the MDN example on Chrome, the CSS is activated no matter if I tab to the element or click it. – Homogamy

My understanding is that it will continue to show focus if you click inside an input or a select, but with something like a button or an HTML link, you shouldn't see the focus ring after clicking on it. That's the point of focus-visible. – Revanche

Answer 2

The css works for me

For desktop

.momsType:focus-visible{
 outline:none!important;
}

For mobile

.momsType:focus{
outline:none!important;

}

Driveway

Definitely not the accessible way of doing it, but this does work for my scenario lol, thanks – Tatter

Please don't hide the focus indicator. It's there for a reason. Take the time to style it well, integrate it with your color-palette, and it won't look terrible. w3.org/WAI/WCAG22/Understanding/focus-visible.html – Revanche