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



*Can**Adapt* *Solutions Inc.*
Mobile:  613.806.9005

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

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>
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>
> *Date: *Thursday, 12 July 2018 at 03:37
> *To: *WCAG group <w3c-wai-gl@w3.org>
> *Subject: *Possible new CSS to allow two color focus rings.
> *Resent-From: *WCAG group <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
>
>
>
> *Can**Adapt* *Solutions Inc.*
>
> Mobile:  613.806.9005
>
> LinkedIn
> <http://www.linkedin.com/in/davidmacdonald100>
>
> 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>
>