Try/windows high contrast support

[jasmussen]

Add support for Windows High Contrast Mode, by changing focus styles from using box-shadow to using borders and outlines. Fixes #4297.

Visually there shouldn't be any difference between this branch and master. But because borders take up space and change metrics, a lot of gymnastics had to be done so buttons kept their same footprint as before. As such, it is not unlikely I missed some buttons/styles in the process of doing this. As such, this PR needs a fair bit of testing.

Things to look for include buttons or elements that are suddenly smaller than before, or indeed bigger than before.

Some screenshots:

[jasmussen]

Pushed another tweak to these, to make the focus style dotted in menu items:

This starts to address parts of #4871.

[mtias]

I like the treatment within menus as it seems clearer it's not an active / off state.

[afercia]

@jasmussen thanks for trying this. I've just tested on Windows High Contrast mode with IE 11 and Edge, and unfortunately the transparent border is always visible, so everything appears "bordered" both in a normal and focused state with no apparent difference. See also the original comment by the Simply Accessible team on #1562 (comment)

[jasmussen]

Okay, I believe I handled the issue by using paddings instead of transparent borders. Not quite as clean, but let's start by testing if this solves the issue.

[jasmussen]

@afercia any thoughts? I would appreciate if you could test this again for me, see if it addresses the issue. Thank you.

[afercia]

@jasmussen seems a good improvement 🙂 with some edge cases.

Initial state: borders are correctly not visible (there are no transparent borders now, right?):

Focus on the top bar controls works nicely (the tooltip arrow is a bit weird though):

On other Gutenberg UI controls, focus is sometimes barely visible. For example, the focused sidebar panel can be distinguished just because it gets a dotted border (I guess it's the default outline?):

Instead, on other controls focus is still not visible, and that's the case of controls that inherit the focus stye from the core CSS, which uses only box-shadow. For example:

• Publish button: focus not visible
• Some "links" like visibility "Public" or the publish date: focus not visible

Last thing I've noticed: the "Move to trash" button "jumps" on focus.

[jasmussen]

Thank you all for the feedback, especially the screenshots, Andrea.

I was on vacation last week, and before that I didn't merge this in because I never felt comfortable with the hacks I had to perform to get this to work. I had hoped I could offset some of the complexity with SCSS math and mixins, but it just remains too complex. So I've thought about alternate approaches during this week, and came up with quite a few. In particular, this approach I think would work for us:

https://codepen.io/joen/pen/mXXbOR

The benefit to that approach is that it allows us to continue using box-shadow for the visual styling of the button. We then leverage the fact that even transparent outlines show up in high contrast mode, allowing us to not only create extra thick focus outlines for that use case, but it maps out an approach that lets us tailor the visual styles for high contrast modes without affecting the buttom markup, yet lets us address your subsequent points in a better way.

Here's stock focus:

Here's high contrast focus:

This seems like the best approach because it allows us extra thick and very visually distinct focus outlines, like the rest of the system has in this mode, all the while working in both Edge and Firefox.

As such I'm going to take a new stab at this one. Thanks again for the help.

[jasmussen]

Closing this in favor of #5138.