:focus-visible not respecting the outline-color

[Skil3e]

Not sure if it is intentional but outline-color does not work alone.

A fix i found is to add outline-style : solid; on the theme.css file so it respects the rule.

/* :file src/extra/theme.css */
:focus-visible {
  outline-style : solid;
  outline-color : var(--link);
}

[argyleink]

oh!? which browser did it not work with?
solution seems reasonable but i'd love to understand the problem scenario a bit better first.
thanks for reporting

[Skil3e]

I tried both Chrome and Firefox on windows 10. Both seemed to use their own color until you set the outline-style

[argyleink]

I see! confirmed on MacOS as well that Firefox and Safari don't change the outline color unless outline-style is provided.

big bummer tho:
when you change the outline-style, the automatic border-radius matching goes away and we're back to square cornered outlines.. it appears there's a cross browser interop issue with this feature. i'm going to get this on our interop teams radar and see if we can resolve it in Safari and Firefox.

[argyleink]

Oh, and I see you're saying Chrome on Windows also fails at this, which it works as expected in Chrome on MacOS. Definitely a browser interop issue imo. Will report back here as I learn more.

[WebMechanic]

when you change the outline-style, the automatic border-radius matching goes away

This is Firefox and Chrome (Win) outline-style: dashed, the inner gray line is the border.

Safari has/had issue with outline + border radius so we "fake" them there with multiple box-shadow (solid lines only though). We need to support mobile SF13 :(