Universal Popup Control

popup.css

[aria-hidden="true"] { display: none; }

popup.html

<a href="#" aria-haspopup="true" aria-controls="expandable" aria-expanded="false">Make something expand</a>
<div id="expandable" aria-hidden="true">
  <h3>Leave a commment</h3>
  <form>
    <label for="comment">Comment</label>
    <textarea id="comment"></textarea>
  </form>
</div>

popup.js

// For use with little popup menus or subnavigation dropdowns.
const popupTriggers = document.querySelectorAll('[aria-haspopup]');
for(let i = 0; i<popupTriggers.length; i++) {
    let popupTrigger = popupTriggers[i];
    let popupTarget = document.getElementById(popupTrigger.getAttribute('aria-controls'));
    popupTrigger.addEventListener('click', function( event ){
        event.preventDefault();
        if(popupTrigger.getAttribute('aria-expanded') === "true") {
            popupTrigger.setAttribute('aria-expanded', 'false');
            popupTarget.setAttribute('aria-hidden', 'true');
            // TODO: Set focus to previous focus
        } else {
            popupTrigger.setAttribute('aria-expanded', 'true');
            popupTarget.setAttribute('aria-hidden', 'false');
            popupTarget.querySelector('[tabindex="0"], input, textarea, select, button, a').focus();
        }
    });
}