JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<body onkeydown="keyDownFn()" onload="init()">
<p>Try navigating the links below by using any key on you keyboard </p>
<p><div id="myAnchor1" tabIndex="1">Link 1</div></p>
<p><div id="myAnchor2" tabIndex="1">Link 2</div></p>
<p><div id="myAnchor3" tabIndex="1">Link 3</div></p>
<script>
var elements;
var current = 1;
var max = 0;
function keyDownFn() {
// you can add a check for specific keys here.
elements[current % max].focus();
current = current+1;
}
function init() {
// all elements that you want to focus in turn can be stored on load.
elements = document.getElementsByTagName('div');
max = elements.length;
document.getElementById("myAnchor1").focus();
}
</script>
</body>
</html>