Demo

By default, browsers add an outline around your shiny buttons when they are focused. This is great for keyboard accessibility, but most users don't use keyboard for navigating. The goal of this library is to provide best visual experience for most users, while keeping good keyboard accessibility.

fix-outline disables outline until user actually uses keyboard navigation. It works out of the box with your existing CSS.

Test it

1. Try to click a button. There's no outline.
2. Press tab key to navigate between buttons. Outline becomes enabled.

You can try this same demo page without fix-outline.