Is the change of outline-offset, on pressing any keyboard key on anchor tag, the expected behaviour?

Question

In the following demo, click and hold the mousedown on the anchor tag, then drag your cursor away, while holding mousedown, and then finally let go of the click. You will see a red dotted outline around the anchor tag. Now if you press shift key the outline will get offset by a few pixels.

a:focus {
  outline: 1px dotted red;
}

<a href="#">Click+hold, then release, then press shift key</a>

The behaviour doesn't occur on pressing ctrl or fn keys etc, but does happen for most keys. This behaviour seems to be cross browser compatible, which leads me to ponder:

• Is it a bug in the implementation of HTML by the browsers?
• Or, is it the expected behaviour suggested by w3.org for some user experience issues?

Answer 1

By clicking an element and then pressing Shift, as you said, or in some other situations determined via heuristics, you are triggering both :focus and :focus-visible states. Browser will then apply its default styles for these states.

The result you are reporting can be reproducted in Chrome because of its default user agent stylesheet, but not in Firefox, for example. You can test this on your own by opening DevTools and forcing the states of the a element.

The following example reproduces Blink (Chrome's rendering engine) default styles so it can be seen in other browsers:

a:focus {
  outline: 1px dotted red;
}

a:any-link:focus-visible {
  outline-offset: 1px;
}

/* for non-Blink WebKit browsers */
a:-webkit-any-link:focus-visible {
  outline-offset: 1px;
}

<a href="#">Example link</a>

<!-- To see the result described in the question for sure, 
     please force :focus and :focus-visible states using DevTools -->