Gutenberg: Switch toggles focus style

[afercia]

It would be great to have some design idea for the switch toggles focus style:

/cc @jasmussen @melchoyce 🙂

[jasmussen]

I actually tried adding a focus style to this a while back, and it seems like the way it's built it's hard to add such a thing :|

That doesn't mean it can't be done. It just means _I_ couldn't get it done. But if we can't do it ever, we might want to look at an alternative.

The reason I like the switch as a form element is that it not only implies something is being toggled, but that the choice is also _saved_ right then and there. Contrast to a checkbox, which is usually accompanied by a "Save Changes" button.

Given we can add a focus style to this switch, I like how Bear app does it:

[afercia]

At Yoast, we use a similar UI control and we've implemented the focus style around the "knob" (built with two inner box-shadows). That's facilitated by the fact "our" toggle knob is a bit bigger, not sure a similar solution would fit the case of the Gutenberg switch toggle. Posting here for inspiration 🙂

[jasmussen]

I dig it. The visual style is less important, so long as we can add focus rectangles. Do you happen to have some markup we can look at? Thank you!

[afercia]

Markup no :) The CSS in our case is something like:

box-shadow:
    inset 0 0 0 1px #fff,
    0 0 0 1px #5b9dd9,
    0 0 2px 1px rgba(30, 140, 190, .8);

but this would beed to be adjusted, also because in the Gutenberg switch the background color becomes blue when active. The basic idea is:

• the first, inner shadow adds a white ring without increasing the knob size (needs a different color when active?)
• the other two box-shadows mimic the standard focus style (but also in this case they won't be visible when the background is blue)

[dpersing]

Hi all!

For focus states, I'd consider using a style other than box-shadow because it doesn't display correctly for low vision users relying on Windows High Contrast themes. High Contrast generally replaces default text and border colors and strips out background colors and shadows. Additionally, it displays background images in Edge only. Using a transparent border can make elements that rely on background color visible in High Contrast, but you'd still want an additional style, such as an upgraded outline, on focus, so that users can see the difference.

My coworker Joe made a Codepen demonstrating how box-shadow is removed in High Contrast. Here are a couple of screenshots showing the difference with and without the transparent border as well.

You can try out High Contrast by opening up the Windows display settings!

[afercia]

Hm, I'm afraid the High Contrast mode issue is something that hasn't been addressed in WordPress yet. Almost all focusable elements in the admin use box-shadow for the focus style. In Windows High Contrast mode there's basically no focus indication at all 😞 macOS instead seems to apply some outline.
It is indeed something to address at a broader level and I'd propose to discuss it in the next a11y weekly meeting happening tomorrow (July 10) at 17:00 UTC on Slack #accessibility . @dpersing do feel free to join! Any feedback and help more than welcome.

[dpersing]

@afercia Sounds great! Looking forward to joining today.

[afercia]

Worth noting support for Windows High Contrast Mode is also mentioned in the initial accessibility recommendation issue, see point 5. in #297

[afercia]

I've played a bit with this. By changing the :after CSS generated pseudo element to a <span> we can easily target it when the input is focused using just CSS: input:focus + span.
At this point we can apply any style, and we can also distinguish between the checked/not checked state. Just needs some design feedback. @jasmussen

Just as an example, not pretending these should be the final styles, I've tried to use some borders. Only the last style uses a border + box-shadow:

Maybe worth experimenting a bit inverting background/border colors.

[afercia]

Experimenting: normal, normal focused / checked, checked focused: