How to make any element focusable in terms of JS

HTML

<body onload="loadListener()" id="body">
  <input type="text" id="input">
  <input type="text" id="secondInput">
    <ul id="ul">
      <li id="li_1" class="focusable">John</li>
      <li id="li_2" class="focusable">Jane</li>
      <li id="li_3" class="focusable">Karl</li>
      <li id="li_4" class="focusable">Hank</li>
    </ul>
    <div id="log">
      <div>Log started.</div>
    </div>
</body>

CSS

#log {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  background: #fff;
  color: #f00;
}

.focusable, .focusable:focus, .focusable:active {
  border: none;
  outline: none;
  cursor: default;
  color: transparent;
  text-shadow: 0 0 0 #000;
}

JavaScript

function makeFocusable(cbBlur) {
	var focusables = document.querySelectorAll('.focusable');
  focusables.forEach(function(el) {
  	el.addEventListener("keydown", function(e) {
    	e.preventDefault();
    	e.stopPropagation();
    });
    el.addEventListener("blur", cbBlur);
    el.contentEditable = true;
  });
}

function loadListener() {
    document.getElementById("input").addEventListener("blur", blur);
    document.getElementById("secondInput").addEventListener("blur", blur);
    makeFocusable(blur);
}

function blur(e) {
		addToLog(`Blurred: ${e.target.id}; Focused: ${e.relatedTarget.id}`);
}

function addToLog(str) {
		document.getElementById("log").insertAdjacentHTML('beforeend', `<div>${str}</div>`);
}