Fix edgecases for Windows high contrast mode

[jasmussen]

Fixes #5244.

This PR makes two changes to how focus and active state styles are rendered, so as to accommodate Windows high contrast mode.

The first is to the Settings button which did not have a focus style, it does now:

The second is for tabs, both the Document & Block tabs, but also the Inserter tabs:

They look unchanged in normal mode:

#5138 also suggests a change to the Publish and Preview buttons, because these do not have a focus style in high contrast mode. I tried to address this, but decided this should be fixed upstream in WordPress, due to this rule that is inherited:

.wp-core-ui .button:active, .wp-core-ui .button:focus {
    outline: 0;
}

While we can override this, it would create technical debt and still benefit only the editor. As such, I would suggest instead that this is addressed as part of https://core.trac.wordpress.org/ticket/41286. Here's a psuedo patch:

.wp-core-ui .button:active, .wp-core-ui .button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

This would result in the following:

[afercia]

Tested. Awesome, thanks! 👍

Note 1: IE11 doesn't support outline-offset but that's really not important, it just means the outline will be a bit bigger:

Note 2: the partially missing top border of the Publish button in Edge is caused by display: inline-flex; in combination with the line-height (no idea why). I may be wrong but seems to me this property is not necessary.

[jasmussen]

Thanks for testing!

Note 1: IE11 doesn't support outline-offset but that's really not important, it just means the outline will be a bit bigger:

Ah, yeah it's still definitely visible, and if it happens to stack it should invert the colors below it. 👍 👍

Note 2: the partially missing top border of the Publish button in Edge is caused by display: inline-flex; in combination with the line-height (no idea why). I may be wrong but seems to me this property is not necessary.

Indeed. I think the partially missing top border is actually the contents of the button getting a black background by Windows, and due to the lineheight that inner content overlaps the button border. What's weird that it's an issue with Publish... and not Preview, and they both use lineheights to center the text in the larger buttons.

I doubt it's the last time I visit high contrast mode, and I doubt it's the last time we revisit the Button component, so let's keep this in mind as we enhance those.