JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<h1>Basic <kbd>tab</kbd> handling for any element</h1>
<ul id="myList">
    <li id="item1">1</li>
    <li id="item2">2</li>
    <li id="item3">3</li>
    <li id="item4">4</li>
</ul>

CSS

li:focus:before {content: "►"; font-family: arial, sans-serif; font-size: 10px; color: #333; margin-right: 5px;}
li:focus {background: #FAFAFA;}

/* non-important */
body {font-family: arial, sans-serif;}
h1 {margin: 5px 0;}
li {padding: 10px; background: #EEE;}

JavaScript

$$('#myList li').set('tabindex', '0');

document.addEvent('keydown', function(ev){
    if(ev.key == 'enter') {
        console.log(ev.target.get('id'));
    }
});