JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="dr-dropdown-list" aria-haspopup="true">
    <a href="#">Vælg region</a>
    <ul>
        <li><a href="/">Fyn</a></li>
        <li><a href="/">Fyn</a></li>
        <li><a href="/">Fyn</a></li>
        <li><a href="/">Fyn</a></li>
    </ul>
</div>
<hr/>
<ul>
    <li><a href="/">Fyn</a></li>
    <li><a href="/">Fyn</a></li>
    <li><a href="/">Fyn</a></li>
    <li><a href="/">Fyn</a></li>
</ul>

CSS

.js .dr-dropdown-list ul {
    display: none;
}
.js .dr-dropdown-list a:focus + ul {
    display: block;
}

.dr-dropdown-list li a.focus {
    color: red;
}

JavaScript

document.id(document.documentElement).addClass("js");

var dropdowns = document.getElements(".dr-dropdown-list"),
    activeToggler;
    
var guardKeys = function (e) {
    var settings,
        inc = 1;        
    switch(e.key) {
        case "tab":
            if (e.shift) {
                inc = -1;                
            }
            settings = activeToggler.retrieve("settings");
            if (window.console) {
                console.log("tabbed", inc, settings);                  
            }
            if (settings.index + inc < settings.links.length && settings.index + inc > -1) {
                settings.links[settings.index].removeClass("focus");
                settings.index += inc;
                activeToggler.set("aria-activedescendant", settings.links[settings.index].id);
                settings.links[settings.index].addClass("focus");
                return false;
            }             
            break;                
    }
};

dropdowns.each(function (dropdown) {
    var toggler = dropdown.getChildren("a")[0],
        links = dropdown.getElements("li a"),
        id = "dr-dropdown-list-" + Number.random(0, 0xFFFFFF).toString(31);
    
    toggler.store("settings", {
        links: links,
        index: 0
    });
    
    links.each(function (link, i) {
        link.id = id + "-" + i;
    });
    
    toggler.addEvents({
        focus: function (e) {
            activeToggler = toggler;
            window.addEvent("keydown", guardKeys);
        },
        blur: function () {
            activeToggler = null;                
            window.removeEvent("keydown", guardKeys);
        }
    });
    
});