Handling arrow keys and tabIndex
Through clever usage of destructuring and using objects to store possible events, you can do this.
function focus(key){
  const {activeElement:{[key]: elementSibling} = {}} = document;
  if(elementSibling){
    elementSibling.focus();
  }
}

const ACTIONS = {
  ArrowDown: () =&gt; focus('nextElementSibling'),
  ArrowUp: () =&gt; focus('previousElementSibling'),
  Enter: (e) =&gt; myCustomEvent(e)
}

function handleKeyDown (e) {
  const handler = ACTIONS[e.key];
  if(handler) {
    e.preventDefault();
    handler(e);
  }
}

Here is a working example:


function focus(key){
  const {activeElement:{[key]: elementSibling} = {}} = document;
  if(elementSibling){
    elementSibling.focus();
  }
}

const ACTIONS = {
  ArrowDown: () =&gt; focus('nextElementSibling'),
  ArrowUp: () =&gt; focus('previousElementSibling'),
  Enter: (e) =&gt; myCustomEvent(e)
}

function handleKeyDown (e) {
  console.log(e.key, e.target);
  const handler = ACTIONS[e.key];
  if(handler) {
    e.preventDefault();
    handler(e);
  }
}

// simulating an event
window.addEventListener('keyup', handleKeyDown);
&lt;h3&gt;Click on an element then press ArrowUp or ArrowDown&lt;/h3&gt;
&lt;input type="text"/&gt;
&lt;input type="text"/&gt;
&lt;input type="text"/&gt;
&lt;input type="text"/&gt;