focus-ring.js

let clicked = false;

// `mousedown` always seems to fire before `focusin`.
// (But within the same millisecond).
document.addEventListener('mousedown', () => {
	clicked = true;
	setTimeout(() => clicked = false, 1);
});

// `focusin` is the bubbling version of `focus`.
document.addEventListener('focusin', () => {
	// Remove `focus-ring` class from body if user clicked or tapped.
	// Otherwise, add it.
	document.body.classList[clicked ? 'remove' : 'add']('focus-ring');
});