Re: Possible new CSS to allow two color focus rings.

Hi David,

Sorry for the delay, looping back to this.

Regardless of the CSS border-spec, it is already possible to create multi-coloured focus styles using box-shadow. On its own, box-shadow can be used to create multiple “borders” that don’t affect layout, or in combination with an outline/border.

Box shadow is well supported [1], and can be used to create hard looking lines/borders as well as semi-transparent ones usually associated with ‘shadows’ [2].

For example, this creates 2 px solid yellow line, then a 2px solid blue line, then a 4px yellow halo effect:
box-shadow: 0 0 0 2px #F9F9D1, 0 0 0 4px #396196, 0 0 4px 8px #F9F9D1;


> The idea of adding it to something like stylish, starts to blur the lines between author responsibility and user responsibility and browser responsibility.

That’s already blurry!

An important aspect is that *if* the user can apply something via the browser, it works better than what the author can currently achieve. The browser has heuristics that prevent the outline showing when things are clicked, which unless you (the author) want to rely on a polyfill [3].

Until :focus-visible is standardised and widely supported, the polyfil is needed as focus-visible doesn’t work as an enhancement, it replaces :focus [4].

There are other work arounds, such as:
a.specific-class:focus:hover { outline: none; }

But when I looked at the browser behaviour, it is not consistent *except* in the case of not touching outline [5].

To summarise: We can and should have a technique for applying a focus style with multiple colours, but it is also something that should be user-controllable as well.

Cheers,

-Alastair

1] https://caniuse.com/#feat=css-boxshadow

2] https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

3] https://github.com/WICG/focus-visible

4] https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/

5] https://alastairc.ac/tests/focus-on-click.html



From: David MacDonald <david@can-adapt.com>
Date: Thursday, 12 July 2018 at 11:58
To: Alastair Campbell <acampbell@nomensa.com>
Cc: WCAG group <w3c-wai-gl@w3.org>
Subject: Re: Possible new CSS to allow two color focus rings.

I think that technique is discussed in the CSS thread.

https://github.com/w3c/csswg-drafts/issues/1172


The idea of adding it to something like stylish, starts to blur the lines between author responsibility and user responsibility and browser responsibility.

I can hear the dev community asking themselves "why do I have to do implement this across my site for all users if an end user can just install a plugin to get what they need, and when a browser can easily make this a setting?"

Should we be rolling this into the category of "don't interfere with user overriding the focus indicator?" Instead of "make the focus indicator have sufficient contrast?" in Silver?

Cheers,
David MacDonald



CanAdapt Solutions Inc.
Mobile:  613.806.9005

LinkedIn
<http://www.linkedin.com/in/davidmacdonald100>

twitter.com/davidmacd<http://twitter.com/davidmacd>

GitHub<https://github.com/DavidMacDonald>

www.Can-Adapt.com<http://www.can-adapt.com/>



  Adapting the web to all users
            Including those with disabilities

If you are not the intended recipient, please review our privacy policy<http://www.davidmacd.com/disclaimer.html>

On Thu, Jul 12, 2018 at 3:32 AM, Alastair Campbell <acampbell@nomensa.com<mailto:acampbell@nomensa.com>> wrote:
Hi David,

That’s interesting, I’ll dig in soon. Is that aimed at improving the authoring styles, or the browser default? I’m guessing the former.

Worth noting that there are other options as well, I’ve been experimenting with user-side styles that use box-shadow, which is quite flexible.

https://gist.github.com/alastc/dd2104fd8786c47a550dd9875bd4dc10


*:-moz-focusring {
    outline: 0 !important;
    box-shadow: 0 0 0 2px #F9F9D1, 0 0 0 4px #396196, 0 0 4px 8px #F9F9D1 !important;
    transition: all 0.2s ease-in;
    z-index: 1000;
    overflow: visible;
}

The selector (-moz-focusring, or:focus-visible for chrome / standardised version) means it doesn’t appear onclick.
Remove outline (the authored style) so doesn’t interfer.
Have two box-shadows, and dark inner and light outer.
Very mild transition to help it standout.
z-index and overflow to get around some odd authoring styles/layouts, these would also help with outline.

Cheers,

-Alastair


From: David MacDonald <david@can-adapt.com<mailto:david@can-adapt.com>>
Date: Thursday, 12 July 2018 at 03:37
To: WCAG group <w3c-wai-gl@w3.org<mailto:w3c-wai-gl@w3.org>>
Subject: Possible new CSS to allow two color focus rings.
Resent-From: WCAG group <w3c-wai-gl@w3.org<mailto:w3c-wai-gl@w3.org>>
Resent-Date: Thursday, 12 July 2018 at 03:35

See this CSS issue which I filed about a year ago which is getting some uptick.

https://github.com/w3c/csswg-drafts/issues/1172



Cheers,
David MacDonald



CanAdapt Solutions Inc.
Mobile:  613.806.9005

LinkedIn
<http://www.linkedin.com/in/davidmacdonald100>

twitter.com/davidmacd<http://twitter.com/davidmacd>

GitHub<https://github.com/DavidMacDonald>

www.Can-Adapt.com<http://www.can-adapt.com/>



  Adapting the web to all users
            Including those with disabilities

If you are not the intended recipient, please review our privacy policy<http://www.davidmacd.com/disclaimer.html>