Focus Ring! -- A11ycasts #16

[@tobias-edwards]

Great video, :focus-ring was renamed to :focus-visible

[@benknightguitar]

Great video, but I think the explanation for why the browser draws the outline ring around the styled button is actually a little confusing. It's not that the browser specifically draws an outline around a styled button as a special case because it's not sure what else to do. Rather, when an author decides to style a button element, it automatically disables the browser's special treatment of the button element of giving it a native OS rendering. So, now the global browser default of drawing an outline ring around any element that can receive keyboard focus applies. In other words, on Chrome for example, this rule from the user agent stylesheet takes effect once the button's native styling has been overridden: :focus { outline: -webkit-focus-ring-color auto 5px; }

[@zoebijl7440]

That’s one fancy laptop sticker you have there :D Excellent show. Nice to see Alice and Brian working on more poly fill stuff.

[@humanhb]

what is that background sound at 1:09?

[@rchrdnsh]

Cooooool, buuuuuut...will the focus ring pseudo selector allow us to restyle the focus ring so that it no longer looks like a bucket of chum?

[@devvvvvvvvvvvv]

2:54 Edit: I'm so sorry Rob, but that was hilarious.

[@GilGoldshlager]

Love it, I had that issue not long time ago and this will definitely gonna help not completely removing the outline, thanks! :)

[@DrRobrez]

awesome! thanks

[@victornpb]

isn't the polyfill missing some input types like email, url, tel, search...?

[@howtopaintlike]

Well done. Excellent content!

[@PawanGuptaPatna]

Very very comfortable mind

[@myfrom]

Does this polyfill work with Custom Elements that use Shadow DOM?

[@konstantinkkk8397]

is it still important in 2019? It looks like firefox and chrome already understand when user click and do not outline buttons.

[@abdullahalmamun4488]

are you do a simple work to hard???

[@neilosman4440]

I don't like the all notion of a focus ring. i think that inclusive design should require hover and focus styles on each and every interactive component. BTW, i think the polyfill should also white list [contenteditable] elements, video/audio [controls]

[@zoebijl7440]

What good does a focus ring do on a button for a mouse user? Regardless, all the polyfill does is mimic default browser behaviour on custom controls.

[@neilosman4440]

What good does a focus ring on a button have for a mouse users? Ugliness at best. But Michiel, you should ask what good does hover styles on a button has to offer to mouse users, because that is what i was suggesting - that all interactive elements should response to user events regardless of input device (finger, mouse, keyboard, voice etc). UA should provide defaults, web designers should enhance such defaults to make them more legible and appealing. hover styles on buttons are indispensable for users with cognitive and sight impairments

[@zoebijl7440]

For anyone else wondering, we had this same discussion on Twitter: twitter.com/rob_dodson/status/845377176857821185

[@Vizzent01]

HOW TO DELETE IT