focusDisplayHandler

description

Adds data-focus-method to document.activeElement which differentiates between keyboard, mouse and touch focus - values of which can be touch, key or mouse. This allows you to style keyboard focus events and hide the focus ring for mouse events (because designers hate those!)

requires

• setFocusOnTarget (handled automatically)

parameters

• none

returns

• nothing

example usage:

Setup:

import { focusDisplayHandler } from './functions'

document.addEventListener('DOMContentLoaded', function(){
  // workout focus type
  focusDisplayHandler();
});

In your CSS:

:focus[data-focus-method="mouse"],
:focus[data-focus-method="touch"] {
  outline: none !important;
}