User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:82.0) Gecko/20100101 Firefox/82.0

Steps to reproduce:

Created a link with a background color and contrasting white text color as part of styles that apply the same appearance to links and buttons. See this codepen for a live example: https://codepen.io/diminutivesloop/pen/XWKOxLd

Actual results:

When the link is placed on a white or other light-colored background the focus outline is invisible. This is inconsistent with the default outline style for buttons which dynamically adjusts the outline color to contrast with the background.

Expected results:

The default outline styles for links should match those for buttons so that developers don't inadvertently create links that are inaccessible to keyboard users.

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

The reason why button and a are different are because of this chunk of code. That is, button is using outline-style: auto by default, while other elements just use a dotted outline, using the initial outline color, which is currentColor, and thus white in this case.

So it's not clear to me what's the best course of action here. It seems WebKit / Blink use outline-style: auto for all focusrings by default... We could try to do that, I guess.

But using outline-style: auto feels wrong, and doesn't help when the auto-style color is the color of the background...

And since auto-style outlines depend on the platform it's yet another issue that's hard to test for developers across platforms, which would be a bit annoying.

The severity field is not set for this bug.
:jwatt, could you have a look please?

For more information, please visit auto_nag documentation.

The severity field for this bug is set to S3. However, the accessibility severity is higher, [access-s2].
:emilio, could you consider increasing the severity?

For more information, please visit auto_nag documentation.

Bug 1759602 enabled outline-style: auto everywhere by default. Other bugs track further improvements. That outline color can be customized via accent-color.