re: Designing button focus states for better usability VIEW POST

re: Nice article. Thanks for writing this 👍 To add on that, there's a :focus-visible pseudo class (still in draft) developer.mozilla.org/en-US/docs/W.....

Please do! I've seen :focus-visible in passing, but haven't tried using it. It definitely sounds like something that would make designers happy.

I'm wondering what the difference in usability is between the two. For example, I could see having a bold focus outline show up on click being potentially confusing, because it might look like you clicked a toggle button and selected something. But I'm not sure if there's a use case where you'd want to be able to clearly see the focus state while using a mouse.

Also interesting to note that not all browsers will place focus on a button when it's clicked: developer.mozilla.org/en-US/docs/W...


Oh, thanks! I didn't know that browsers/os behave in a different way regarding focus when clicking on a button.

I'll try to write that post, I don't know :focus-visible in details just yet, that would be a good opportunity to learn (even though for now this is only in Chrome behind a flag)

Code of Conduct Report abuse