Browser Inconsistencies in `:focus` Styles

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

  • Chrome highlights everything
  • Firefox skips link
  • Safari skips button and link, but will pick them up when tabbing via alt + tab

Summary by tags

  • everyone picks up: input, text area, checkbox, select, div, and span
  • complexity: radio, button, link

Thoughts / suggestions

  • should still choose semantic tags → users may be used to the behaviors in the browser they use
    • do not use extra JS to force focus an element
    • do not choose
      over
  • may use CSS pseudo selector on parent div, i.e., hover div, then something happens to some svg inside of it

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/