End of blog post.

[Author leans back, puts feet on desk and starts puzzling over a Rubik’s Cube. Sensing there are still people in the room, he looks up…]

Oh hey there, what are you still doing here?

Oh, you want to complicate things unnecessarily?

You want to handle the super-duper edge case where a user starts tabbing, but then begins using the mouse. You then want to start hiding the blue focus ring again, rather than continue to show the outline because that would surely be the end of the world.

I disapprove, but I support your right to do things the wrong way.

I only disapprove because of a personal distaste for complexity.

We listen for the first press of the tab key, then add the user-is-tabbing class to the body. Then we start listening for a mousedown event, and if that occurs, we remove the user-is-tabbing class from the body, and start listening for tab again.

Easy peasy.

(Performance note: running this handleFirstTab function on every key press might be a performance concern for you. It takes about 5 microseconds — so if you think your users will notice a 5 microsecond delay (which would be impressive since a display typically only updates every sixteen thousand microseconds) then I’d steer clear of this approach.)

End of blog post.

Thanks for reading. You’ve all been great.

[Author plops down in a lounge chair, retrieves a foot-long Toblerone from under a cushion and snaps off a triangle. Sensing someone is still in the room, he turns around sharply...]

Oh what is it now?

You want to have a subtle focus style for mouse users, when they have clicked on a keyboard-entry element (e.g. <input type="text"> or <textarea> ). And remove other focus rings, but then for the keyboard navigators show the normal focus ring.

Excellent choice, this is what I do, too.

For this let’s flip the logic. First, we’ll either hide the focus ring, or make it something more subtle.

Next, for the users who are tabbing, we’ll show something that stands out a little more. I haven’t found a good way to ‘reset’ to focus ring for all browsers, but the webkit approach covers most users and the fallback looks fine if you ask me.

Accessibility is !important!

You may have heard that box-shadow is a good way to replicate that blurry outline, but thanks to Tim in the comments, I now know that a <select> can’t have a box-shadow in Safari. Edit, and thanks

Here’s a general approximation of what I use in the projects I work on: