Keyboard only focus styling

Keyboard user styling is hidden if mouse click user detected

by Allen N.

HTML

<p>
  A unique class is added to body tag when button is clicked with mouse.
</p>
<p>
  The unique class is removed once user starts using the Tab key.
</p>
<p>
  The unique class is NOT added when executing button with Enter/Return key or with a screen reader.
</p>
<p>
  <button>
    This button wont show focus styling with a mouse click.
  </button>
</p>
<div class="mouse-user-detected">
  Mouse user detected!
</div>

CSS

body:not(.user-is-clicking-with-a-mouse) .mouse-user-detected {
  display: none;
}
            
body:not(.user-is-clicking-with-a-mouse) *:focus {
  outline: 4px solid #ff4e00 !important;
}

button {
  outline: none;
}

JavaScript

function checkIfMouseClicked() {
  var allButtonsOrLinks = document.querySelectorAll('button, a, label'),
    mouseUpTriggeredMomentAgo = false;

  for (var i = 0; i < allButtonsOrLinks.length; i++) {
    (function(i) { // <-- BugFix: functions below need to uniquely happen again in each loop.
      var buttonOrLink = allButtonsOrLinks[i];

      buttonOrLink.addEventListener('mousedown', function() {
        mouseUpTriggeredMomentAgo = true;
        addBodyClassForMouseUser();
      });
      buttonOrLink.addEventListener('mouseup', function() {
        setTimeout(function() {
          mouseUpTriggeredMomentAgo = false;
        }, 333); // Slightest setTimeout for if-statement in next click event.
      });
      buttonOrLink.addEventListener('click', function() {
        if (!mouseUpTriggeredMomentAgo) {
          removeBodyClassForMouseUser();
        }
      });
    }).call(this, i);
  }
  keyDownRemovesBodyClassForMouseUser();
}



var bodyClassForMouseUser = 'user-is-clicking-with-a-mouse',
		body = document.querySelector('body');

function addBodyClassForMouseUser() {
  body.classList.add(bodyClassForMouseUser);
}

function removeBodyClassForMouseUser() {
  body.classList.remove(bodyClassForMouseUser);
}

function keyDownRemovesBodyClassForMouseUser() {
  document.addEventListener('keydown', function(e) {
    if (e.keyCode === 9) {
      removeBodyClassForMouseUser();
    }
  });
}

checkIfMouseClicked();