Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Browser default focus style overrides #61

Open
aardrian opened this issue Sep 24, 2017 · 3 comments
Open

Browser default focus style overrides #61

aardrian opened this issue Sep 24, 2017 · 3 comments

Comments

@aardrian
Copy link

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
Copy link
Owner

ghinda commented Sep 25, 2017

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
Copy link
Author

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
Copy link
Owner

ghinda commented Sep 29, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants