JSFiddle - React, Tailwind, and code Playground

by jwerre

HTML

<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
</ul>

CSS

a:hover,
.highlighted a {
  background-color: red;
}

JavaScript

const list = document.querySelector('ul');

const keyupHandler = (e) => {


  let highlighted = document.querySelector('.highlighted');


  if (e.keyCode === 40 || e.keyCode === 9) {
  
  	if (!highlighted) {
    	highlighted = list.lastElementChild;
    }


    highlighted.classList.remove('highlighted');

    let nextItem = highlighted.nextElementSibling;

    if (!nextItem) {
      nextItem = list.firstElementChild;
    }

    nextItem.classList.add('highlighted');

  }

  if (e.keyCode === 38) {
  
    if (!highlighted) {
    	highlighted = list.firstElementChild;
    }


    highlighted.classList.remove('highlighted');

    let prevItem = highlighted.previousElementSibling;

    if (!prevItem) {
      prevItem = list.lastElementChild;
    }

    prevItem.classList.add('highlighted');


  }

  if (e.keyCode === 13) {
    let link = highlighted.querySelector('a')
    link.dispatchEvent(new Event('click'));
  }

};

const linkClickHandler = (e) => {
  console.log('linkClickHandler', e.target.text);
  e.preventDefault();
  document.querySelector('.highlighted').classList.remove('highlighted');
  e.target.parentNode.classList.add('highlighted');

}

document.querySelectorAll('a').forEach((link) => {
  link.addEventListener('click', linkClickHandler);
});
document.body.addEventListener('keyup', keyupHandler);