Remove forced default focus outline

[patrickhlauke]

the current outline: thin dotted that is forced as "default" is not in fact default in Firefox/OS X; forcing it leads to unsightly dotted outline that's non-standard for the browser/platform.

removing it seems to have no adverse effect in other all situations where this mixin is used (buttons, scaffolding for general link styles, and the case of forms). attempted to use outline: initial at first, but this seems somehow broken in Firefox (ends up removing standard Firefox dotted outline on links).

This is mostly a bug-fix, rather than a new feature (hence targetting it for v3)

Closes #19933

[patrickhlauke]

/cc @cvrebert @mdo for review. related to #19708 (which is v4)

[cvrebert]

Any adverse effect on IE or Win Firefox?

[patrickhlauke]

will post some screenshots in a bit, but generally: no adverse effect (though subtly different, checkboxes, tabs - in navs - etc all still have a good focus indication)

[patrickhlauke]

some before/after shots.

for IE11, removing that explicit outline effectively brings the outline back to its natural look (i.e. links, buttons and checkboxes do have that particular outline normally)

for Firefox/Windows, the notable change is that <button> elements now have no forced outline - however, this is in line with general Firefox behavior once a particular :focus style has been set (FX won't show default dotted outline - though it would show an inner dotted outline around the actual text, which is suppressed by normalize.css). I'd argue it's still distinctive enough, though could be stronger...

[patrickhlauke]

@mdo @cvrebert thoughts on this?

[cvrebert]

Ported to v4 in #20275.