Global :focus { outline: none; } reset declaration and Polyfill concerns

[joe-watkins]

Hi :)

Per the documentation, I'm really struggling with the blanket :focus { outline: none; } code recommendation. I want to be on board with this awesome feature but feel like we could come up with something better.

It is very bold to say hey.. attention all browsers - kill all outlines on focusable elements and then rely on JS to fill the gaps or when implemented only supporting browsers will overwrite that rule. Many older browsers support :focus {} but will not support :focus-ring ever.

Some ideas

Here are some ideas instead of just a global :focus { outline: none; }

1. For the spec: lean on fault tolerance so browsers that don't understand skip it?:

:not(:focus-ring) :focus { outline: none; }

2. For the Polyfill have JS add a class to html tag and descend from that:

.focus-ring-polyfill :focus:not(.focus-ring) { outline: none; }

This would mean JS is probably present, loaded, no errors, and the Polyfill should work.

I don't want to be a stick in the mud but we are working hard out here trying to get folks to stop killing outlines for many different accessibility-related reasons.

Consider these personas:

Lisa: I use my Dell laptop I'm a mouse user, touch user, and a keyboard user. I have a cognitive related disability that affects my memory and have low-vision it's important for me to have an understanding of where I am in the interface -- and yes even right after I click on something. I don't always use a screen reader. I may start a web form using a keyboard and then click on something and I get confused when the focus ring is removed from the UI.

Paul: I turn JavaScript off because it ensures my browsing experience does not have too much animation. I'm epileptic, have low vision, and very sensitive to animation and flashing. I'm also a keyboard user and mouse user. Because of this I turn the brightness down on my screen. I have difficulty getting around a site when they don't have focus states.

[robdodson]

Thanks for the issues and pull requests. Myself and Alice have been traveling and out sick so we're catching up on things. Didn't want you to think that lack of a response meant we were ignoring you!

[jonathantneal]

These are great observations, @joe-watkins. Here is my train of thought on the matter:

In Media Queries Level 4 or 5, we can check for scripting:

@media (scripting: enabled) {
  :focus:not(.focus-ring) {}
}

But if :focus-ring ships first, it doesn’t matter. So, for now, we can use the .js cowpath:

.js :focus:not(.focus-ring) {}

But that increases selector weight. Err..

So, what if the polyfill provided 2 focus classes?

.js-focus {}
.js-focus-ring {}

This might preserve selector weight and protect non-js experiences. Thoughts?

[robdodson]

After discussing this with Alice I think we're going to go with the approach of adding a class to the body to indicate that JS is working and the polyfill has been loaded properly. This should also address #6

[joe-watkins]

@robdodson Sweet!

[jonathantneal]

@robdodson, will it increase selector weight?

[stefanjudis]

Hmm.. @robdodson this can be closed now or? It looks like I messed up the auto issue closing. :)

[robdodson]

yep we can close it. Although I do kinda like the suggestion of using the .js-* prefix. I think that's a common convention.