JSFiddle - React, Tailwind, and code Playground

HTML

<div id="modal">
    <a href="#">Link One</a>
    <a href="#">Link Two</a>
</div>

CSS

#modal {background:red;margin:200px auto;padding:20px;text-align:center;width:300px;}
a {padding:20px;}

JavaScript

var modal = document.getElementById('modal');
var aList = modal.getElementsByTagName('a');
var firstItem = aList[0];
var lastItem = aList[aList.length-1];

function checkTabPress(e) {
    "use strict";
    // pick passed event of global event object
    e = e || event;

    if (e.keyCode === 9) {
        if (e.shiftKey) {
        	console.log('back tab pressed');
            firstItem.onblur=function(){
                console.log('last a focus left');
                lastItem.focus();
            };
            e.preventDefault();
        }
        console.log('tab pressed');
        lastItem.onblur=function(){
            console.log('last a focus left');
            firstItem.focus();
        };
        e.preventDefault();
    }
}
modal.addEventListener('keyup', checkTabPress);