Differentiate between mouse and keyboard focus

keyboard-focus.js

// Handlers managed by the addFocusStates and removeFocusStates methods.
var onMouseDown = function() {
  this.classList.add('pressed');
};

var onMouseUp = function() {
  this.classList.remove('pressed');
};

var onFocus = function() {
  // Only render the "focused" state if the element gains focus due to
  // keyboard navigation.
  if (!this.classList.contains('pressed')) {
    this.classList.add('focused');
  }
};

var onBlur = function() {
  this.classList.remove('focused');
};

// Elements passed to this method will receive classes reflecting the focus
// and pressed states.
function addFocusStates(selector) {
  var nodes = document.querySelectorAll(selector);
  Array.prototype.forEach.call(nodes, function(el) {
    el.addEventListener('mousedown', onMouseDown);
    el.addEventListener('mouseup', onMouseUp);
    el.addEventListener('focus', onFocus);
    el.addEventListener('blur', onBlur);
  });
}
// Cleanup method for elements with managed focus states
function removeFocusStates(selector) {
  var nodes = document.querySelectorAll(selector);
  Array.prototype.forEach.call(nodes, function(el) {
    el.removeEventListener('mousedown', onMouseDown);
    el.removeEventListener('mouseup', onMouseUp);
    el.removeEventListener('focus', onFocus);
    el.removeEventListener('blur', onBlur);
  });
}