Universal Popup Control

popup.css

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

popup.html

<a href="#comment-form" data-popup="comment-form" aria-expanded="false">Leave a comment!</a>

<div id="comment-form" aria-hidden="true">
    <h3 tabindex="0">Leave a comment</h3>
    <form>
        <label for="comment">Comment</label>
        <textarea id="comment"></textarea>
        <button>Submit</button>
    </form>
</div>

popup.js

// For use with little popup menus or subnavigation dropdowns.
const popupTriggers = document.querySelectorAll('[data-popup]');

for (let popupTrigger of popupTriggers) {
    let popupContainer = document.getElementById(popupTrigger.getAttribute('data-popup'));

    popupTrigger.addEventListener('click', (event) => {
        event.preventDefault();

        if (popupTrigger.getAttribute('aria-expanded') === 'true') {
            popupTrigger.setAttribute('aria-expanded', 'false');
            popupContainer.setAttribute('aria-hidden', 'true');
            popupTrigger.focus();
        } else {
            popupTrigger.setAttribute('aria-expanded', 'true');
            popupContainer.setAttribute('aria-hidden', 'false');
            popupContainer.querySelector('[tabindex="0"], input, textarea, select, button, a').focus();
        }
    });
}