I think there’s a difference here between keyboard inputs and other focusable elements. I think
<input>s (of type ‘text’) and
<textareas>s should have a focus outline no matter what — as in the codepen example.
But a focus ring around a button or hyperlink is unnecessary for users that aren’t using the keyboard to navigate. What purpose would that serve?