Skip to content

show focus ring when using keyboard to focus, hide otherwise

Warren Gifford requested to merge kbd-focus into master

Created by: sqs

This cleans up focus rings in our app.

  • The :focus-visible CSS pseudoselector is intended for "elements whose focused state should be indicated visibly". This includes elements that are keyboard-focused (eg by pressing tab) but not, eg, buttons that were just clicked. Technically those buttons retain focus after the click, but it's not usually helpful to show the focus ring on them. :focus-visible is not widely supported by browsers yet, so we polyfill it. This means that all focus rings in our application look the same way (before this commit, some were the OS default and some were Bootstrap).
  • Remove the focus ring around non-:focus-visible elements. Before this commit, we did show it on buttons that were just clicked, etc.

Merge request reports