blur
simply removes focus from the control. Think of it in terms of eyesight – focus
is focusing attention onto something and blur
is removing that focus. But I’ll admit that it’s a funky idiom in terms of keyboard navigation.
So in the case of the above snippet, it’s essentially rejecting the focus
request by blur
ring immediately. If you add a focus ring with *:focus { outline: 2px solid blue; }
, you’ll see the focus being given for a split second (the focus ring appears) and then immediately revoked (the focus ring goes away).