Browser default focus style overrides

[aardrian]

The default focus styles from the browser are generally awful. In the demo, the blue background of the page has a contrast ratio of 1.02:1 to Chrome's default focus ring. Some consider this a WCAG violation, some don't (because it is a browser default). Either way, overriding the browser's default focus styles for something with sufficient contrast and visual appeal is, I think, worth including here.

Since I am not familiar with the project, nor SCSS, I mocked up some styles in regular CSS. I do not know all the color combinations nor customizations that are possible, so I did not initiate a pull request. I am happy to offer more insight if helpful.

The proposed styles:

.switch-light input:focus ~span a, .switch-toggle input:focus + label {
    box-shadow: inset 0 0 0 3px rgba(0,0,0,.5);
    outline: none;
}
.switch-light.switch-material input:focus ~span a {
    box-shadow: none;
    border: 3px solid rgba(0,0,0,.5);
}
.switch-toggle.switch-material input:focus + label {
    box-shadow: none;
    text-decoration: underline;
}

[ghinda]

I see what you mean. The problem is that we need a default that works everywhere, both dark and light backgrounds.

So rgba(0,0,0,.5) does work on the demo/documentation site, but it doesn't work on darker backgrounds.

Still, the blue outline color is only hardcoded in Chrome/webkit/blink. Other browsers get the Highlight color the from the OS: https://github.com/ghinda/css-toggle-switch/blob/master/src/core/shared.scss#L27-L43

I could remove the webkit-specific handling, but that would make the switch focus different from the "standard" webkit focus ring.

The best approach would probably be to have the outline in an invert-background color, but that would still look different than the standard focus outline.

[aardrian]

Ah, I see it now. Interestingly, in Edge, my default focus ring on that page is orange when I remove the keyword, so I can see it on the blue background. The highlight keyword pulls in blue, which hides it.

Either way, relying on system colors or browser defaults is still going to conflict with some page styles, just as my approach will conflict with darker backgrounds.

I think an invert might be better than hoping the system color does not conflict with the page background.

So. Yeah. What can I do?

[ghinda]

To get an inverted-color border we could look at something with filter or mix-blend-mode, depending on browser support, and a pseudo-element that would mimic the outline. I'll try to mock something up soon.

If you can look into it, I'd be happy to take a look and integrate it.