Browser Inconsistencies in `:focus` Styles

Created:

Very rough notes outline on what's happening in the :focus (without tapping into :focus-within) styles in different browsers.

Experiment: http://output.jsbin.com/pucila

Summary

Summary by tags

Thoughts / suggestions

Etsy's focus UI using parent div, a heart icon floats up when focused

Reference materials

https://zellwk.com/blog/inconsistent-button-behavior/ https://www.alexlande.com/articles/cross-browser-tabindex-woes/