Helper for styling tabbed focus states: html.tabbing a:focus { }

index.css

a {
  color: rebeccapurple;
  text-decoration: none;
  outline: 0;
}

a:hover,
a:active {
  color: rebeccapurple;
  text-decoration: underline;
}

html.tabbing a:focus {
  outline: 2px solid;
  text-decoration: none;
}

index.js

$(function() {
  
  var $root = $('html');
  var tabbing, code;

  $(document).on('mousedown keydown', function (e) {
    if (e.type === 'mousedown') {
      tabbing = false;
      return;
    }

    code = e.keyCode ? e.keyCode : e.which;

    if (code == 9) {
      tabbing = true;
    }
  });

  $('a, button, input[type="submit"]').on('focus', function (e) {
    $root.toggleClass('tabbing', tabbing);
  });
  
});

Using it like this, tabbing never felt better ^.^

/**
 * Set a more prominent focus state when navigating using the keyboard
 */

body[data-focus-source] :focus {
    outline: none !important;
}

body[data-focus-source="key"] :focus {
    outline: 2px solid red !important;
}

/* Focus states for input and textarea elements is styled using borders */

body[data-focus-source="key"] :matches([tabindex="-1"]:focus, input:focus, textarea:focus) {
    outline: none !important;
}