A simple trick (subject to improvement) to hide outline until the user starts interacting with the site with the keyboard.

accessibility_outline.js

/* global document */
import { KEY_CODES } from './data/constants';

export default function initTabSpy() {
  document.body.classList.add('isUsingPointer');
  document.addEventListener('keydown', (evt) => {
    if (evt.which === KEY_CODES.TAB) { // or may be any keydown?
      document.body.classList.remove('isUsingPointer');
    }
  });

  document.addEventListener('click', () => {
    document.body.classList.add('isUsingPointer');
  });
}

/* layout.css
.isUsingPointer button:focus,
.isUsingPointer input:focus,
.isUsingPointer textarea:focus,
.isUsingPointer a:focus {
  outline: none;
}
*/