Focus Highlight

Focus Highlight replaces your native focus outline with an animated one. This can be useful if you can't rely on the native focus outline or if you just want to have a nice animation.

How to use

Install via NPM:

npm install focus-highlight

Import Focus Highlight with the JS-Bundler of your choice:

import FocusHighlight from 'focus-highlight'

Initialize Focus Highlight after you finish loading the page:

FocusHighlight.init()

Each time a element is now focused with the keyboard, focus-highlight will get activated and renders the focus. If you want to focus an element programmatically use:

FocusHighlight.setFocus(yourElement)

Customization

Focus Highlight comes with default settings which can be changed:

FocusHighlight.init({
  padding: 2,
  borderRadius: 4,
  borderThickness: 2,
  boxShadow: '0 0 5px 1px dodgerBlue',
  transition: 'all .3s ease',
  color: 'dodgerBlue',
  customStyle: false, // Set to true if you want to roll with your own CSS
  hideOnTransitionEnd: false, // Hides focus after transition ended
  zIndex: 9999
})

If your using custom forms and aren't happy with the default focus, you can add a custom wrapper-element with the data-focus-highlight="wrapper" attribute and focus-highlight will focus that instead.

Known Limitations

Firefox comes with its own custom outline, outline: none; is not enough unfortunately. You have to style each form element in order to get rid of them.

Alternatives

Flying Focus offers a similiar solution and even comes with a browser extension, if that is what you looking for.

License

MIT